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';

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

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
invalid?	boolean	Style the row when a cell contains an error.
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
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.
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.

TableBatchActionsBar Props
Prop	Type	Description
children?	ReactNode

TableBatchActionsTitle Props
Prop	Type	Description
children?	ReactNode

You can view the full source code for this package on Github.