Skip to main content

​
Table

The Table component provides a flexible way to display tabular data with various styling options.

​
Installation

yarn add @twilio-paste/table

​
Usage

import { Table, THead, TBody, TFoot, Tr, Th, Td } from '@twilio-paste/table';

<Table>
  <THead>
    <Tr>
      <Th>Header 1</Th>
      <Th>Header 2</Th>
    </Tr>
  </THead>
  <TBody>
    <Tr>
      <Td>Cell 1</Td>
      <Td>Cell 2</Td>
    </Tr>
  </TBody>
</Table>

​
Props

​
Table

​
element
string
default:"TABLE"
Overrides the default element name to apply unique styles with the Customization Provider.
​
striped
boolean
default:"false"
Sets a background color for even rows within the table.
​
tableLayout
'auto' | 'fixed'
default:"auto"
Sets the table-layout style of the Table.
​
variant
'default' | 'borderless'
default:"default"
Sets the border style of the Table.
​
scrollHorizontally
boolean
default:"false"
Sets the table to scroll horizontally on small screens.
​
noWrap
boolean
default:"false"
Sets the table cells to not line wrap.
​
isActionable
boolean
Sets the table to visually display the actionable state of an interactive table. Mainly used for Data Grid.

​
THead

​
element
string
default:"THEAD"
Overrides the default element name to apply unique styles with the Customization Provider.
​
stickyHeader
boolean
Makes the table head stick to the top of the window as the user scrolls a long table.
​
top
string
Allows manual control of the top offset, used in conjunction with stickyHeader.

​
Tr

​
element
string
default:"TR"
Overrides the default element name to apply unique styles with the Customization Provider.
​
verticalAlign
'top' | 'middle' | 'bottom'
default:"middle"
Sets the vertical alignment of the content within the Table row.

​
Th

​
element
string
default:"TH"
Overrides the default element name to apply unique styles with the Customization Provider.
​
textAlign
'left' | 'center' | 'right'
default:"left"
Sets the text alignment of the content within the Table cell.
​
whiteSpace
WhiteSpaceOptions
default:"normal"
Sets how white space inside the Table cell is handled.
​
width
WidthOptions
Sets the width of a Table cell.

​
Td

​
element
string
default:"TD"
Overrides the default element name to apply unique styles with the Customization Provider.
​
textAlign
'left' | 'center' | 'right'
default:"left"
Sets the text alignment of the content within the Table cell.
​
whiteSpace
WhiteSpaceOptions
default:"normal"
Sets how white space inside the Table cell is handled.

​
TBody

​
element
string
default:"TBODY"
Overrides the default element name to apply unique styles with the Customization Provider.

​
TFoot

​
element
string
default:"TFOOT"
Overrides the default element name to apply unique styles with the Customization Provider.

Build docs developers (and LLMs) love

Get started for freeTalk to us