Table
Table
is a table component equipped with column sorting, row selection, and click event features.
Import
pnpm add @yamada-ui/table
@yamada-ui/table
is not included in @yamada-ui/react
, so it needs to be installed separately.
import { Table } from "@yamada-ui/table"
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
: TheclassName
forTh
.style
: Thestyle
object forTh
.sx
: Thesx
object forTh
.css
: The object that can useStyled Props
forTh
.
data
: Set the cell values in an object using the keys fromaccessorKey
oraccessorFn
set incolumns
. 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話",},],[],)
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} />
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> )
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> )
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> )
Add Column Dividers
To add column dividers, 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 />
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 />
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 />
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> )
Set Default Sorting
To set the default sorting, set id
and desc
in defaultSort
.
id
: The value ofid
,accessorKey
, oraccessorFn
set incolumns
.desc
: Set tofalse
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) }} /> )
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) }} /> )
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) }} /> )
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> )
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> )
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) }} /> )
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" />
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) }} /> )
Disable Selection for Specific Rows
To disable selection for specific 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" disabledRowIds={["ドラゴンボールZ"]} onChangeSelect={(selectedIds) => { console.log("selectedIds", selectedIds) }} /> )
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) }} /> )
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} />
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) }} /> )
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) }} /> )
Customize Checkbox (Column) Styling
To customize the styling of checkboxes (column), set props
in checkboxProps
or selectColumnProps
.
checkboxProps
: You can set theprops
for the checkbox.selectColumnProps
: You can set theprops
for the checkbox column. If set tofalse
, 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> )
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} />
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> )
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> )
Edit this page on GitHub