TanStack React Table デフォルト列表示使用時の便利なTips

TanStack Table (旧React Table) は非常に強力で柔軟なReactテーブルライブラリですが、使用する際にいくつかのTipsを知っておくと便利です。
今回はcolumn visibilityの設定に関する3つのポイントを紹介します。

デフォルトの列表示設定

columnVisibilityの初期状態は、useStateを定義する際に同時に設定できます。

const [columnVisibility, setColumnVisibility] = useState({
  id: true,
  name: true,
  age: false, // ageカラムはデフォルトで非表示
});

const table = useReactTable({
  // ...
  state: {
    columnVisibility,
  },
  onColumnVisibilityChange: setColumnVisibility,
});

この方法で、テーブルの初期表示時に特定のカラムを非表示にすることができます[6]。

カラム表示切替プルダウンの注意点

columnVisibilityのプルダウンメニューの項目には、通常カラムのヘッダーが使用されます。
しかし、ヘッダーにソート機能を追加したり、カスタムコンポーネントを使用している場合、そのまま項目として表示されてしまい、使いづらくなる可能性があります。

metaフィールドを使用した対応

この問題に対処するため、ColumnDefのmetaフィールドを活用できます。
metaフィールドに表示用のラベルを追加することで、プルダウンメニューに適切な項目名を表示させることができます。

const columns: ColumnDef<YourDataType>[] = [
  {
    accessorKey: 'name',
    header: () => <SortableHeader>Name</SortableHeader>,
    meta: {
      label: 'Name' // プルダウンメニューに表示されるラベル
    }
  },
  // 他のカラム定義...
];

TypeScriptでのmeta定義

TypeScriptを使用している場合、追加したmetaフィールドの型を定義する必要があります。
これは通常、プロジェクトのどこかに以下のような型定義ファイルを作成することで対応できます:

// types/react-table-config.d.ts
import '@tanstack/react-table'

declare module '@tanstack/table-core' {
  interface ColumnMeta<TData extends RowData, TValue> {
    label?: string
  }
}

以上のTipsを活用することで、TanStack React Tableをより効果的に使用できるでしょう。
カラムの表示/非表示の制御が簡単になり、ユーザーにとって使いやすいインターフェースを提供することができます。