Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Table

Version 8.1.0GithubStorybook

A Table is a collection of information displayed across columns and rows.

Installation

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

Usage

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

const TableExample: React.FC = () => {
  return (
    <Table tableLayout="fixed" variant="default" striped>
      <THead>
        <Tr verticalAlign="middle">
          <Th width="size40" textAlign="left">
            Column 1
          </Th>
          <Th>Column 2</Th>
        </Tr>
      </THead>
      <TBody>
        <Tr>
          <Td>Content</Td>
          <Td>Content</Td>
        </Tr>
      </TBody>
      <TFoot>
        <Tr>
          <Td>Content</Td>
          <Td>Content</Td>
        </Tr>
      </TFoot>
    </Table>
  );
};

Props

Props page anchor

TBody

TBody page anchor

element

Type
string

TFoot

TFoot page anchor

element

Type
string

THead

THead page anchor

element

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

Type
string
Default
'THEAD'

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; }

Table

Table page anchor

element

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

Type
string
Default
'TABLE'

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'

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'

Td

Td page anchor

element

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

Type
string
Default
'TD'

textAlign

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

Type
TableAlignmentOptions
Default
'left'

Th

Th page anchor

element

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

Type
string
Default
'TH'

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>

Tr

Tr page anchor

element

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

Type
string
Default
'TR'

verticalAlign

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

Type
TableVerticalAlignmentOptions
Default
'middle'