Tabulatorの使い方 jQuery不要 DataTables代替

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>

npm install tabulator-tables

<link href="./node_modules/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="./node_modules/tabulator-tables/dist/js/tabulator.min.js"></script>

<table id="example-table">
  <thead>
    <tr><th>名前</th><th>おすすめ度</th><th>チェック</th><th>日付</th></tr>
  </thead>
  <tbody>
    <tr><td>さまよえるオランダ人</td><td>5</td><td>true</td><td>2022-07-01</td></tr>
    <tr><td>山田ちぬ</td><td>3</td><td>false</td><td>2022-07-01</td></tr>
    <tr><td>ユッスー・ンドゥール</td><td>4</td><td>true</td><td>1959-10-01</td></tr>
    <tr><td>アッヘンバッハ三姉妹</td><td>2</td><td>true</td><td>2021-01-31</td></tr>
    <tr><td>絶対傘ささないマン</td><td>1</td><td>false</td><td>2020-06-29</td></tr>
  </tbody>
</table>

let table = new Tabulator('#example-table', {});

<div id="example-table"></div>

//データの配列
let tableData = [
  { name: 'さまよえるオランダ人', rating: 5, check: true, date: '2022-07-01' },
  { name: '山田ちぬ', rating: 3, check: false, date: '2022-07-01' },
  { name: 'ユッスー・ンドゥール', rating: 4, check: true, date: '1959-10-01' }
];

//データをJSONで渡す場合
//tableData = JSON.stringify(tableData);

//インスタンス生成
let table = new Tabulator('#example-table', {
  data: tableData,   //データの読み込み
  autoColumns: true, //自動で列の設定を最適化する
});

<div id="example-table"></div>

//インスタンス生成
let table = new Tabulator('#example-table', {
  ajaxURL: './data.php', //AjaxのURL
  autoColumns: true,     //自動で列の設定を最適化する
});

//インスタンス生成
let table = new Tabulator('#example-table', {
  ajaxURL: './data.php', //AjaxのURL
  ajaxConfig: 'POST', //リクエストメソッドの設定
  ajaxParams: { key1: 'value1', key2: 'value2' }, //パラメータの設定
  autoColumns: true,
});

let table = new Tabulator('#example-table', {
  height: 400,       //テーブルの高さ パーセンテージまたはピクセルを表す整数で指定
  maxHeight: '100%', //最大の高さ heightを設定しない場合に有効
  minHeight: 300,    //最小の高さ heightを設定しない場合に有効
  rowHeight: 40,     //行の高さ ピクセルを表す整数で指定
  resizableColumnFit: true, //ひとつの列の幅を変更したときに列全体の幅を維持する
  layout: 'fitData', //列のレイアウト (firData|fitDataFill|fitDatStretch|fitDataTable|fitColumns)
});

let table = new Tabulator('#example-table', {
  //カラムの設定
  columns: [
    {
      title: '名前', //テーブルの列の表示名
      field: 'name', //配列、JSONなどのデータのキー
      resizable: true, //列の幅の変更を可能にする (true|false|'header'|'cell')
      minWidth: 120, //最小の列の幅
      maxWidth: 200, //最大の列の幅
      hozAlign : 'left', //水平方向の位置 (left|center|right)
      vertAlign : 'top', //垂直方向の位置 (top|middle|bottom)
      headerVertical: true, //ヘッダのテキストを縦書きにする
      frozen: true, //横スクロールするときに列を固定する
    },
    {
      title: 'おすすめ度',
      field: 'rating',
      resizable: true,
      minWidth: 120,
      maxWidth: 200,
      headerVertical: true,
      frozen: false,
    },
    ...
  ],
});

let table = new Tabulator('#example-table', {
  //カラムの設定
  columns: [
    {
      title: '名前',
      field: 'name',
      sorter: 'string', //Sorterの指定
      sorterParams: { locale: true, alignEmptyValues: 'bottom' }, //Sorterのオプション
    },
    ...
  ],
});

{ title: '名前', field: 'name', sorter: 'string', headerSort: false }

let table = new Tabulator('#example-table', {
  initialSort: [
    { column: 'name', dir: 'asc' },  //まず名前で昇順に並べ替える
    { column: 'date', dir: 'desc' }, //次に日付で降順に並べ替える
  ],
});

let table = new Tabulator('#example-table', {
  data: tableData,
  layout: 'fitDataFill',
  columns: [
    {
      title: '名前',
      field: 'name',
      formatter: 'plaintext', //Formatterの指定
    },
    {
      title: 'おすすめ度',
      field: 'rating',
      formatter: 'star', //Formatterの指定
      formatterParams: { stars: 5 }, //Formatterのオプション
    },
    {
      title: 'チェック',
      field: 'check',
      hozAlign : 'center',
      formatter: 'tickCross', //Formatterの指定
    },
    {
      title: '日付',
      field: 'date',
      formatter: 'datetime', //Formatterの指定
      formatterParams: { //Formatterのオプション
        inputFormat: 'yyyy-MM-dd',
        outputFormat: 'yyyy年MM月dd日',
      },
    },
  ],
});

let table = new Tabulator('#example-table', {
  pagination: true, //ページネーションを有効化
  paginationSize: 5, //1ページあたりに表示する行数
  //height: '300px', //paginationSizeを指定せずにheightを指定すると高さに合わせて自動的に行数が設定される
  paginationInitialPage: 2, //テーブルが最初にロードされるときに表示するページ
  paginationSizeSelector: true, //1ページあたりの行数をユーザが設定できるようにする trueならば[5, 10, 15, 20]
  //paginationSizeSelector: [10, 25, 50, 100, true], //任意の配列を渡すことも可能 配列にtrueを渡すとAll
  paginationCounter: 'rows', //フッタの左にページネーションカウンタを表示する rowsで行数カウンタ、pagesでページカウンタ
});

let table = new Tabulator('#example-table', {
  locale: true, //trueならばブラウザの言語設定を自動検出 'ja'のように指定することも可能
  langs: {
    ja: {
      //列の表示名の翻訳
      columns: {
        name: '名前',
      },
      //データ読込関連のテキストの翻訳
      data: {
        loading: '読込中',
        error: 'エラー',
      },
      //ページネーション関連のテキストの翻訳
      pagination: {
        page_size: '表示件数',
        page_title: 'ページを表示',
        first: '最初',
        first_title: '最初のページ',
        last: '最後',
        last_title: '最後のページ',
        prev: '前',
        prev_title: '前のページ',
        next: '次',
        next_title: '次のページ',
        all: 'すべて',
        counter: {
          showing: '表示中',
          of: '/',
          rows: '件',
          pages: 'ページ',
        },
      },
    },
  },
});

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator_simple.min.css" rel="stylesheet">

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator_midnight.min.css" rel="stylesheet">

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator_modern.min.css" rel="stylesheet">

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator_site.min.css" rel="stylesheet">