DataTable

TanStack Table のレンダリングシェル。テーブルインスタンスを受け取り、Table Elements で描画する。

いつ使うか

TanStack Table でデータテーブルを構築するときに使用する
ソート、フィルタ、ページネーション、行選択などのインタラクティブ機能が必要なテーブルに使用する

いつ使わないか

静的なデータ表示のみの場合は Table Elements を直接使用する
テーブル以外のデータ表示（カードリスト、ツリービュー等）には使わない

Usage

import type { ColumnDef } from '@tanstack/react-table';
import {
  createColumnHelper,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table';

import { DataTable } from '@bi-shop-it/ui/data-table';

type User = {
  email: string;
  name: string;
};

const columnHelper = createColumnHelper<User>();

const columns: ColumnDef<User, string>[] = [
  columnHelper.accessor('name', { header: '名前' }),
  columnHelper.accessor('email', { header: 'メールアドレス' }),
];

const MyComponent = () => {
  const table = useReactTable({
    columns,
    data: users,
    getCoreRowModel: getCoreRowModel(),
  });

  return <DataTable table={table} />;
};

Props

DataTable

Prop	型	デフォルト	説明
`table`	`Table<TData>`	—	TanStack Table のテーブルインスタンス
`emptyState`	`ReactNode`	—	データが0件の場合に表示するコンテンツ。省略時はデフォルトテキスト

状態

デフォルト

TanStack Table インスタンスを渡してデータを描画する基本パターン。

名前	メールアドレス	部署	役割
田中太郎	[email protected]	開発部	エンジニア
佐藤花子	[email protected]	デザイン部	デザイナー
鈴木一郎	[email protected]	開発部	エンジニア
山田次郎	[email protected]	営業部	マネージャー
高橋美咲	[email protected]	デザイン部	デザイナー

const columnHelper = createColumnHelper<Employee>();

const columns: ColumnDef<Employee, string>[] = [
  columnHelper.accessor('name', { header: '名前' }),
  columnHelper.accessor('email', { header: 'メールアドレス' }),
  columnHelper.accessor('department', { header: '部署' }),
  columnHelper.accessor('role', { header: '役割' }),
];

const MyComponent = () => {
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
  });

  return <DataTable table={table} />;
};

空の状態

emptyState に EmptyState コンポーネント等を渡すことで、空の状態を自由にカスタマイズできる。

名前	メールアドレス	部署	役割
該当するデータがありません条件を変更して再度お試しください。

import { EmptyState } from '@bi-shop-it/ui/empty-state';

const table = useReactTable({
  columns,
  data: [],
  getCoreRowModel: getCoreRowModel(),
});

<DataTable
  emptyState={
    <EmptyState
      description="条件を変更して再度お試しください。"
      icon="Search"
      title="該当するデータがありません"
    />
  }
  table={table}
/>;