On this page
DataTable
- Draft
- Not reviewed for accessibility
On this page
Props
DataTable
| Name | Type | Default | Description |
|---|---|---|---|
| aria-describedby | string | Provide an id to an element which uniquely describes this table | |
| aria-labelledby | string | Provide an id to an element which uniquely labels this table | |
| data | Array<Data> | Provide a collection of the rows which will be rendered inside of the table | |
| columns | Array<Column<Data>> | Provide the columns for the table and the fields in `data` to which they correspond | |
| cellPadding | 'condensed' | 'normal' | 'spacious' | Specify the amount of space that should be available around the contents of a cell |
Table
| Name | Type | Default | Description |
|---|---|---|---|
| aria-describedby | string | Provide an id to an element which uniquely describes this table | |
| aria-labelledby | string | Provide an id to an element which uniquely labels this table | |
| children | React.ReactNode | ||
| cellPadding | 'condensed' | 'normal' | 'spacious' | Specify the amount of space that should be available around the contents of a cell |
Table.Head
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode |
Table.Body
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode |
Table.Row
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode |
Table.Header
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode |
Table.Cell
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | ||
| scope | 'row' | Provide the scope for a table cell, useful for defining a row header using `scope="row"` |
Table.Container
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode |
Table.Title
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | ||
| id Required | string |
Table.Subtitle
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | ||
| id Required | string |
Status
Alpha
- Component props and basic example usage of the component are documented on primer.style/react.
- Component does not have any unnecessary third-party dependencies.
- Component can adapt to different themes.
- Component can adapt to different screen sizes.
- Component has robust unit test coverage (100% where achievable).
- Component has visual regression coverage of its default and interactive states.
- Component does not introduce any axe violations.
- Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.
Beta
- Component is used in a production application.
- Common usage examples are documented on primer.style/react.
- Common usage examples are documented in storybook stories.
- Component has been reviewed by a systems designer and any resulting issues have been addressed.
- Component does not introduce any performance regressions.
Stable
- Component API has been stable with no breaking changes for at least one month.
- Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
- Component has corresponding design guidelines documented in the interface guidelines.
- Component has corresponding Figma component in the Primer Web library.
- Tooling (such as linters, codemods, etc.) exists to prevent further use of alternatives.