Table

Tableは、列のソートや行の選択やクリックイベント機能を備えたテーブルのコンポーネントです。

インポート

pnpm add @yamada-ui/table

Copied!

@yamada-ui/tableは、@yamada-ui/reactに含まれていないため、別途インストールする必要があります。

import { Table } from "@yamada-ui/table"

Copied!

使い方

テーブルを構成するためにcolumnsとdataを設定します。

Tableは、内部的に@tanstack/react-tableを使用しています。

columns: ColumnDefと以下のプロパティがオブジェクトに設定できます。そのオブジェクトは1列になり、配列に列(オブジェクト)分を設定します。
- className: ThのclassNameです。
- style: Thのstyleオブジェクトです。
- sx: Thのsxオブジェクトです。
- css: ThのStyled Propsが使用できるオブジェクトです。
data: columnsで設定したaccessorKeyやaccessorFnの値をキーとしてセルの値をオブジェクトに設定します。そのオブジェクトは1行になり、配列に行(オブジェクト)分を設定します。

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

Copied!

columnsとdataは、メモ化することをオススメします。不要なレンダリングを抑制できます。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return <Table columns={columns} data={data} />

Copied!

バリアントを変更する

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <VStack>
    <Table variant="simple" columns={columns} data={data} />
    <Table variant="striped" columns={columns} data={data} />
  </VStack>
)

Copied!

サイズを変更する

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <VStack>
    <Table size="sm" columns={columns} data={data} />
    <Table size="md" columns={columns} data={data} />
    <Table size="lg" columns={columns} data={data} />
    <Table size="xl" columns={columns} data={data} />
  </VStack>
)

Copied!

カラースキームを変更する

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <VStack>
    <Table
      variant="striped"
      colorScheme="secondary"
      columns={columns}
      data={data}
    />
    <Table
      variant="striped"
      colorScheme="green"
      columns={columns}
      data={data}
    />
  </VStack>
)

Copied!

列の区切り線を追加する

列の区切り線を追加する場合は、withColumnBordersをtrueに設定します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return <Table columns={columns} data={data} withColumnBorders />

Copied!

外枠の区切り線を追加する

外枠の区切り線を追加する場合は、withBorderをtrueに設定します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return <Table columns={columns} data={data} withBorder />

Copied!

行がホバーされたときにハイライトする

行がホバーされたときにハイライトする場合は、highlightOnHoverをtrueに設定します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return <Table columns={columns} data={data} highlightOnHover />

Copied!

フッターを表示する

フッターを表示する場合は、withFooterをtrueに設定します。もし、ヘッダー同様にフッターにもチェックボックスを表示したい場合はwithFooterSelectをtrueに設定します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
      footer: "作品名",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
      footer: "放送期間",
    },
    {
      header: "話数",
      accessorKey: "episode",
      footer: "話数",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <VStack>
    <Table columns={columns} data={data} withFooter />
    <Table columns={columns} data={data} withFooter withFooterSelect />
  </VStack>
)

Copied!

デフォルトのソートを設定する

デフォルトのソートを設定するには、defaultSortにidとdescを設定します。

id: columnsで設定したid, accessorKey, accessorFnの値です。
desc: 昇順はfalse、降順はtrueを設定します。

ソートイベントをハンドルしたい場合は、onChangeSortを使用します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <Table
    columns={columns}
    data={data}
    defaultSort={[{ id: "name", desc: false }]}
    onChangeSort={(sort) => {
      console.log("sort", sort)
    }}
  />
)

Copied!

手動のソートを使う

手動のソートを使う場合は、manualSortingをtrueに設定します。これは、サーバー側で並び替えを行う場合に便利です。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <Table
    columns={columns}
    data={data}
    manualSorting
    onChangeSort={(sort) => {
      console.log("sort", sort)
    }}
  />
)

Copied!

複数ソートの最大数を制限する

デフォルトでは、複数ソートは有効です。もし、複数ソートの選択の最大数を制限したい場合は、maxMultiSortColCountに数値を設定します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <Table
    columns={columns}
    data={data}
    maxMultiSortColCount={2}
    onChangeSort={(sort) => {
      console.log("sort", sort)
    }}
  />
)

Copied!

昇順と降順の切り替わりを変更する

デフォルトでは、ソートが有効になったとき、昇順から始まります。もし、降順から始めたい場合は、sortDescFirstをtrueに設定するか、特定の列だけ適応したい場合は、columns内の列(オブジェクト)にsortDescFirstをtrueに設定します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
      sortDescFirst: true,
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <VStack>
    <Table
      columns={columns}
      data={data}
      sortDescFirst
      onChangeSort={(sort) => {
        console.log("sort", sort)
      }}
    />

    <Table
      columns={columns}
      data={data}
      onChangeSort={(sort) => {
        console.log("sort", sort)
      }}
    />
  </VStack>
)

Copied!

ソートを無効にする

ソートを無効にする場合は、enableSortingをfalseに設定するか、特定の列だけ無効にしたい場合は、columns内の列(オブジェクト)にenableSortingをfalseに設定します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
      enableSorting: false,
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <VStack>
    <Table columns={columns} data={data} enableSorting={false} />

    <Table
      columns={columns}
      data={data}
      onChangeSort={(sort) => {
        console.log("sort", sort)
      }}
    />
  </VStack>
)

Copied!

複数ソートを無効にする

複数ソートを無効にする場合は、enableMultiSortをfalseに設定します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <Table
    columns={columns}
    data={data}
    enableMultiSort={false}
    onChangeSort={(sort) => {
      console.log("sort", sort)
    }}
  />
)

Copied!

行のIDを指定する

デフォルトの行のIDは、indexの文字列です。1行目であれば、"0"になります。特定の列の値をIDとしたい場合は、rowIdにcolumns内の列(オブジェクト)に設定されているaccessorKeyまたはaccessorFnの値を設定します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return <Table columns={columns} data={data} rowId="name" />

Copied!

デフォルトの選択された行を設定する

デフォルトの選択された行を設定する場合は、defaultSelectedRowIdsに行のIDを配列で設定します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <Table
    columns={columns}
    data={data}
    rowId="name"
    defaultSelectedRowIds={["ドラゴンボール"]}
    onChangeSelect={(selectedIds) => {
      console.log("selectedIds", selectedIds)
    }}
  />
)

Copied!

特定の行の選択を無効にする

特定の行の選択を無効にする場合は、defaultSelectedRowIdsに行のIDを配列で設定します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <Table
    columns={columns}
    data={data}
    rowId="name"
    disabledRowIds={["ドラゴンボールZ"]}
    onChangeSelect={(selectedIds) => {
      console.log("selectedIds", selectedIds)
    }}
  />
)

Copied!

行のクリックで選択できるようにする

行のクリックで選択できるようにする場合は、rowsClickSelectをtrueに設定します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <Table
    columns={columns}
    data={data}
    rowId="name"
    rowsClickSelect
    onChangeSelect={(selectedIds) => {
      console.log("selectedIds", selectedIds)
    }}
  />
)

Copied!

行の選択を無効にする

行の選択を無効にする場合は、enableRowSelectionをfalseに設定します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return <Table columns={columns} data={data} enableRowSelection={false} />

Copied!

行のクリックイベントをハンドルする

行のクリックイベントをハンドルしたい場合は、onClickRowを使用します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <Table
    columns={columns}
    data={data}
    onClickRow={(row) => {
      console.log("row", row)
    }}
  />
)

Copied!

行のダブルクリックイベントをハンドルする

行のダブルクリックイベントをハンドルしたい場合は、onDoubleClickRowを使用します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <Table
    columns={columns}
    data={data}
    onDoubleClickRow={(row) => {
      console.log("row", row)
    }}
  />
)

Copied!

チェックボックス(列)のスタイリングをカスタマイズする

チェックボックス(列)のスタイリングをカスタマイズする場合は、checkboxPropsやselectColumnPropsにpropsを設定します。

checkboxProps: チェックボックスのpropsを設定できます。
selectColumnProps: チェックボックスの列のpropsが設定できます。falseにした場合、行の選択はできますが、チェックボックスの列は非表示になります。

編集可能な例

const [selectedRowIds, onChangeSelect] = useState<string[]>([])

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <VStack>
    <Table
      columns={columns}
      data={data}
      checkboxProps={{ colorScheme: "red" }}
    />
    <Table
      columns={columns}
      data={data}
      selectColumnProps={{ css: { w: "40px" } }}
    />

    <Text>Select ids {selectedRowIds.join(", ")}</Text>

    <Table
      columns={columns}
      data={data}
      selectColumnProps={false}
      rowsClickSelect
      selectedRowIds={selectedRowIds}
      onChangeSelect={onChangeSelect}
    />
  </VStack>
)

Copied!

ヘッダー(`Th`)のスタイリングをカスタマイズする

ヘッダー(Th)のスタイリングをカスタマイズする場合は、css, sx, styleでスタイリングすることができます。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
      css: { color: "primary" },
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
      sx: { color: "secondary" },
    },
    {
      header: "話数",
      accessorKey: "episode",
      style: { color: "red" },
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return <Table columns={columns} data={data} />

Copied!

スタイリングをカスタマイズする

スタイリングをカスタマイズする場合は、theadPropsやrowPropsなどにpropsを設定します。

編集可能な例

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
      footer: "作品名",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
      footer: "放送期間",
    },
    {
      header: "話数",
      accessorKey: "episode",
      footer: "話数",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)
return (
  <VStack>
    <Table
      columns={columns}
      data={data}
      withFooter
      theadProps={{ bg: ["red.200", "red.700"] }}
      tbodyProps={{ bg: ["green.200", "green.700"] }}
      tfootProps={{ bg: ["blue.200", "blue.700"] }}
    />

    <Table
      columns={columns}
      data={data}
      withFooter
      headerGroupProps={{ bg: ["red.200", "red.700"] }}
      rowProps={{ bg: ["green.200", "green.700"] }}
      footerGroupProps={{ bg: ["blue.200", "blue.700"] }}
    />

    <Table
      columns={columns}
      data={data}
      withFooter
      headerProps={({ column }) => {
        if (column.columnDef.header === "作品名")
          return { color: ["red.400", "red.300"] }
      }}
      cellProps={({ column }) => {
        if (column.columnDef.header === "作品名")
          return { color: ["red.400", "red.300"] }
      }}
      footerProps={({ column }) => {
        if (column.columnDef.footer === "作品名")
          return { color: ["red.400", "red.300"] }
      }}
    />
  </VStack>
)

Copied!

制御する

編集可能な例

const [sort, onChangeSort] = useState<Sort<Data>>([])
const [selectedRowIds, onChangeSelect] = useState<string[]>([])

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "作品名",
      accessorKey: "name",
    },
    {
      header: "放送期間",
      accessorKey: "broadcastPeriod",
    },
    {
      header: "話数",
      accessorKey: "episode",
    },
  ],
  [],
)

const data = useMemo<Data[]>(
  () => [
    {
      name: "ドラゴンボール",
      broadcastPeriod: "1986年2月26日 - 1989年4月19日",
      episode: "全153話",
    },
    {
      name: "ドラゴンボールZ",
      broadcastPeriod: "1989年4月26日 - 1996年1月31日",
      episode: "全291話 + スペシャル2話",
    },
    {
      name: "ドラゴンボールGT",
      broadcastPeriod: "1996年2月7日 - 1997年11月19日",
      episode: "全64話 + 番外編1話",
    },
    {
      name: "ドラゴンボール改",
      broadcastPeriod: "2009年4月5日 - 2015年6月28日",
      episode: "全159話",
    },
    {
      name: "ドラゴンボール超",
      broadcastPeriod: "2015年7月5日 - 2018年3月25日",
      episode: "全131話",
    },
  ],
  [],
)

return (
  <VStack>
    <Wrap gap="md">
      <Button onClick={() => onChangeSort([])}>Reset sort</Button>
      <Button onClick={() => onChangeSelect([])}>Reset select</Button>
    </Wrap>

    <Table
      columns={columns}
      data={data}
      rowId="name"
      manualSorting
      sort={sort}
      onChangeSort={onChangeSort}
      selectedRowIds={selectedRowIds}
      onChangeSelect={onChangeSelect}
    />
  </VStack>
)

Copied!

GitHubでこのページを編集する

前Stat 次PagingTable

Table

使い方

バリアントを変更する

サイズを変更する

カラースキームを変更する

列の区切り線を追加する

外枠の区切り線を追加する

行がホバーされたときにハイライトする

フッターを表示する

デフォルトのソートを設定する

手動のソートを使う

複数ソートの最大数を制限する

昇順と降順の切り替わりを変更する

ソートを無効にする

複数ソートを無効にする

行のIDを指定する

デフォルトの選択された行を設定する

特定の行の選択を無効にする

行のクリックで選択できるようにする

行の選択を無効にする

行のクリックイベントをハンドルする

行のダブルクリックイベントをハンドルする

チェックボックス(列)のスタイリングをカスタマイズする

ヘッダー(Th)のスタイリングをカスタマイズする

スタイリングをカスタマイズする

制御する

ヘッダー(`Th`)のスタイリングをカスタマイズする