Data Table

View source Report an issue

DataTable

Prop	Type	Default	Required
`columns`	`any`	-
`data`	`TableData`	-	-
`defaultSort`	`DefaultSort`	-	-
`disabledRows`	`Record<string, boolean>`	-	-
`enableRowSelection`	`boolean`	-	-
`getAsyncData`	`GetAsyncData`	-	-
`initialState`	`Partial<VisibilityTableState & ColumnOrderTableState & ColumnPinningTableState & ColumnFiltersTableState & ... 6 more ... & RowSelectionTableState>`	-	-
`onRowSelectionChange`	`OnChangeFn<RowSelectionState>`	-	-

DataTable.Table

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`corners`	`"round"` \| `"square"`	-	-
`maxRowDepth`	`number`	-	-
`rowAction`	`(row: Record<string, unknown>, event: MouseEvent<Element, MouseEvent>) => void`	-	-
`scrollContainerCls`	`string` \| `string[]`	-	-
`scrollContainerkey`	`string`	-	-
`scrollOptions`	`{ hasStickyHeader?: boolean \| undefined; stickyHeaderOffset?: number \| undefined; headerCss?: string \| undefined; numberOfStickyColumns?: number \| undefined; scrollContainerCls?: string \| ... 1 more ... \| undefined; showTotalInFirstColumn?: boolean \| undefined; totalSuffix?: string \| undefined; }`	`{ numberOfStickyColumns: 0, stickyHeaderOffset: 0, hasStickyHeader: false, showTotalInFirstColumn: true, totalSuffix: 'items' }`	-
`size`	`"md"` \| `"lg"` \| `"xl"`	-	-
`sortable`	`boolean`	-	-
`striped`	`boolean`	-	-
`theme`	`"primary"` \| `"primaryDark"` \| `"white"` \| `"primaryLight"` \| `"light"`	`white`	-
`withContainer`	`boolean`		-

DataTable.Head

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`isSticky`	`boolean`		-
`showTotalInFirstColumn`	`boolean`	-	-
`sortable`	`boolean`		-
`stickyOffset`	`number`	`0`	-
`theme`	`"primary"` \| `"primaryDark"` \| `"white"` \| `"primaryLight"` \| `"light"`	`light`	-
`totalSuffix`	`string`	-	-

DataTable.HeaderCell

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`header`	`Header<Record<string, unknown>, unknown>`	-
`includeTotal`	`boolean`		-
`totalSuffix`	`string`	`items`	-

DataTable.MetaData

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`copy`	`{ sorted_by?: string \| undefined; ascending?: string \| undefined; descending?: string \| undefined; separator?: string \| undefined; }`	-	-
`family`	`"body"` \| `"display"` \| `"mono"` \| `Partial<Record<Breakpoint, "body" \| "display" \| "mono">>`	-	-
`noCapsize`	`boolean`	-	-
`size`	`Partial<Record<Breakpoint, "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl">>` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"2xl"` \| `"3xl"` \| `"4xl"`	-	-
`sortLabel`	`string`	-	-
`weight`	`"bold"` \| `"normal"` \| `Partial<Record<Breakpoint, "bold" \| "normal">>`	-	-

DataTable.BulkActions

Prop	Type	Default	Required

DataTable.Body

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`rowAction`	`(row: Record<string, unknown>, event: MouseEvent<Element, MouseEvent>) => void`	-	-
`striped`	`boolean`		-

DataTable.Row

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`row`	`Row<Record<string, unknown>>`	-
`rowAction`	`(row: Record<string, unknown>, event: MouseEvent<Element, MouseEvent>) => void`	-	-

DataTable.DataCell

Prop	Type	Default	Required
`cell`	`Cell<Record<string, unknown>, unknown>`	-

DataTable.GlobalFilter

Prop	Type	Default	Required
`appearance`	`"standard"` \| `"modern"`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`clearText`	`string`	-	-
`family`	`"body"` \| `"display"` \| `"mono"` \| `Partial<Record<Breakpoint, "body" \| "display" \| "mono">>`	-	-
`hideLabel`	`boolean`		-
`label`	`string`	-
`noCapsize`	`boolean`	-	-
`onValueChange`	`(newValue: string) => void`	-	-
`size`	`"sm"` \| `"md"` \| `"lg"`	-	-
`state`	`"error"`	-	-
`theme`	`"white"` \| `"grey"`	-	-
`weight`	`"bold"` \| `"normal"` \| `Partial<Record<Breakpoint, "bold" \| "normal">>`	-	-

DataTable.Loading

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`message`	`string`	-	-
`size`	`"sm"` \| `"md"` \| `"lg"`	-	-

DataTable.Error

Prop	Type	Default	Required