Table

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

Installation

yarn add @twilio-paste/table - or - yarn add @twilio-paste/core

Usage

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

TBody

element

Type: any

Inherited props

TFoot

element

Type: any

Inherited props

THead

element

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

Type: any
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: any

Inherited props

Table

element

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

Type: any
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: any
Default: 'auto'

variant

Sets the border style of the Table.

Type: any
Default: 'default'

Inherited props

Td

element

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

Type: any
Default: 'TD'

textAlign

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

Type: any
Default: 'left'

whiteSpace

Sets how white space inside the Table cell is handled.

Type: any
Default: 'normal'

Inherited props

Th

element

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

Type: any
Default: 'TH'

textAlign

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

Type: any
Default: 'left'

whiteSpace

Sets how white space inside the Table cell is handled.

Type: any
Default: 'normal'

width

Sets the width of a Table cell.

Type: any

Inherited props

Tr

element

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

Type: any
Default: 'TR'

verticalAlign

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

Type: any
Default: 'middle'