Table
Tables help make complex information easier to scan and compare. Use tables for exact values or information that would be hard to read in body text.
import { ... } from '@ag.ds-next/react/table';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
| Prop | Type | Description |
|---|---|---|
| children | ReactNode |
| 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? | "auto" | "fixed"Default: "auto" | The table-layout CSS property sets the algorithm used to lay out cells, rows, and columns. |
| Prop | Type | Description |
|---|---|---|
| as? | "td" | "th"Default: "th" | The HTML element to render. |
| children? | ReactNode | |
| colSpan? | number | Specifies how many columns this cell spans |
| display? | ResponsiveProp<"none" | "table-cell"> | Can be used to conditionally hide or show table cells at different breakpoints. |
| rowSpan? | number | Specifies how many rows this cell spans |
| 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. |
| Prop | Type | Description |
|---|---|---|
| children? | ReactNode | |
| display? | ResponsiveProp<"none" | "table-cell"> | |
| onClick? | MouseEventHandler<HTMLButtonElement> | Callback function for when the column header is clicked. |
| onMouseEnter? | MouseEventHandler<HTMLButtonElement> | |
| onMouseLeave? | MouseEventHandler<HTMLButtonElement> | |
| onMouseOut? | MouseEventHandler<HTMLButtonElement> | |
| onMouseOver? | MouseEventHandler<HTMLButtonElement> | |
| 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. |
| Prop | Type | Description |
|---|---|---|
| children | ReactNode |
| Prop | Type | Description |
|---|---|---|
| children | ReactNode |
| Prop | Type | Description |
|---|---|---|
| children | ReactNode |
| Prop | Type | Description |
|---|---|---|
| aria-rowindex? | number | The row index of the table row. |
| background? | "body" | "info" | "success" | "error" | "warning" | "shade" | "bodyAlt" | "shadeAlt" | The background colour of the row. Overridden by `invalid` or `selected`. |
| children? | ReactNode | |
| invalid? | boolean | Style the row when a cell contains an error. |
| onClick? | ((event: MouseEvent<HTMLTableRowElement, MouseEvent>) => unknown) | Callback function to execute when the row is clicked. Callback is not run when the clicked element is not a td, th or tr. |
| selected? | boolean | Indicates the current selected state of the table row. |
| Prop | Type | Description |
|---|---|---|
| as? | "td" | "th"Default: "td" | The HTML element to render. |
| children? | ReactNode | |
| colSpan? | number | Specifies how many columns this cell spans |
| 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. |
| id? | string | Defines an identifier (ID) which must be unique. |
| rowSpan? | number | Specifies how many rows this cell spans |
| 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. |
| Prop | Type | Description |
|---|---|---|
| children? | ReactNode |
| Prop | Type | Description |
|---|---|---|
| children? | ReactNode |
Source
You can view the full source code for this package on Github.