Usage
Table components can be imported via the table entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/table';
Props
TableWrapper Props| Prop | Type | Description |
|---|
| children | ReactNode | |
Table Props| Prop | Type | Description |
|---|
| aria-describedby? | string | The id of the element that describes the table |
| aria-labelledby? | string | The id of the element that labels the table |
| aria-rowcount? | number | The total number of rows in the table |
| children? | ReactNode | |
| id? | string | The id of the table |
| ref? | Ref<HTMLTableElement> | |
| striped? | boolean | If true, alternating rows will have a different background colour. |
| tabIndex? | number | Setting this to -1 allows the table to be focusable. |
| tableLayout? | "fixed" | "auto"Default: "auto" | The table-layout CSS property sets the algorithm used to lay out cells, rows, and columns. |
TableHeader Props| Prop | Type | Description |
|---|
| children? | ReactNode | |
| display? | ResponsiveProp<"none" | "table-cell"> | Can be used to conditionally hide or show table cells at different breakpoints. |
| scope? | "row" | "rowgroup" | "col" | "colgroup" | Defines the cells that the header (defined in the <th>) element relates to. |
| textAlign? | "left" | "right" | "center"Default: "left" | Sets the horizontal alignment of the content. |
| width? | ResponsiveProp<string | number> | Sets the width of the column. |
TableHeaderSortable Props| Prop | Type | Description |
|---|
| children? | ReactNode | |
| onClick? | (() => void) | Callback function for when the column header is clicked. |
| sort? | TableSortDirection | The active direction this column is being sorted by. |
| textAlign? | "left" | "right" | "center"Default: "left" | Sets the horizontal alignment of the content. |
| width? | ResponsiveProp<string | number> | Sets the width of the column. |
TableCaption Props| Prop | Type | Description |
|---|
| children | ReactNode | |
TableHead Props| Prop | Type | Description |
|---|
| children | ReactNode | |
TableBody Props| Prop | Type | Description |
|---|
| children | ReactNode | |
TableRow Props| Prop | Type | Description |
|---|
| aria-rowindex? | number | The row index of the table row. |
| children? | ReactNode | |
| selected? | boolean | Indicates the current selected state of the table row. |
TableCell Props| Prop | Type | Description |
|---|
| as? | "td" | "th"Default: "td" | The HTML element to render. |
| children? | ReactNode | |
| display? | ResponsiveProp<"none" | "table-cell"> | Can be used to conditionally hide or show table cells at different breakpoints. |
| fontWeight? | "normal" | "bold"Default: "normal" | Sets the font weight of the cell. |
| scope? | "row" | "rowgroup" | Essential if you are using TableCell as a row header (as="th"). This defines the cells that the header (defined in the <th>) element relates to. |
| textAlign? | "left" | "right" | "center"Default: "left" | Sets the horizontal alignment of the content. |
| verticalAlign? | "bottom" | "top" | "middle"Default: "top" | Sets the vertical alignment of the content. |
TableBatchActionsBar Props| Prop | Type | Description |
|---|
| children? | ReactNode | |
TableBatchActionsTitle Props| Prop | Type | Description |
|---|
| children? | ReactNode | |
Source
You can view the full source code for this package on Github.