Table

Table is a table component equipped with column sorting, row selection, and click event features.

Import

pnpm add @yamada-ui/table

Copied!

@yamada-ui/table is not included in @yamada-ui/react, so it needs to be installed separately.

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

Copied!

Usage

To configure the table, set columns and data.

Table internally uses @tanstack/react-table.

columns: You can set the following properties in an object for ColumnDef. This object becomes one column, and you set an array of columns (objects).
- className: The className for Th.
- style: The style object for Th.
- sx: The sx object for Th.
- css: The object that can use Styled Props for Th.
data: Set the cell values in an object using the keys from accessorKey or accessorFn set in columns. This object becomes one row, and you set an array of rows (objects).

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!

It is recommended to memoize columns and data to prevent unnecessary rendering.

Editable example

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!

Change Variants

Editable example

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!

Change Size

Editable example

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!

Change Color Scheme

Editable example

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!

Add Column Separators

To add column separators, set withColumnBorders to true.

Editable example

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!

Add Outer Border

To add an outer border, set withBorder to true.

Editable example

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!

Highlight on Row Hover

To highlight rows on hover, set highlightOnHover to true.

Editable example

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!

Display Footer

To display a footer, set withFooter to true. If you want to display checkboxes in the footer like in the header, set withFooterSelect to true.

Editable example

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!

Set Default Sorting

To set the default sorting, set id and desc in defaultSort.

id: The value of id, accessorKey, or accessorFn set in columns.
desc: Set to false for ascending order, true for descending order.

If you want to handle sort events, use onChangeSort.

Editable example

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!

Use Manual Sorting

To use manual sorting, set manualSorting to true. This is useful when sorting is done on the server side.

Editable example

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!

Limit the Maximum Number of Multi-Sorts

By default, multi-sort is enabled. If you want to limit the maximum number of multi-sort selections, set a number in maxMultiSortColCount.

Editable example

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!

Change Ascending and Descending Order Toggle

By default, sorting starts with ascending order. If you want to start with descending order, set sortDescFirst to true, or if you want to apply it to specific columns only, set sortDescFirst to true in the column (object) within columns.

Editable example

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!

Disable Sorting

To disable sorting, set enableSorting to false, or if you want to disable it for specific columns only, set enableSorting to false in the column (object) within columns.

Editable example

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!

Disable Multi-Sort

To disable multi-sort, set enableMultiSort to false.

Editable example

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!

Specify Row ID

The default row ID is the string index. For the first row, it will be "0". If you want to use a specific column's value as the ID, set rowId to the value of accessorKey or accessorFn set in the column (object) within columns.

Editable example

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!

Set Default Selected Rows

To set the default selected rows, set defaultSelectedRowIds with an array of row IDs.

Editable example

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!

Disable Selection for Specific Rows

To disable selection for specific rows, set disabledRowIds with an array of row IDs.

Editable example

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!

Enable Selection by Row Click

To enable selection by row click, set rowsClickSelect to true.

Editable example

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!

Disable Row Selection

To disable row selection, set enableRowSelection to false.

Editable example

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!

Handle Row Click Events

To handle row click events, use onClickRow.

Editable example

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!

Handle Row Double Click Events

To handle row double click events, use onDoubleClickRow.

Editable example

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!

Customize Checkbox (Column) Styling

To customize the styling of checkboxes (column), set props in checkboxProps or selectColumnProps.

checkboxProps: You can set the props for the checkbox.
selectColumnProps: You can set the props for the checkbox column. If set to false, row selection is possible, but the checkbox column will be hidden.

Editable example

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!

Customize Header (`Th`) Styling

To customize the styling of the header (Th), you can style it with css, sx, or style.

Editable example

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!

Customize Styling

To customize styling, set props in theadProps, rowProps, etc.

Editable example

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!

Control

Editable example

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!

Edit this page on GitHub

PreviousStat NextPagingTable

Table

Usage

Change Variants

Change Size

Change Color Scheme

Add Column Separators

Add Outer Border

Highlight on Row Hover

Display Footer

Set Default Sorting

Use Manual Sorting

Limit the Maximum Number of Multi-Sorts

Change Ascending and Descending Order Toggle

Disable Sorting

Disable Multi-Sort

Specify Row ID

Set Default Selected Rows

Disable Selection for Specific Rows

Enable Selection by Row Click

Disable Row Selection

Handle Row Click Events

Handle Row Double Click Events

Customize Checkbox (Column) Styling

Customize Header (Th) Styling

Customize Styling

Control

Customize Header (`Th`) Styling