Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Data Grid

Peer review pending

A data grid is an interactive table used for working with a large collection of data in a scannable way.

Version 8.2.1
Github
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/data-grid - or - yarn add @twilio-paste/core

Usage

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

const Component = () => (
  <DataGrid aria-label="User information table" striped>
    <DataGridHead>
      <DataGridRow>
        <DataGridHeader>First Name</DataGridHeader>
        <DataGridHeader>Last Name</DataGridHeader>
        <DataGridHeader>Country</DataGridHeader>
        <DataGridHeader>Email</DataGridHeader>
        <DataGridHeader>Phone</DataGridHeader>
      </DataGridRow>
    </DataGridHead>
    <DataGridBody>
      <DataGridRow>
        <DataGridCell>Devyn</DataGridCell>
        <DataGridCell>Weimann</DataGridCell>
        <DataGridCell>Congo</DataGridCell>
        <DataGridCell>Matilde86@gmail.com</DataGridCell>
        <DataGridCell>652-441-1766 x377</DataGridCell>
      </DataGridRow>
      <DataGridRow>
        <DataGridCell>Fritz</DataGridCell>
        <DataGridCell>Bashirian</DataGridCell>
        <DataGridCell>France</DataGridCell>
        <DataGridCell>Magali.Harber@hotmail.com</DataGridCell>
        <DataGridCell>1-229-278-7567</DataGridCell>
      </DataGridRow>
      <DataGridRow>
        <DataGridCell>Jovanny</DataGridCell>
        <DataGridCell>Mante</DataGridCell>
        <DataGridCell>Pitcairn Islands</DataGridCell>
        <DataGridCell>Fausto_Vandervort15@gmail.com</DataGridCell>
        <DataGridCell>(629) 375-5743 x726</DataGridCell>
      </DataGridRow>
    </DataGridBody>
    <DataGridFoot>
      <DataGridRow>
        <DataGridCell>Devyn</DataGridCell>
        <DataGridCell>Weimann</DataGridCell>
        <DataGridCell>Congo</DataGridCell>
        <DataGridCell>Matilde86@gmail.com</DataGridCell>
        <DataGridCell>652-441-1766 x377</DataGridCell>
      </DataGridRow>
    </DataGridFoot>
  </DataGrid>
);

Props

Props page anchor

DataGrid

DataGrid page anchor

aria-label RequiredRequired

Defines a string value that labels the current element.

Type
string

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'DATA_GRID'

isActionable

Sets the table to visually display the actionable state of an interactive table. Mainly used for Data Grid.

Type
boolean

noWrap

Sets the table cells to not line wrap.

Type
boolean
Default
'false'

role

If creating a treegrid, set this to "treegrid" to override the default role of "grid"

Type
"treegrid"
Default
grid

scrollHorizontally

Sets the table to scroll horizontally on small screens.

Type
boolean
Default
'false'

striped

Sets a background color for even rows within the table.

Type
boolean
Default
'false'

tableLayout

Sets the table-layout style of the Table.

Type
TableLayoutOptions
Default
'auto'

variant

Sets the border style of the Table.

Type
TableVariantOptions
Default
'default'

DataGridHead

DataGridHead page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'DATA_GRID_HEAD'

stickyHeader

Makes the table head stick to the top of the window as the user scrolls a long table

Type
boolean

top

Allows manual control of the top offset, used in conjunction with stickyHeader

Type
Top<TLengthStyledSystem> | (Top<TLengthStyledSystem> | null | undefined)[] | { [x: string]: Top<TLengthStyledSystem> | undefined; [x: number]: Top<...> | undefined; }

DataGridRow

DataGridRow page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'DATA_GRID_ROW'

role

Type
string

selected

Visally displays a row highlight indicating selection and sets aria-selected

Type
boolean

striped

Type
boolean

verticalAlign

Sets the vertical alignment of the content within the Table row.

Type
TableVerticalAlignmentOptions
Default
'middle'

DataGridHeader

DataGridHeader page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'DATA_GRID_HEADER'

onClick

Type
MouseEventHandler<Element>

textAlign

Sets the text alignment of the content within the Table cell.

Type
TableAlignmentOptions
Default
'left'

width

Sets the width of a Table cell.

Type
Width<TLengthStyledSystem>

DataGridHeaderSort

DataGridHeaderSort page anchor

direction RequiredRequired

Sort direction matching aria spec

Type
SortDirection

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'DATA_GRID_HEADER_SORT'

i18nAscendingLabel

Sort button label text when direction is "ascending"

Type
string
Default
'Sort ascending'

i18nDescendingLabel

Sort button label text when direction is "descending"

Type
string
Default
'Sort descending'

i18nUnsortedLabel

Sort button label text when direction is "none"

Type
string
Default
'Unsorted'

onClick

Callback when the sort button is pressed. Used to handle sorting.

Type
() => void

tabIndex

Type
ButtonTabIndexes

DataGridBody

DataGridBody page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'DATA_GRID_BODY'

DataGridCell

DataGridCell page anchor

as

Type
"td" | "th"

element

Overrides the default element name ('TH') to apply unique styles with the Customization Provider.

Overrides the default element name to apply unique styles with the Customization Provider

Overrides the default element name ('TD') to apply unique styles with the Customization Provider.

Type
string
Default
'TH'

onClick

Type
MouseEventHandler<Element>

textAlign

Sets the text alignment of the content within the Table cell.

Type
TableAlignmentOptions
Default
'left'

width

Sets the width of a Table cell.

Type
Width<TLengthStyledSystem>

DataGridFoot

DataGridFoot page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'DATA_GRID_FOOT'