Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

Table

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

Source@yamada-ui/table

Props

TableProps

columns

Required

Description

The array of column defs to use for the table.

Type

Column<Y, any>[]

cellProps

Description

Props for table cell component.

Type

CellProps<Y>

checkboxProps

Description

Props for table checkbox element.

Type

CheckboxProps<string>

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

Default

"gray"

defaultColumn

Description

Default column options to use for all column defs supplied to the table.

Type

Partial<Column<Y, any>>

defaultSelectedRowIds

Description

The initial ids of the selected row.

Type

string[]

defaultSort

Description

The initial sort of the table.

Type

Sort<Y>

disabledRowIds

Description

The ids that disabled in selection.

Type

string[]

focusable

Description

If true, the table cell will be focusable.

Type

boolean

Default

true

footerGroupProps

Description

Props for table footer group component.

Type

HeaderGroupProps<Y>

footerProps

Description

Props for table footer component.

Type

HeaderProps<Y>

headerGroupProps

Description

Props for table header group component.

Type

HeaderGroupProps<Y>

headerProps

Description

Props for table header component.

Type

HeaderProps<Y>

highlightOnHover

Description

If true, highlight the row when the table row is hovered.

Type

boolean

Default

false

highlightOnSelected

Description

If true, highlight the row when the table row is selected.

Type

boolean

Default

false

isFocusable

Deprecated

Description

If true, the table cell will be focusable.

Deprecated

use focusable instead

Type

boolean

Default

true

layout

Description

The CSS table-layout property.

Type

UIValue<TableLayout>

onChangeSelect

Description

The callback invoked when row is selected.

Type

(rowSelection: string[]) => void

onChangeSort

Description

The callback invoked when table sort is changed.

Type

(sort: Sort<Y>) => void

onClickRow

Description

The callback invoked when a row is clicked.

Type

(row: Row<Y>) => void

onDoubleClickRow

Description

The callback invoked when a row is double clicked.

Type

(row: Row<Y>) => void

rowHeader

Description

The role used for the row header. This is used for accessibility to announce the selected row.

Type

keyof Y

rowId

Description

The id used to store the value when selected.

Type

keyof Y

rowProps

Description

Props for table row component.

Type

RowProps<Y>

rowsClickSelect

Description

If true, allows selection by clicking on a row.

Type

boolean

Default

false

selectColumnProps

Description

Props for table select column component.

Type

false | SelectColumn<Y, any>

selectedRowIds

Description

The ids of the selected row.

Type

string[]

size

Description

The size of the Table.

Type

"sm" | "md" | "lg" | "xl"

Default

"md"

sort

Description

The sort of the table.

Type

Sort<Y>

sortIconProps

Description

Props for table sort icon element.

Type

IconProps

tbodyProps

Description

Props for table tbody element.

Type

TableBodyProps

tfootProps

Description

Props for table tfoot element.

Type

TableFootProps

theadProps

Description

Props for table thead element.

Type

TableHeadProps

variant

Description

The variant of the Table.

Type

"simple" | "striped" | "unstyled"

Default

"simple"

withBorder

Description

If true, display the outer border of the table.

Type

boolean

Default

false

withColumnBorders

Description

If true, display line on the columns of the table.

Type

boolean

Default

false

withFooter

Description

If true, display the table footer.

Type

boolean

Default

false

withFooterSelect

Description

If true, display the checkbox in table footer.

Type

boolean

Default

false

Edit this page on GitHub

PreviousStatNextPagingTable