DataTableElement

Large data table for Custom Elements

Features

• Supports >100,000 data
• Search by column
• Filter items
• CSV Download

Usage

1<script src="./dist/polyfill.min.js"></script> <!-- for IE11-->
2<script src="./dist/data-table-element.min.js"></script>
3
4<data-table-element></data-table-element>
5
6<script>
7  var dataTable = document.querySelector('data-table-element');
8  dataTable.tableData = [
9    {title: 'タイトル1 1-AAA', category: 1, genre: 'AAA', value: 100, comment: 'XXXXXX-XXXXXXXXX-XXXXXX'},
10    {title: 'タイトル2 2-AAA', category: 2, genre: 'AAA', value: 200, comment: 'YYYYYYYYYYY-YYYYYYYYYYY'},
11    {title: 'タイトル3 2-BBB', category: 2, genre: 'BBB', value: 0},
12  ];
13
14  dataTable.tableColumns = [
15    {name: 'title', title: 'タイトル', width: 400},
16    {name: 'category', title: 'カテゴリー', width: 200},
17    {name: 'genre', title: 'ジャンル', width: 200},
18    {name: 'value', title: '値', width: 100},
19    {name: 'comment', title: 'コメント', width: 500}
20  ];
21
22  dataTable.searchColumns = [
23    'title',
24    'comment'
25  ];
26
27  dataTable.filterColumns = [
28    'category',
29    'genre'
30  ];
31
32  // Customize the format of data to download (Option)
33  var formatMap = new Map();
34  formatMap.set('FormatA', [
35    {name: 'title', title: 'タイトル'},
36    {name: 'value', title: '値'}
37  ]);
38
39  formatMap.set('FormatB', [
40    {name: 'title', title: 'タイトル'},
41    {name: 'category', title: 'カテゴリー'},
42    {name: 'genre', title: 'ジャンル'},
43    {name: 'comment', title: '詳細'}
44  ]);
45
46  dataTable.downloadFormatMap = formatMap;
47</script>

Attributes

1<data-table-element csv="filename.csv"></data-table-element>