LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

お題は不問！Qiita Engineer Festa 2024で記事投稿！
Qiita Engineer Festa20242024年7月17日まで開催中！
@yaskitie

TanStack Table によるソートの実装と CSS-in-JS への組み込み

Last updated at Posted at 2024-07-07

はじめに

React アプリケーションにおいてテーブルの UI を作成したいというのはよくあると思うが、3rd パーティ製ライブラリを利用するのか、自分でゴリゴリ書くのか、迷いポイントである。というのも、前者の場合は too much であったりするし、かといって自分で書くのもめんどくさい。
そういうことを考えながら途方に暮れていたとき、TanStack Table というものを見つけ、上記の課題を解決してくれそうだったので使ってみることにした。

探していたもの

テーブルを構築する上で、「スタイルを強制されない」というのが条件であった。例えば、自分で css をゴリゴリ書いてスタイリングをしている画面に対して、「そこまできめ細かなスタイルをカスタマイズできない MUI ベースのテーブルライブラリ」みたいなものを導入するとそこだけ浮いてしまう。
そのため、ヘッドレス UI のアーキテクチャを採用している本ライブラリは、非常に相性が良かった。

この記事で検証したこと

基本的なテーブルを表示させることに加え、ソート機能の実装を行なった。
また前述のように、自由にスタイルできる環境にテーブルコンポーネントを導入した。
具体的には、TanStack Table で構築されたテーブルに CSS-in-JS ライブラリ (linaria) でスタイリングを行なった。

環境・前提

- react: 18.3.1
- next: 14.2.3
- linaria 関係:
	- @linaria/core: 6.2.0
	- @linaria/react: 6.2.1
	- @linaria/babel-preset: 5.0.4

※Next.js および linaria はインストール・設定済みとする。

linaria については、以下の記事をご参考まで。

作業

参考文献

設定して行くにあたり、TanStack 側の必要な情報 (実装上のガイド、API 仕様、使用例 etc) はここに全てある。
https://tanstack.com/table/latest/docs/introduction

特に、使用例はとりあえずすぐ画面に出していじりながら修正を加えて行くのには最適な情報だ。
e.g. https://tanstack.com/table/v8/docs/framework/react/examples/basic

インストール

# install package
npm install @tanstack/react-table

# package version installed
npm list @tanstack/react-table
## @tanstack/react-table@8.17.3

ダミーデータ

テーブルに表示するデータを以下のように用意した。

types/twice.ts
import type { TTwice } from 'types/twice';

export const dummyData: TTwice[] = [
  {
    name: 'Nayeon',
    age: 28,
    birthday: new Date('September 22, 1995'),
    birthplace: 'Seoul',
  },
  {
    name: 'Jeongyeon',
    age: 27,
    birthday: new Date('1 November 1996'),
    birthplace: 'Gyeonggi-do',
  },
  {
    name: 'Momo',
    age: 27,
    birthday: new Date('November 9, 1996'),
    birthplace: 'Kyoto',
  },
  {
    name: 'Sana',
    age: 27,
    birthday: new Date('December 29, 1996'),
    birthplace: 'Osaka',
  },
  {
    name: 'Jihyo',
    age: 27,
    birthday: new Date('February 1, 1997'),
    birthplace: 'Gyeonggi-do',
  },
  {
    name: 'Mina',
    age: 27,
    birthday: new Date('March 24, 1997'),
    birthplace: 'Hyogo',
  },
  {
    name: 'Dahyun',
    age: 26,
    birthday: new Date('May 28, 1998'),
    birthplace: 'Gyeonggi-do',
  },
  {
    name: 'Chaeyoung',
    age: 25,
    birthday: new Date('April 23, 1999'),
    birthplace: 'Seoul',
  },
  {
    name: 'Tzuyu',
    age: 25,
    birthday: new Date('June 14, 1999'),
    birthplace: 'Tainan',
  },
];

データの型定義は以下の通り。

types/data.ts
const birthplaces = [
  'Seoul',
  'Gyeonggi-do',
  'Kyoto',
  'Osaka',
  'Hyogo',
  'Tainan',
] as const;
type TBirthplace = (typeof birthplaces)[number];

export type TTwice = {
  name: string;
  age: number;
  birthday: Date;
  birthplace: TBirthplace;
};

基本的なテーブル

まずは、テーブルを表示するだけのコンポーネントを作成する。

TwiceTable.tsx
'use client';

import type { ColumnDef } from '@tanstack/react-table';
import type { TTwice } from 'types/twice';
import {
  flexRender,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table';
import { useMemo, useState } from 'react';
import React from 'react';
import { dummyData } from 'types/data';

export const TwiceTable = () => {
  const columns = useMemo<ColumnDef<TTwice>[]>(
    () => [
      {
        accessorKey: 'name',
        header: () => <span>NAME</span>,
        cell: (info) => info.getValue(),
      },
      {
        accessorKey: 'age',
        header: () => <span>AGE</span>,
        cell: (info) => info.getValue(),
      },
      {
        accessorKey: 'birthday',
        header: () => <span>BIRTHDAY</span>,
        cell: (info) =>
          String(info.getValue()).split(' ').slice(0, 4).join(' '),
      },
      {
        accessorKey: 'birthplace',
        header: () => <span>BIRTHPLACE</span>,
        cell: (info) => info.getValue(),
      },
    ],
    [],
  );

  const [data, _setData] = useState(dummyData);

  const table = useReactTable({
    data,
    columns,
    columnResizeMode: 'onChange',
    getCoreRowModel: getCoreRowModel(),
    defaultColumn: {
      size: 400,
    },
  });

  return (
    <>
      <span style={{ fontSize: '1.2rem' }}>TWICE MEMBER</span>
	<table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id}>
                  {header.isPlaceholder ? null : (
                    <div>
                      {flexRender(
                        header.column.columnDef.header,
                        header.getContext(),
                      )}
                    </div>
                  )}
                </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>
        <tfoot>
          {table.getFooterGroups().map((footerGroup) => (
            <tr key={footerGroup.id}>
              {footerGroup.headers.map((header) => (
                <th key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.footer,
                        header.getContext(),
                      )}
                </th>
              ))}
            </tr>
          ))}
        </tfoot>
      </table>
    </>
  );
};

見た目は、なんてことないこんな感じ。

スクリーンショット 2024-07-08 2.24.54.png

ポイント解説

  • columns では、accessorKey でどのデータに対応するのかを設定し、各カラムのヘッダーとセルに表示する内容を調整する
  • useReactTable フックにより、テーブルコンポーネントに流す state を構成する
  • return 以下で、table 情報を元にレンダリングする

データのソート

では、ここにデータをソートする機能を入れてみる。

変更点は以下の通り。

TwiceTable.tsx
'use client';

- import type { ColumnDef } from '@tanstack/react-table';
+ import type { ColumnDef, SortingFn, SortingState } from '@tanstack/react-table';
import type { TTwice } from '@/types/log';
import {
  flexRender,
  getCoreRowModel,
+ getSortedRowModel,
  useReactTable,
} from '@tanstack/react-table';
import { useMemo, useState } from 'react';
import React from 'react';
import { dummyData } from '@/types/data';

export const Log = () => {
+ const sortBirthplaceFn: SortingFn<TTwice> = (rowA, rowB, _columnId) => {
+   const statusA = rowA.original.birthplace;
+   const statusB = rowB.original.birthplace;
+   const order = ['Seoul', 'Gyeonggi-do', 'Kyoto', 'Osaka', 'Hyogo', 'Tainan'];
+   return order.indexOf(statusA) - order.indexOf(statusB);
+ };
  const columns = useMemo<ColumnDef<TTwice>[]>(
    () => [
      {
        accessorKey: 'name',
        header: () => <span>NAME</span>,
        cell: (info) => info.getValue(),
      },
      {
        accessorKey: 'age',
        header: () => <span>AGE</span>,
        cell: (info) => info.getValue(),
      },
      {
        accessorKey: 'birthday',
        header: () => <span>BIRTHDAY</span>,
        cell: (info) =>
          String(info.getValue()).split(' ').slice(0, 4).join(' '),
      },
      {
        accessorKey: 'birthplace',
        header: () => <span>BIRTHPLACE</span>,
        cell: (info) => info.getValue(),
+       sortingFn: sortBirthplaceFn,
      },
    ],
    [],
  );

  const [data, _setData] = useState(dummyData);

+ const [sorting, setSorting] = useState<SortingState>([]);
  const table = useReactTable({
    data,
    columns,
    columnResizeMode: 'onChange',
    getCoreRowModel: getCoreRowModel(),
    defaultColumn: {
      size: 400,
    },
+   getSortedRowModel: getSortedRowModel(),
+   onSortingChange: setSorting,
+   state: {
+     sorting,
+   },
  });

  return (
    <>
      <span style={{ fontSize: '1.2rem' }}>TWICE MEMBER</span>
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id}>
                  {header.isPlaceholder ? null : (
                    <div
+                     className={
+                       header.column.getCanSort()
+                         ? 'cursor-pointer select-none'
+                         : ''
+                     }
+                     onClick={header.column.getToggleSortingHandler()}
                    >
                      {flexRender(
                        header.column.columnDef.header,
                        header.getContext(),
                      )}
+                     {{
+                       asc: ' ↑',
+                       desc: ' ↓',
+                       false: sorting.length > 0 ? '' : ' ↑↓',
+                     }[header.column.getIsSorted() as string] ?? null}
                    </div>
                  )}
                </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>
        <tfoot>
          {table.getFooterGroups().map((footerGroup) => (
            <tr key={footerGroup.id}>
              {footerGroup.headers.map((header) => (
                <th key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.footer,
                        header.getContext(),
                      )}
                </th>
              ))}
            </tr>
          ))}
        </tfoot>
      </table>
    </>
  );
};

実行結果はこのような感じ。

画面収録 2024-07-08 2.49.23.gif

ポイント解説

  • ソートアルゴリズムは、columns > sortingFn で指定する
    • データが文字列(NAME)、数字(AGE) および Date 型(BIRTHDAY)の場合はデフォルトで asc/desc できる
    • カスタムソートロジックを簡単に組める
      • 例では、sortBirthplaceFn というカスタムロジックの中で、「birthplace の順番が ['Seoul', 'Gyeonggi-do', 'Kyoto', 'Osaka', 'Hyogo', 'Tainan']」となるようにしている
    • ソート中かどうかの状態を sorting で管理しており、ソート内容に応じたレンダリングを行う

Linaria との組み合わせでコンポーネントをリファインする

Css-in-JS によるコンポーネントを作成し、それを元のコンポーネントから呼び出す。

components/Table.tsx
import { styled } from '@linaria/react';

type RGB = `rgb(${number}, ${number}, ${number})`;
type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
type HEX = `#${string}`;
type NAME = `${string}`;

export type TColor = RGB | RGBA | HEX | NAME;

interface ITable {
  baseBackgroundColor?: TColor;
  headerBackgroundColor?: TColor;
  borderColor?: TColor;
  radius?: number;
  headerHeight?: number;
  rowHeight?: number;
}

export const Table = styled.table<ITable>`
  background-color: ${(p) => p.baseBackgroundColor ?? '#ffffff'};
  border: 1px solid ${(p) => p.borderColor ?? '#cccccc'};
  border-radius: ${(p) => p.radius ?? 8}px;
  border-spacing: 0;
  > thead {
    background-color: ${(p) => p.headerBackgroundColor ?? '#f4f4f4'};
    > tr > th {
      border-bottom: 1px solid ${(p) => p.borderColor ?? '#cccccc'};
      font-weight: 400;
      height: ${(p) => p.headerHeight ?? 40}px;
      padding: 1px 8px;
      text-align: left;
    }
    > tr {
      > th:nth-of-type(1) {
        border-radius: ${(p) => p.radius ?? 8}px 0 0;
        width: calc(var(--header-1-size) * 1px);
      }
      > th:nth-of-type(2) {
        width: calc(var(--header-2-size) * 1px);
      }
      > th:nth-of-type(3) {
        width: calc(var(--header-3-size) * 1px);
      }
      > th:nth-of-type(4) {
        border-radius: 0 ${(p) => p.radius ?? 8}px 0 0;
        width: calc(var(--header-4-size) * 1px);
      }
    }
  }
  > tbody {
    > tr {
      /* row height */
      height: ${(p) => p.rowHeight ?? 32}px;
      > td {
        padding: 1px 8px;
      }
    }
    > tr:not(:last-child) > td {
      border-bottom: 1px solid ${(p) => p.borderColor ?? '#cccccc'};
    }
  }
`;
TwiceTable.tsx
+ import { Table } from '@/components/common/Table';
  ...

+ const columnSizeVars = useMemo(() => {
+   const headers = table.getFlatHeaders();
+   const colSizes: { [key: string]: number } = {};
+   for (let i = 0; i < headers.length; i++) {
+     const header = headers[i]!;
+     colSizes[`--header-${i + 1}-size`] = header.getSize();
+     colSizes[`--col-${i + 1}-size`] = header.column.getSize();
+   }
+   return colSizes;
+ }, [table.getState().columnSizingInfo, table.getState().columnSizing]);

  return (
    <>
      <span style={{ fontSize: '1.2rem' }}>TWICE MEMBER</span>
-     <table>
+     <Table style={{ ...columnSizeVars }}>
+       headerBackgroundColor="LightSalmon"
+       baseBackgroundColor="pink"
+       borderColor="tomato"
+     >
        <thead>
        ...

スクリーンショット 2024-07-08 10.02.52.png

ポイント解説

  • <Table> コンポーネントは、React ビルトインの <table> を拡張し、その配下の要素についてスタイル情報を上書きする
    • columnSizeVars は、各カラムのサイズを CSS カスタムプロパティとして持つようにし、それを <Table> に渡すことで使用できるようにしている(e.g. --header-1-size など)
    • <Table> には引数を設定して、外部から情報を注入することも可能(例では、ITable で定義した ６ つのプロパティのうち、3 つを引数で与えている)
  • スタイリングとデータ・ロジックを分離することで管理しやすくする
    • 仮に Css-in-JS として切り出したスタイリングを元のコンポーネントのレンダリング部分に入れ込むと、ロジックとスタイルの記述が混在し、可視性やメンテナンス性が低下してしまう

終わりに

TanStack Table を利用することで、基本的なテーブル構築、ソート機能の実装、そして CSS-in-JS ライブラリとのコラボでいい感じにテーブルを設計することができた。
実装例を見るだけでなんとなく使い方がわかるのがとても良い体験だと思った。　説明書がなくても使い始められ、必要に応じて詳しく確認する、というのはとても今風だ。
TanStack の他のライブラリも気になるので、折に触れて試していきたい。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?