【React Table】セルの装飾と加工を TypeScript で記述する

hchaki

2022.12.14

実践と知見

こんにちはフロントエンドエンジニアの茶木です。
最近は学習用の Next.js のローカルの SandBox を育てています。

APIとReact Table の連携を TypeScript で型付けしながら書いていく

前回記事で、React Table の基本について TypeScript で書きました。今回はセルの表示の加工や装飾について書いていきます。

セルの加工

まず、更新日を例に話をします。

前回記事に則った呼び出し側です

const columns = [
  {
    Header: "id",
    accessor: "id" as const,
  },
  {
    Header: "更新日",
    accessor: "updatedTimestamp" as const,
  },
];

export default function Members() {
  const data = useMembers();
  if( !data ) return <p>Loading...</p>
  return <Table<MembersResult> rows={data.rows} columns={columns} />
};

更新日などの timestamp を UNIX時間で記録しDBから取得するとき、年月日や時間に変換するフォーマットはフロントエンドで行うのは一般的かと思います。

現状は Cell の値をそのまま表示しているので、UNIX時間が表示されています。これを年月日に変換します。

  {
    Header: "更新日",
    accessor: "updatedTimestamp" as const,
    Cell: DateCell,
  },

columns の Header: "更新日" の項目に Cell: DateCell を設定します。
DateCell は自作のコンポーネントです。

import { format } from "date-fns";
import { ReactElement } from "react";
import { CellProps } from "react-table";

import { BaseRow } from "../../../difinitions/table";

type Props<T extends BaseRow> = CellProps<T, number>;

export const DateCell = <T extends BaseRow>({
  value,
}: Props<T>): ReactElement => {
  return <>{format(new Date(value), "yyyy-MM-dd")}</>;
};

props のメンバーには様々な値が含まれますが、今回解説するのは value と row です。そして今回使用するのは value だけです。

value: セルで表示される値（columnsのCellを指定しない場合に生の状態で表示される値）
row: このセルを含む行。他のセルの値を参照するケースで使用できる。

今回はこの value を年月日に変換して表示します。

CellProps

Typescript の解説です

CellProps は react-table から提供される Cellの props を規定するためのものです。

type Props<T extends BaseRow> = CellProps<T, number>;

CellProps<Row, T> の形式で指定し、row の型は ROW, value の型は T とみなされます。

export type BaseRow = {
  id: string;
} & Record<string, unknown>;

また、CellProps に渡している <T extends BaseRow> の BaseRow は前回記事で定義したTable の共通部分です。

セルの装飾

装飾についても少し触れておきます。スタイリングの方法は様々ですが何を選択しても value を ReactElement で囲む形で行うことになると思います。

今回は、MUI でスタイルを付与しています。行ごとに違ったスタイルをあてることもできます。今回は更新日時のうち、直近の更新のあったもの（本日の日付のもの）を赤色にしてみています。

import { format, isToday } from "date-fns";
import { ReactElement } from "react";
import { styled } from "@mui/material/styles";
import { CellProps } from "react-table";

import { BaseRow } from "../../../difinitions/table";

const Cell = styled("div")({
  fontWeight: "bold",
});

type Props<T extends BaseRow> = CellProps<T, number>;

export const DateCell = <T extends BaseRow>({
  value,
}: Props<T>): ReactElement => {
  const date = new Date(value);
  return (
    <Cell sx={{ color: isToday(date) ? "red" : undefined }}>
      {format(date, "yyyy-MM-dd")}
    </Cell>
  );
};