Skip to main content

​
Data Grid

The Data Grid component extends the Table component with keyboard navigation and interactive features for managing complex tabular data.

​
Installation

yarn add @twilio-paste/data-grid

​
Usage

import { DataGrid, DataGridHead, DataGridBody, DataGridRow, DataGridHeader, DataGridCell } from '@twilio-paste/data-grid';

<DataGrid aria-label="User data">
  <DataGridHead>
    <DataGridRow>
      <DataGridHeader>Name</DataGridHeader>
      <DataGridHeader>Email</DataGridHeader>
    </DataGridRow>
  </DataGridHead>
  <DataGridBody>
    <DataGridRow>
      <DataGridCell>John Doe</DataGridCell>
      <DataGridCell>[email protected]</DataGridCell>
    </DataGridRow>
  </DataGridBody>
</DataGrid>

​
Props

​
DataGrid

​
aria-label
string
required
Accessible label for screen readers.
​
element
string
default:"DATA_GRID"
Overrides the default element name to apply unique styles with the Customization Provider.
​
role
'treegrid'
default:"grid"
If creating a treegrid, set this to “treegrid” to override the default role of “grid”.
​
striped
boolean
default:"false"
Sets zebra striping on table rows.
​
tableLayout
'auto' | 'fixed'
default:"auto"
Sets the table-layout style of the Data Grid.
​
variant
'default' | 'borderless'
default:"default"
Sets the border style of the Data Grid.
​
scrollHorizontally
boolean
default:"false"
Sets the data grid to scroll horizontally on small screens.
​
noWrap
boolean
default:"false"
Sets the data grid cells to not line wrap.

​
Features

  • Keyboard Navigation: Navigate cells using arrow keys
  • Actionable Mode: Press Enter to interact with cell contents, Escape to exit
  • Focus Management: Maintains focus state when tabbing in and out of the grid
  • Accessibility: Full ARIA grid pattern support

​
Keyboard Shortcuts

  • Arrow Keys: Navigate between cells
  • Enter: Enter actionable mode to interact with cell contents
  • Escape: Exit actionable mode and return to grid navigation
  • Tab: Tab through interactive elements within a cell (when in actionable mode)

Build docs developers (and LLMs) love

Get started for freeTalk to us