React Table v8 で row ごとに表示／非表示を変えるフラグを表示するセルを作る

hchaki

2023.5.17

学びの共有

こんにちはフロントエンドエンジニアの茶木です。
React Table v8 で列ごとにフラグを表示（非表示）するセルを作ります。

🚩 を表示するセルですね。

シンプルな方法

Forum（掲示板一覧）テーブルを想定しています。

flag という bool値を row にもたせてフラグの出し分けをするというものです。

const columnHelper = createColumnHelper<Forum>();

const columns = [
  columnHelper.accessor("flag", {
    header: "フラグ数",
    cell: FlagCell,
  }),
  columnHelper.accessor("unread", {
    header: "未読数",
  }),
  columnHelper.accessor("timestamp", {
    header: "更新日",
    cell: DateCell,
  }),
  columnHelper.accessor("title", {
    header: "タイトル",
  }),
  columnHelper.accessor("important", {
    header: "重要",
  }),
];

const table = useReactTable<Forum>({
  data: rows,
  columns,
  getCoreRowModel: getCoreRowModel(),
});

useReactTable からテーブルを生成する方法は【React Table v7 → v8】【TypeScript 】アップデートの勘所も参照ください。今回注目するのは、FlagCell です。

type Props = CellContext<Folum, boolean>
export const FlagCell = (props: Props): ReactElement => {
  return <Cell>{props.getValue() ? "🚩" : " " }</Cell>;
};

props.getValue() から accessor で指定した key の値（ flag ）が取得でき、これによりフラグの出し分けをしています。

他のセルの値を参照する方法

flag という bool値を row にもたせず、他の値を参照して行うとします。

const columnHelper = createColumnHelper<Forum>();
const columns = [
  {
    header: "フラグ数",
    cell: FlagCell,
  },
  columnHelper.accessor("unread", {
    header: "未読数",
  }),
  // :
  // 省略
  // :
  columnHelper.accessor("important", {
    header: "重要",
  }),
];

FlagCell は他のセルの値を参照して表示を行うので、 accessor でキーを指定する必要がないため、 columnHelper も不要です。

ここでは未読数( unread ) と重要( important )の値を参照して、フラグの有無を判断します。

type Props = CellContext<Folum, undefined>
export const FlagCell = (props: Props): ReactElement => {
  const { unread, important } = props.row.origin;
  const flag = unread > 0 && important;
  return <Cell>{ flag ? "🚩" : " " }</Cell>;
};

props.row.origin から対象の row の値すべてにアクセスできます。

ここでは、未読件数が1つ以上かつ重要であるものにフラグを設定しています。