The data table allows both Hudl and the user to clearly display large sets of information for the sake of visualizing data.
| Name | Jersey | Position | Height | Weight |
|---|---|---|---|---|
| Rawle Alkins | 20 | SG | 6'5" | 225 lbs |
| Chandler Hutchinson | 15 | SF | 6'7" | 197 lbs |
| Zach LaVine | 8 | PG | 6'7" | 200 lbs |
<DataTable
style="freeform"
size="medium"
columnContentTypes={["text", "text", "text", "text", "text"]}
columnShowSortArrows={[true, true, true, false, false]}
columnHeaders={["Name", "Jersey", "Position", "Height", "Weight"]}
rows={[
{id: '1', data: ['Rawle Alkins', '20', 'SG', '6\'5"', '225 lbs']},
{id: '2', data: ['Chandler Hutchinson', '15', 'SF', '6\'7"', '197 lbs']},
{id: '3', data: ['Zach LaVine', '8', 'PG', '6\'7"', '200 lbs']}
]}
/>
className
string
A class to apply to the main data table element.
columnContentTypes
('text' | 'numeric' | 'selectmark' | 'element')[]
The content types of each column in your data table. Acceptable values are:
textnumericselectmarkcolumnHeaders
string[]
The text to display in the column headers.
columnShowSortArrows
boolean[]
Whether or not each column in your data table should show sort arrows. This also switches on the sort functionality for a column when true.
environment
string
Determines the environment applied.
light (default)darkrows
Rows[]
The data to show. Each row must include an id and data like so:
{id: '1', data: ['Rawle Alkins', '20', 'SG', '6\'5"', '225 lbs']}, {id: '2', data: ['Chandler Hutchinson', '15', 'SF', '6\'7"', '197 lbs']}, {id: '3', data: ['Zach LaVine', '8', 'PG', '6\'7"', '200 lbs']}
To include arbitrary React elements within the table cells, pass an object with value and element props like so:
{ id: '1', data: [ { value: 'bask-foot', element: ( <> <IconBasketball /> <IconFootball /> </> ), }, 'Rawle Alkins', '20', 'SG', '6\'5"', '225 lbs', ], }
rowsChecked
string[]
Determines which rows have their Select Marks checked.
rowsSelected
string[]
Determines which rows are selected.
showTableBorder
boolean
Determines whether a border surrounds the entire data table.
size
string
Determines the size of the data table. Acceptable values are:
xsmallsmallmedium - (default)largestyle
string
Determines the style of the data table. Acceptable values are:
default - (default)freeformstripedtitle
string
Determines the title of the data table. Will be rendered as a <caption> element. If no title is provided, please use aria-describedby instead.
columnDefaultSortIndex
number
Pass in the index of the column you want a default sort applied to. Starts at 0.
columnDefaultSortDirection
string
Determines how you want your default sort applied. Acceptable values are:
ascending - defaultdescendingfreezeFirst
string
Determines whether to freeze the first row or column when scrolling. Acceptable values are:
row - defaultcolumnonRowClick
(rowId: string) => void
Responds to a row being clicked. Passes back the id of the row.
onSelectMarkClick
(rowId: string) => void
Responds to a row's Select Mark being clicked. Passes back the id of the row. If the Select Mark in the header is clicked, 'all-rows-checked' is passed back.
aria-describedby
string
If you choose not to use the title property, use the aria-describedby property to associate the table with an alternate header element for accesssibility purposes. See the MDN documentation to learn more.
selectmark as a column content type will automatically put a select mark in that row, but your data must account for that (you can put an empty string in for that particular column).See our full accessibility audit for more information about these results.
| Visual | Interactive | Automated | Details |
|---|---|---|---|
| Pass | Violation | Pass |
|