ReactでTanStack Tableを使い、並べ替えのできる表を作る方法

npm install @tanstack/react-table

export type Cat = { name: string; age: number; weight: number; memo: string };

export const cats: Cat[] = [
  { name: 'たま', age: 3, weight: 4.2, memo: '窓辺が好き' },
  { name: 'ミケ', age: 5, weight: 3.8, memo: '人見知り' },
  { name: 'そら', age: 3, weight: 5.1, memo: 'よく食べる' },
  { name: 'クロ', age: 8, weight: 4.6, memo: '夜に元気' },
  { name: 'あずき', age: 5, weight: 3.5, memo: '箱に入る' },
  { name: 'ハチ', age: 1, weight: 2.9, memo: 'まだ子ねこ' },
];

import { createColumnHelper } from '@tanstack/react-table';
import type { Cat } from './cats';

const columnHelper = createColumnHelper<Cat>();

// 列の定義（コンポーネントの外に置き、毎回の描画で作り直さない）
export const columns = [
  columnHelper.accessor('name', { header: '名前' }),
  columnHelper.accessor('age', { header: '年齢' }),
  columnHelper.accessor('weight', { header: '体重（kg）' }),
  columnHelper.accessor('memo', { header: 'ひとこと', enableSorting: false }),
];

import { useState } from 'react';
import {
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
  type ColumnDef,
  type SortingState,
} from '@tanstack/react-table';
import { cats, type Cat } from './cats';

const arrows = { asc: ' ▲', desc: ' ▼' };
const ariaSort = { asc: 'ascending', desc: 'descending' } as const;

// 見出しをクリックすると並べ替わる表
export function CatTable({ columns }: { columns: ColumnDef<Cat, any>[] }) {
  const [sorting, setSorting] = useState<SortingState>([]);

  const table = useReactTable({
    data: cats,
    columns,
    state: { sorting },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });

  return (
    <>
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => {
                const sorted = header.column.getIsSorted();
                const label = flexRender(header.column.columnDef.header, header.getContext());
                // aria-sort は、いちばん優先される1列にだけ付ける
                const isFirst = sorted && header.column.getSortIndex() === 0;
                return (
                  <th key={header.id} aria-sort={isFirst ? ariaSort[sorted] : undefined}>
                    {header.column.getCanSort() ? (
                      <button type="button" onClick={header.column.getToggleSortingHandler()}>
                        {label}
                        {sorted ? arrows[sorted] : null}
                        {sorted && sorting.length > 1 ? header.column.getSortIndex() + 1 : null}
                      </button>
                    ) : (
                      label
                    )}
                  </th>
                );
              })}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <pre id="state">{JSON.stringify(sorting)}</pre>
    </>
  );
}

 1回目
  sorting: [{"id":"name","desc":false}]
  行: あずき 5 3.5 / そら 3 5.1 / たま 3 4.2 / クロ 8 4.6 / ハチ 1 2.9 / ミケ 5 3.8
 2回目
  sorting: [{"id":"name","desc":true}]
  行: ミケ 5 3.8 / ハチ 1 2.9 / クロ 8 4.6 / たま 3 4.2 / そら 3 5.1 / あずき 5 3.5
 3回目
  sorting: []
  行: たま 3 4.2 / ミケ 5 3.8 / そら 3 5.1 / クロ 8 4.6 / あずき 5 3.5 / ハチ 1 2.9

 1回目
  sorting: [{"id":"age","desc":true}]
  行: クロ 8 4.6 / ミケ 5 3.8 / あずき 5 3.5 / たま 3 4.2 / そら 3 5.1 / ハチ 1 2.9

  sorting: [{"id":"age","desc":false},{"id":"weight","desc":true}]
  行: ハチ 1 2.9 / そら 3 5.1 / たま 3 4.2 / ミケ 5 3.8 / あずき 5 3.5 / クロ 8 4.6

# 続けて、Shift なしで「体重」をクリック
  sorting: [{"id":"age","desc":false},{"id":"weight","desc":false}]
# 続けて、Shift なしで「年齢」をクリック
  sorting: [{"id":"age","desc":false}]

  フォーカス: 名前
  Enter の後: [{"id":"name","desc":false}]
  Space の後: [{"id":"name","desc":true}]

  見出し: 名前[aria-sort=なし] | 年齢 ▲1[aria-sort=ascending] | 体重（kg） ▼2[aria-sort=なし] | ひとこと[aria-sort=なし]

import { type SortingFn } from '@tanstack/react-table';

// 名前を、日本語の辞書順（ひらがなとカタカナを区別しない並び）で比べる
const collator = new Intl.Collator('ja');
const byJapaneseName: SortingFn<Cat> = (rowA, rowB, columnId) =>
  collator.compare(rowA.getValue<string>(columnId), rowB.getValue<string>(columnId));

export const columnsJa = [
  columnHelper.accessor('name', { header: '名前', sortingFn: byJapaneseName }),
  ...columns.slice(1),
];

  行: あずき 5 3.5 / クロ 8 4.6 / そら 3 5.1 / たま 3 4.2 / ハチ 1 2.9 / ミケ 5 3.8

行の数 10、sortingFn 指定なし: 使われた比べ方 = basic
  昇順: cat1, cat10, cat2, cat3, cat4, cat5, cat6, cat7, cat8, cat9
行の数 11、sortingFn 指定なし: 使われた比べ方 = alphanumeric
  昇順: cat1, cat2, cat3, cat4, cat5, cat6, cat7, cat8, cat9, cat10, cat11
行の数 10、sortingFn alphanumeric: 使われた比べ方 = alphanumeric
  昇順: cat1, cat2, cat3, cat4, cat5, cat6, cat7, cat8, cat9, cat10