Vue.js + vue-good-table でテーブルを表示する
この記事は約 4 分で読めます。
vue-good-table は、
VueJS 用の強力な
データテーブルプラグインです。
並べ替え、列のフィルタリング、
ページネーション、グループ化などの
高度なカスタマイズを備えています。
CDN
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vue-good-table/dist/vue-good-table.min.css">
<script type="text/javascript" src="https://unpkg.com/vue-good-table/dist/vue-good-table.min.js"></script>
HTML
<div id="app">
<template>
<div>
<vue-good-table
:columns="columns"
:rows="rows"/>
</div>
</template>
</div>
JavaScript
var app = new Vue({
el: '#app',
name: 'my-component',
data(){
return {
columns: [
{
label: 'Name',
field: 'name',
},
{
label: 'Age',
field: 'age',
type: 'number',
},
{
label: 'Created On',
field: 'createdAt',
type: 'date',
dateInputFormat: 'yyyy-MM-dd',
dateOutputFormat: 'MMM Do yy',
},
{
label: 'Percent',
field: 'score',
type: 'percentage',
},
],
rows: [
{ id:1, name:"John", age: 20, createdAt: '',score: 0.03343 },
{ id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
{ id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
{ id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
{ id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
{ id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
],
};
},
});
Result
Options
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません