DataTableElement

Large data table for Custom Elements

Features

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

Usage

<script src="./dist/polyfill.min.js"></script> <!-- for IE11-->
<script src="./dist/data-table-element.min.js"></script>

<data-table-element></data-table-element>

<script>
  var dataTable = document.querySelector('data-table-element');
  dataTable.tableData = [
    {title: 'タイトル1 1-AAA', category: 1, genre: 'AAA', value: 100, comment: 'XXXXXX-XXXXXXXXX-XXXXXX'},
    {title: 'タイトル2 2-AAA', category: 2, genre: 'AAA', value: 200, comment: 'YYYYYYYYYYY-YYYYYYYYYYY'},
    {title: 'タイトル3 2-BBB', category: 2, genre: 'BBB', value: 0},
  ];

  dataTable.tableColumns = [
    {name: 'title', title: 'タイトル', width: 400},
    {name: 'category', title: 'カテゴリー', width: 200},
    {name: 'genre', title: 'ジャンル', width: 200},
    {name: 'value', title: '値', width: 100},
    {name: 'comment', title: 'コメント', width: 500}
  ];

  dataTable.searchColumns = [
    'title',
    'comment'
  ];

  dataTable.filterColumns = [
    'category',
    'genre'
  ];

  // Customize the format of data to download (Option)
  var formatMap = new Map();
  formatMap.set('FormatA', [
    {name: 'title', title: 'タイトル'},
    {name: 'value', title: '値'}
  ]);

  formatMap.set('FormatB', [
    {name: 'title', title: 'タイトル'},
    {name: 'category', title: 'カテゴリー'},
    {name: 'genre', title: 'ジャンル'},
    {name: 'comment', title: '詳細'}
  ]);

  dataTable.downloadFormatMap = formatMap;
</script>

Attributes

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