PagingTable

PagingTableは、ページネーション機能を備えたテーブルのコンポーネントです。

ソース @yamada-ui/table

Props

PagingTableProps

説明

The array of column defs to use for the table.

タイプ

Column<Y, any>[]

説明

Props for table cell component.

タイプ

CellProps<Y>

説明

Props for table checkbox element.

タイプ

CheckboxProps<string>

説明

The visual color appearance of the component.

タイプ

"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"

デフォルト

"gray"

説明

Props for table container element.

タイプ

HTMLUIProps

説明

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

タイプ

Partial<Column<Y, any>>

説明

The initial page index of the paging table.

タイプ

number

デフォルト

0

説明

The initial page size of the paging table.

タイプ

number

デフォルト

20

説明

The initial ids of the selected row.

タイプ

string[]

説明

The initial sort of the table.

タイプ

Sort<Y>

説明

The ids that disabled in selection.

タイプ

string[]

説明

Props for table footer group component.

タイプ

HeaderGroupProps<Y>

説明

Props for table footer component.

タイプ

HeaderProps<Y>

説明

Function to format the label used for the options in a select.

タイプ

(pageSize: number) => string

説明

Props for table header group component.

タイプ

HeaderGroupProps<Y>

説明

Props for table header component.

タイプ

HeaderProps<Y>

説明

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

タイプ

boolean

デフォルト

false

説明

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

タイプ

boolean

デフォルト

false

説明

If true, the table cell will be focusable.

タイプ

boolean

デフォルト

true

説明

The CSS table-layout property.

タイプ

"auto" | "fixed" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | [TableLayout | { [x: string]: TableLayout | undefined; ... 5 more ...; xl?: TableLayout | undefined; }, TableLayout | { ...; }] | { ...; } | [...] | { ...; } | ((theme: StyledTheme) => UIValue<...>)

説明

The callback invoked when page index is changed.

タイプ

(pageIndex: number) => void

説明

The callback invoked when page size is changed.

タイプ

(pageIndex: number) => void

説明

The callback invoked when row is selected.

タイプ

(rowSelection: string[]) => void

説明

The callback invoked when table sort is changed.

タイプ

(sort: Sort<Y>) => void

説明

The callback invoked when a row is clicked.

タイプ

(row: Row<Y>) => void

説明

The callback invoked when a row is double clicked.

タイプ

(row: Row<Y>) => void

説明

The page index of the paging table.

タイプ

number

説明

The page size of the paging table.

タイプ

number

説明

The list of the page size.

タイプ

number[]

デフォルト

'[20, 50, 100]'

説明

Props for pagination element.

タイプ

Omit<PaginationProps,
"page" | "onChange" | "defaultPage" | "total">

説明

Props for paging control element.

タイプ

HTMLUIProps

説明

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

タイプ

keyof Y

説明

The id used to store the value when selected.

タイプ

keyof Y

説明

Props for table row component.

タイプ

RowProps<Y>

説明

If true, allows selection by clicking on a row.

タイプ

boolean

デフォルト

false

説明

Props for table select column component.

タイプ

false | SelectColumn<Y, any>

説明

The ids of the selected row.

タイプ

string[]

説明

Props for select element.

タイプ

Omit<SelectProps,
| "children"
| "defaultValue"
| "onChange"
| "data"
| "value"
| "placeholderInOptions">

説明

The size of the PagingTable.

タイプ

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

デフォルト

"md"

説明

The sort of the table.

タイプ

Sort<Y>

説明

Props for table sort icon element.

タイプ

IconProps

説明

Props for table tbody element.

タイプ

TableBodyProps

説明

Props for table tfoot element.

タイプ

TableFootProps

説明

Props for table thead element.

タイプ

TableHeadProps

説明

The variant of the PagingTable.

タイプ

"simple" | "striped" | "unstyled"

デフォルト

"simple"

説明

If true, display the outer border of the table.

タイプ

boolean

デフォルト

false

説明

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

タイプ

boolean

デフォルト

false

説明

If true, display the table footer.

タイプ

boolean

デフォルト

false

説明

If true, display the checkbox in table footer.

タイプ

boolean

デフォルト

false

説明

If true, display the paging control.

タイプ

boolean

デフォルト

true

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

前Table 次NativeTable