Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
29
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

HTMLのtableをソートする方法

概要

デモ

See the Pen sortable-table (with Bootstrap4) by Tom Misawa (@riversun) on CodePen.

使い方

TableのHTML

  • sortable-tableクラスをもった要素以下にtable theadを置く
  • th要素にdata-id属性でデータとひもづけるidを指定する
  • ソートしたい列にはsortable属性をつける

以下のようになる。

ソートできるテーブルのHTML
<div class="sortable-table">
    <table id="my-table1">
        <thead>
        <tr>
            <th data-id="id" data-header>
                <div>#</div>
            </th>
            <th data-id="name" sortable>
                name
            </th>
            <th data-id="price" sortable>
                price($)
            </th>
            <th data-id="weight" sortable>
                weight(carat)
            </th>
        </tr>
        </thead>
    </table>
</div>

テーブルにデータを入れる

  • 以下のようにテーブルに表示させたいデータを行ごとに配列で指定する
  • 要素名とさきほどHTMLで定義したdata-id属性が紐付く
 const data = [
    {
      id: 0,
      name: 'Diamond',
      weight: 1.0,
      price: 9000,
    },
    {
      id: 1,
      name: 'Amethyst',
      weight: 3.0,
      price: 200,
    },
    {
      id: 2,
      name: 'Emerald',
      weight: 2.5,
      price: 2500,
    },
    {
      id: 3,
      name: 'Ruby',
      weight: 2.0,
      price: 2000,
    },
  ];

  const sortableTable = new SortableTable();
  // table要素を指定する
  sortableTable.setTable(document.querySelector('#my-table1'));
  // テーブルに表示したいデータを指定する
  sortableTable.setData(data);
  • setTableでソートできるようにしたいtable要素を指定する
  • setDataでテーブルに表示したいデータを指定する

See the Pen sortable-table (with plain HTML) by Tom Misawa (@riversun) on CodePen.

ソートした結果を受け取り処理する

ソート結果はgetDataで取得できる。
setDataで元のデータを指定するが、ソートしても元のデータは変更しないようにしているので、ソート済のデータを取得したい場合はgetDataか後述のイベントコールバックから取得する。

const sortedData=sortableTable.getData();

ソートイベントを受け取る

テーブルのヘッダ部分がクリックされ、ソートが実行されるとソートイベントが発火する
以下のようにイベントリスナーを登録するとソートされたときイベントがコールバックされる。

  sortableTable.events()
    .on('sort', (event) => {
      console.log(`[SortableTable#onSort]
      event.colId=${event.colId}
      event.sortDir=${event.sortDir}
      event.data=\n${JSON.stringify(event.data)}`);
    });
  • event.colIdには列のid(=data-id)が格納される
  • event.sortDirにはソート方向(=asc or desc)
  • event.dataにはソート済のデータが格納される

ソートをコードから実行する

ユーザーのクリックではなく、コードからソートを(強制的に)実行する方法は以下の通り

ソートをコードから実行する
sortableTable.sort('price', 'asc');

sortableTable.sort([id], [sortDir]);のように指定する。

sortDirにソート方向を指定する
- asc・・・昇順ソート。昇順とは 1,2,3,4 のようになる
- desc・・・降順ソート。降順とは4,3,2,1 のようになる
- toggle・・・現在のソート方向を反転する。

ソートを初期状態に戻す

最初にデータを指定したときの状態に戻すときはresetData

初期状態に戻す
sortableTable.resetData();

ソートをコードから実行するデモ

セルの中身を装飾する

セルに値を表示するだけでなく、HTML要素やCSSなどで装飾したい場合は、setCellRendererメソッドを使う
セルのスタイルをデータのカラムのid(col.id)ごとにだし分けることができる。

以下の例ではcol.id"url"の場合aタグでかこってリンクにしている。


 // set callback function for table cell custom rendering
  sortableTable.setCellRenderer((col, row) => {
    const colValue = row[col.id];
    // cell-is-a-header
    if (col.isHeader) {
      if (typeof colValue !== 'undefined') {
        return `<th>${colValue}</th>`;
      }
      return '<th></th>';
    }
    // cell-is-not-a-header
    if (typeof colValue !== 'undefined') {
      if (col.id === 'url') {
        return `<td><a href="${colValue}" target="_blank">${colValue}</a></td>`;
      }
      return `<td>${colValue}</td>`;
    }
    return '<td></td>';
  });

デモ

See the Pen sortable-table custom rendering by Tom Misawa (@riversun) on CodePen.

まとめ

  • 拙作のソートライブラリについてお読みいただきありがとうございました
  • 何かのお役にたてますと幸いです

ソースコードについて

npm install @riversun/sortable-table
  • CDNからも利用可能です
<script src="https://cdn.jsdelivr.net/npm/@riversun/sortable-table/lib/sortable-table.js"></script>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
29
Help us understand the problem. What are the problem?