Skip to content
Primer/React
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactReact BrandViewComponents
ContributeAbout
On this page

DataTable

  • Draft
  • Not reviewed for accessibility
On this page

Props

DataTable

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

TableHead

NameTypeDefaultDescription
children
React.ReactNode

TableBody

NameTypeDefaultDescription
children
React.ReactNode

TableRow

NameTypeDefaultDescription
children
React.ReactNode

TableHeader

NameTypeDefaultDescription
children
React.ReactNode

TableCell

NameTypeDefaultDescription
children
React.ReactNode
scope
'row'
Provide the scope for a table cell, useful for defining a row header using `scope="row"`

TableContainer

NameTypeDefaultDescription
children
React.ReactNode

TableTitle

NameTypeDefaultDescription
children
React.ReactNode
id Required
string

TableSubtitle

NameTypeDefaultDescription
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.
Edit this page on GitHub
1 contributorjoshblack
Last edited by joshblack on March 6, 2023