Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

Table

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

ソース@yamada-ui/table

Props

TableProps

columns

必須

説明

The array of column defs to use for the table.

タイプ

Column<Y, any>[]

cellProps

説明

Props for table cell component.

タイプ

CellProps<Y>

checkboxProps

説明

Props for table checkbox element.

タイプ

CheckboxProps

colorScheme

説明

The visual color appearance of the component.

タイプ

"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "rose" | "pink" | "flashy" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia"

デフォルト

gray

defaultColumn

説明

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

タイプ

Partial<Column<Y, any>>

defaultSelectedRowIds

説明

The initial ids of the selected row.

タイプ

string[]

defaultSort

説明

The initial sort of the table.

タイプ

Sort<Y>

disabledRowIds

説明

The ids that disabled in selection.

タイプ

string[]

footerGroupProps

説明

Props for table footer group component.

タイプ

HeaderGroupProps<Y>

footerProps

説明

Props for table footer component.

タイプ

HeaderProps<Y>

headerGroupProps

説明

Props for table header group component.

タイプ

HeaderGroupProps<Y>

headerProps

説明

Props for table header component.

タイプ

HeaderProps<Y>

highlightOnHover

説明

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

タイプ

boolean

デフォルト

false

highlightOnSelected

説明

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

タイプ

boolean

デフォルト

false

layout

説明

The CSS table-layout property.

タイプ

"fixed" | "auto" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"base" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl", TableLayout>> | ColorModeArray<...> | Partial<...> | ColorModeArray<...> | ((theme: StyledTheme) => UIValue<...>)

onChangeSelect

説明

The callback invoked when row is selected.

タイプ

(rowSelection: string[]) => void

onChangeSort

説明

The callback invoked when table sort is changed.

タイプ

(sort: Sort<Y>) => void

onClickRow

説明

The callback invoked when a row is clicked.

タイプ

(row: Row<Y>) => void

rowId

説明

The id used to store the value when selected.

タイプ

keyof Y

rowProps

説明

Props for table row component.

タイプ

RowProps<Y>

rowsClickSelect

説明

If true, allows selection by clicking on a row.

タイプ

boolean

デフォルト

false

selectColumnProps

説明

Props for table select column component.

タイプ

false | SelectColumn<Y, any>

selectedRowIds

説明

The ids of the selected row.

タイプ

string[]

size

説明

The size of the Table.

タイプ

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

デフォルト

md

sort

説明

The sort of the table.

タイプ

Sort<Y>

sortIconProps

説明

Props for table sort icon element.

タイプ

IconProps

tbodyProps

説明

Props for table tbody element.

タイプ

TableBodyProps

tfootProps

説明

Props for table tfoot element.

タイプ

TableFootProps

theadProps

説明

Props for table thead element.

タイプ

TableHeadProps

variant

説明

The variant of the Table.

タイプ

"simple" | "striped" | "unstyled"

デフォルト

simple

withBorder

説明

If true, display the outer border of the table.

タイプ

boolean

デフォルト

false

withColumnBorders

説明

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

タイプ

boolean

デフォルト

false

withFooter

説明

If true, display the table footer.

タイプ

boolean

デフォルト

false

withFooterSelect

説明

If true, display the checkbox in table footer.

タイプ

boolean

デフォルト

false

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

StatPagingTable