Table API - React Magma

Tables are used to organize and display information from a data set efficiently. A table contains a header row at the top that lists column names, followed by rows for data.

Basic Usage

import React from 'react';

import {
  Table,
  TableHead,
  TableRow,
  TableHeaderCell,
  TableBody,
  TableCell,
} from 'react-magma-dom';

export function Example() {
  const rows = [
    [
      'Lorem ipsum dolor sit amet consectetur',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      'Lorem ipsum dolor sit amet',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      'Lorem ipsum dolor sit amet consectetur',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      'Lorem ipsum dolor sit amet',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
  ];

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {rows.map((row, i) => (
          <TableRow key={`row${i}`}>
            {row.map((cell, j) => (
              <TableCell key={`cell${i}_${j}`}>{cell}</TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

Vertical Borders

The hasVerticalBorders boolean prop may be used to give table cells vertical borders between them.

import React from 'react';

import {
  Table,
  TableHead,
  TableRow,
  TableHeaderCell,
  TableBody,
  TableCell,
} from 'react-magma-dom';

export function Example() {
  return (
    <Table hasVerticalBorders>
      <TableHead>
        <TableRow>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Lorem ipsum dolor sit amet</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Hover Styles

The hasHoverStyles boolean prop may be used to visually highlight a row when hovered over.

import React from 'react';

import {
  Table,
  TableHead,
  TableRow,
  TableHeaderCell,
  TableBody,
  TableCell,
} from 'react-magma-dom';

export function Example() {
  return (
    <Table hasHoverStyles>
      <TableHead>
        <TableRow>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Lorem ipsum dolor sit amet</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Zebra Stripes

The hasZebraStripes boolean prop may be used to give each alternating row a different background color.

import React from 'react';

import {
  Table,
  TableHead,
  TableRow,
  TableHeaderCell,
  TableBody,
  TableCell,
} from 'react-magma-dom';

export function Example() {
  return (
    <Table hasZebraStripes hasHoverStyles>
      <TableHead>
        <TableRow>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Lorem ipsum dolor sit amet</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Lorem ipsum dolor sit amet</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Density

The density property controls the amount of padding inside each cell. It accepts the values compact, normal, and loose, with normal being the default.

import React from 'react';

import {
  Table,
  TableHead,
  TableRow,
  TableHeaderCell,
  TableBody,
  TableCell,
  TableDensity,
} from 'react-magma-dom';

export function Example() {
  return (
    <>
      <Table density={TableDensity.compact}>
        <TableHead>
          <TableRow>
            <TableHeaderCell>Column</TableHeaderCell>
            <TableHeaderCell>Column</TableHeaderCell>
            <TableHeaderCell>Column</TableHeaderCell>
            <TableHeaderCell>Column</TableHeaderCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
            <TableCell>Lorem ipsum dolor</TableCell>
            <TableCell>Lorem ipsum dolor</TableCell>
            <TableCell>Lorem ipsum</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Lorem ipsum dolor sit amet</TableCell>
            <TableCell>Lorem ipsum dolor</TableCell>
            <TableCell>Lorem ipsum dolor</TableCell>
            <TableCell>Lorem ipsum</TableCell>
          </TableRow>
        </TableBody>
      </Table>
      <br /> <br />
      <Table density={TableDensity.loose}>
        <TableHead>
          <TableRow>
            <TableHeaderCell>Column</TableHeaderCell>
            <TableHeaderCell>Column</TableHeaderCell>
            <TableHeaderCell>Column</TableHeaderCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
            <TableCell>Lorem ipsum dolor</TableCell>
            <TableCell>Lorem ipsum</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Lorem ipsum dolor sit amet</TableCell>
            <TableCell>Lorem ipsum dolor</TableCell>
            <TableCell>Lorem ipsum</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </>
  );
}

Sortable

The isSortable prop will indicate that a table column is sortable -- if the prop is true, the table header will render with a button that can be clicked to fire an onSort function that is passed in as a prop. The sortDirection prop indicates the direction by which the column is sorted, and takes the values ascending, descending and none with the default value being none.

These props do not handle the actual sorting of the table, just the visual appearance.

import React from 'react';

import {
  Table,
  TableHead,
  TableRow,
  TableHeaderCell,
  TableBody,
  TableCell,
  TableCellAlign,
  TableSortDirection,
  Announce,
  VisuallyHidden,
} from 'react-magma-dom';

export function Example() {
  const products = React.useMemo(
    () => [
      { id: 1, name: 'Cheese', price: 5, stock: 20 },
      { id: 2, name: 'Milk', price: 5, stock: 32 },
      { id: 3, name: 'Yogurt', price: 3, stock: 12 },
      { id: 4, name: 'Heavy Cream', price: 10, stock: 9 },
      { id: 5, name: 'Butter', price: 2, stock: 99 },
      { id: 6, name: 'Sour Cream ', price: 5, stock: 86 },
    ],
    []
  );

  const [sortConfig, setSortConfig] = React.useState({
    key: 'name',
    direction: TableSortDirection.ascending,
    message: '',
  });

  const sortedItems = React.useMemo(() => {
    const sortableItems = [...products];
    if (sortConfig !== null) {
      sortableItems.sort((a, b) => {
        if (a[sortConfig.key] < b[sortConfig.key]) {
          return sortConfig.direction === TableSortDirection.ascending ? -1 : 1;
        }
        if (a[sortConfig.key] > b[sortConfig.key]) {
          return sortConfig.direction === TableSortDirection.ascending ? 1 : -1;
        }
        return 0;
      });
    }
    return sortableItems;
  }, [products, sortConfig]);

  const requestSort = key => {
    let direction = TableSortDirection.ascending;
    if (
      sortConfig &&
      sortConfig.key === key &&
      sortConfig.direction === TableSortDirection.ascending
    ) {
      direction = TableSortDirection.descending;
    }
    const message = `Table is sorted by ${key}, ${direction}`;
    setSortConfig({ key, direction, message });
  };

  return (
    <>
      <Table>
        <TableHead>
          <TableRow>
            <TableHeaderCell
              onSort={() => {
                requestSort('name');
              }}
              isSortable
              sortDirection={
                sortConfig.key === 'name'
                  ? sortConfig.direction
                  : TableSortDirection.none
              }
            >
              Name
            </TableHeaderCell>
            <TableHeaderCell
              onSort={() => {
                requestSort('price');
              }}
              isSortable
              align={TableCellAlign.right}
              sortDirection={
                sortConfig.key === 'price'
                  ? sortConfig.direction
                  : TableSortDirection.none
              }
            >
              Price
            </TableHeaderCell>
            <TableHeaderCell
              onSort={() => {
                requestSort('stock');
              }}
              isSortable
              align={TableCellAlign.right}
              sortDirection={
                sortConfig.key === 'stock'
                  ? sortConfig.direction
                  : TableSortDirection.none
              }
            >
              In Stock
            </TableHeaderCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {sortedItems.map(item => (
            <TableRow key={item.id}>
              <TableCell>{item.name}</TableCell>
              <TableCell align={TableCellAlign.right}>${item.price}</TableCell>
              <TableCell align={TableCellAlign.right}>{item.stock}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>

      <Announce>
        <VisuallyHidden>{sortConfig.message}</VisuallyHidden>
      </Announce>
    </>
  );
}

Inverse

IsInverse is an optional boolean prop, that may be used when a table is displayed on a dark background.

import React from 'react';

import {
  Card,
  Table,
  TableHead,
  TableRow,
  TableHeaderCell,
  TableBody,
  TableCell,
  TableSortDirection,
} from 'react-magma-dom';

export function Example() {
  return (
    <Card isInverse>
      <Table isInverse hasZebraStripes hasVerticalBorders hasHoverStyles>
        <TableHead>
          <TableRow>
            <TableHeaderCell sortDirection={TableSortDirection.descending}>
              Column
            </TableHeaderCell>
            <TableHeaderCell>Column</TableHeaderCell>
            <TableHeaderCell>Column</TableHeaderCell>
            <TableHeaderCell>Column</TableHeaderCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
            <TableCell>Lorem ipsum dolor</TableCell>
            <TableCell>Lorem ipsum dolor</TableCell>
            <TableCell>Lorem ipsum</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Lorem ipsum dolor sit amet</TableCell>
            <TableCell>Lorem ipsum dolor</TableCell>
            <TableCell>Lorem ipsum dolor</TableCell>
            <TableCell>Lorem ipsum</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Lorem ipsum dolor sit amet</TableCell>
            <TableCell>Lorem ipsum dolor</TableCell>
            <TableCell>Lorem ipsum dolor</TableCell>
            <TableCell>Lorem ipsum</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </Card>
  );
}

Cell Alignment

import React from 'react';

import {
  Table,
  TableHead,
  TableRow,
  TableHeaderCell,
  TableBody,
  TableCell,
  TableCellAlign,
} from 'react-magma-dom';

export function Example() {
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell align={TableCellAlign.right}>Number</TableHeaderCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell align={TableCellAlign.right}>86</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Lorem ipsum dolor sit amet</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell align={TableCellAlign.right}>399</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Cell Width

import React from 'react';

import {
  Table,
  TableHead,
  TableRow,
  TableHeaderCell,
  TableBody,
  TableCell,
} from 'react-magma-dom';

export function Example() {
  return (
    <>
      <Table>
        <TableHead>
          <TableRow>
            <TableHeaderCell width="25%">Column 25%</TableHeaderCell>
            <TableHeaderCell width="75%">Column 75%</TableHeaderCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableCell width="25%">Lorem ipsum dolor</TableCell>
            <TableCell width="75%">
              Lorem ipsum dolor sit amet consectetur
            </TableCell>
          </TableRow>
          <TableRow>
            <TableCell width="25%">Lorem ipsum dolor sit amet</TableCell>
            <TableCell width="75%">Lorem ipsum dolor</TableCell>
          </TableRow>
        </TableBody>
      </Table>

      <br />

      <Table>
        <TableHead>
          <TableRow>
            <TableHeaderCell width={200}>Column 200px</TableHeaderCell>
            <TableHeaderCell>Column Wide</TableHeaderCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableCell width={200}>Lorem ipsum dolor</TableCell>
            <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
          </TableRow>
          <TableRow>
            <TableCell width={200}>Lorem ipsum dolor sit amet</TableCell>
            <TableCell>Lorem ipsum dolor</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </>
  );
}

Min-Width

The minWidth prop specifies the number in pixels for the minimum width of the table. By default, this is 600px. If the table is larger than the width of its container, it will scroll horizontally so that all of the content can be accessed. The horizontal scrolling is useful for responsive behavior to ensure that the content can be viewed, even on small screens.

import React from 'react';

import {
  Table,
  TableHead,
  TableRow,
  TableHeaderCell,
  TableBody,
  TableCell,
} from 'react-magma-dom';

export function Example() {
  return (
    <>
      <Table minWidth={920}>
        <TableHead>
          <TableRow>
            <TableHeaderCell>Column 1</TableHeaderCell>
            <TableHeaderCell>Column 2</TableHeaderCell>
            <TableHeaderCell>Column 3</TableHeaderCell>
            <TableHeaderCell>Column 4</TableHeaderCell>
            <TableHeaderCell>Column 5</TableHeaderCell>
            <TableHeaderCell>Column 6</TableHeaderCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
            <TableCell>Nam purus purus, cursus</TableCell>
            <TableCell>Lorem ipsum dolor</TableCell>
            <TableCell>Sit amet</TableCell>
            <TableCell>
              Donec ac nisi nunc. Vestibulum eget pulvinar ante.{' '}
            </TableCell>
            <TableCell>
              Donec ac nisi nunc. Vestibulum eget pulvinar ante.{' '}
            </TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Lorem ipsum dolor sit amet</TableCell>
            <TableCell>Fusce ultricies velit condimentum</TableCell>
            <TableCell>Sed feugiat nunc nec</TableCell>
            <TableCell>Pellentesque at pulvinar</TableCell>
            <TableCell>Sit amet</TableCell>
            <TableCell>Sit amet</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </>
  );
}

Pagination

For larger data sets, the TablePagination component can be added underneath a table. The TablePagination takes props for count, which is the total number of rows, page which is the zero-based page number and rowsPerPage. It also takes the function onRowsPerPageChange.

This component does not handle the actual pagination of the table itself, it simply provides the UI and allows for the consumer to do the sorting.

import React from 'react';

import {
  Table,
  TableHead,
  TableRow,
  TableHeaderCell,
  TableBody,
  TableCell,
  TablePagination,
} from 'react-magma-dom';

export function Example() {
  const rows = [
    [
      '1 Lorem ipsum dolor sit amet consectetur',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '2 Lorem ipsum dolor sit amet',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '3 Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '4 Lorem ipsum dolor sit amet consectetur',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '5 Lorem ipsum dolor sit amet',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '6 Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '7  Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '8 Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '9 Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '10 Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '11 Lorem ipsum dolor sit amet consectetur',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '12 Lorem ipsum dolor sit amet',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '13 Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '14 Lorem ipsum dolor sit amet',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '15 Lorem ipsum dolor sit amet',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '16 Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '17 Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '18 Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '19 Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '20 Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '21 Lorem ipsum dolor sit amet consectetur',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '22 Lorem ipsum dolor sit amet',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
    [
      '23 Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum dolor',
      'Lorem ipsum',
    ],
  ];
  const [pageIndex, setPageIndex] = React.useState<number>(1);
  const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);

  function handleRowsPerPageChange(numberOfPages) {
    setRowsPerPage(numberOfPages);
    setPageIndex(1);
  }

  function handlePageChange(_, page) {
    setPageIndex(page);
  }

  const rowsToShow = rows.slice(
    (pageIndex - 1) * rowsPerPage,
    (pageIndex - 1) * rowsPerPage + rowsPerPage
  );

  return (
    <>
      <Table>
        <TableHead>
          <TableRow>
            <TableHeaderCell>Column</TableHeaderCell>
            <TableHeaderCell>Column</TableHeaderCell>
            <TableHeaderCell>Column</TableHeaderCell>
            <TableHeaderCell>Column</TableHeaderCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rowsToShow.map((row, i) => (
            <TableRow key={`row${i}`}>
              {row.map((cell, j) => (
                <TableCell key={`cell${i}_${j}`}>{cell}</TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <TablePagination
        itemCount={rows.length}
        onRowsPerPageChange={handleRowsPerPageChange}
        onPageChange={handlePageChange}
        page={pageIndex}
        rowsPerPage={rowsPerPage}
      />
    </>
  );
}

Table Row Color

The TableRow component, takes an optional color prop, to give contextual meaning to the content. It accepts the values: danger, info, success and warning.

import React from 'react';

import {
  Table,
  TableHead,
  TableRow,
  TableRowColor,
  TableHeaderCell,
  TableBody,
  TableCell,
} from 'react-magma-dom';

export function Example() {
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
          <TableHeaderCell>Column</TableHeaderCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
        </TableRow>
        <TableRow color={TableRowColor.success}>
          <TableCell>Lorem ipsum dolor sit amet</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
        </TableRow>
        <TableRow color={TableRowColor.info}>
          <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
        </TableRow>
        <TableRow color={TableRowColor.warning}>
          <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
        </TableRow>
        <TableRow color={TableRowColor.danger}>
          <TableCell>Lorem ipsum dolor sit amet consectetur</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
          <TableCell>Lorem ipsum dolor</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Table Props

This component uses forwardRef. The ref is applied to the table element.

All of the standard table attributes can be provided as props and will be applied to the table element that gets rendered.

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

density

Description

Relative padding of the table cells

Type

enum, one of:
TableDensity.compact
TableDensity.loose
TableDensity.normal

Default

TableDensity.normal

hasHoverStyles

Description

If true, row will be visually highlighted on hover

Type

boolean

Default

false

hasSquareCorners

Description

If true, the table will have square edges

Type

boolean

Default

false

hasVerticalBorders

Description

If true, columns will have vertical borders

Type

boolean

Default

hasZebraStripes

Description

If true, every other row will have a background color

Type

boolean

Default

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

minWidth

Description

Minimum width for the table in pixels

Type

number

Default

600

rowCount

Type

number

Default

selectedItems

Type

Array

Default

TableHead Props

This component uses forwardRef. The ref is applied to the thead element.

All of the standard thead attributes can be provided as props and will be applied to the th element that gets rendered.

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

TableHeaderCell Props

This component uses forwardRef. The ref is applied to the th element.

All of the standard th attributes can be provided as props and will be applied to the thead element that gets rendered.

align

Description

Text alignment of the cell content. Right alignment should be used for numeric values

Type

enum, one of:
TableCellAlign.center
TableCellAlign.inherit
TableCellAlign.justify
TableCellAlign.left
TableCellAlign.right

Default

TableCellAlign.left

isRowHeader

Type

boolean

Default

false If true, style as a row header rather than a column header

isSortable

Description

If true, the header will render a button for sorting

Type

boolean

Default

onSort

Description

Event that fires when clicking the table header cell sort button

Type

function

Default

scope

Description

Direction and range of data cells that are covered by the header cell

Type

enum, one of:
TableHeaderCellScope.col
TableHeaderCellScope.colgroup
TableHeaderCellScope.row
TableHeaderCellScope.rowgroup

Default

TableHeaderCellScope.col

sortDirection

Description

Direction by which the column is sorted

Type

enum, one of:
TableSortDirection.ascending
TableSortDirection.descending
TableSortDirection.none

Default

TableSortDirection.none

width

Description

Width of the component, set by CSS

Type

string | number

Default

auto

TableBody Props

This component uses forwardRef. The ref is applied to the tbody element.

All of the standard tbody attributes can be provided as props and will be applied to the tbody element that gets rendered.

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

TableRow Props

This component uses forwardRef. The ref is applied to the tr element.

All of the standard tr attributes can be provided as props and will be applied to the tr element that gets rendered.

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

color

Description

The color scheme of the table row, giving contextual meaning to the content

Type

enum, one of:
TableRowColor.danger
TableRowColor.info
TableRowColor.success
TableRowColor.warning

Default

headerRowStatus

Type

enum, one of:
IndeterminateCheckboxStatus.checked
IndeterminateCheckboxStatus.indeterminate
IndeterminateCheckboxStatus.unchecked

Default

isSelectableDisabled

Type

boolean

Default

isSelected

Type

boolean

Default

onHeaderRowSelect

Type

function

Default

onSort

Description

Event that fires when clicking the table header cell sort button

Type

function

Default

onTableRowSelect

Type

function

Default

rowIndex

Type

number

Default

rowName

Description

Unique name to be used to identify row for screenreaders

Type

string

Default

sortDirection

Description

Direction by which the column is sorted

Type

enum, one of:
TableSortDirection.ascending
TableSortDirection.descending
TableSortDirection.none

Default

TableSortDirection.none

TableCell Props

This component uses forwardRef. The ref is applied to the td element.

All of the standard td attributes can be provided as props and will be applied to the td element that gets rendered.

align

Description

Text alignment of the cell content. Right alignment should be used for numeric values

Type

enum, one of:
TableCellAlign.center
TableCellAlign.inherit
TableCellAlign.justify
TableCellAlign.left
TableCellAlign.right

Default

TableCellAlign.left

width

Description

Width of the component, set by CSS

Type

string | number

Default

auto

Table Pagination Props

This component uses forwardRef. The ref is applied to the container.

All of the global HTML attributes can be provided as props and will be applied to the wrapping div element that gets rendered.

Common Props

dropdownDropDirection

Deprecated

Description

Position of the dropdown content

Type

enum, one of:
DropdownDropDirection.down
DropdownDropDirection.left
DropdownDropDirection.right
DropdownDropDirection.up

Default

DropdownDropDirection.up

hasSquareCorners

Description

If true, the table paginator will have square edges

Type

boolean

Default

true

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

itemCount

Required

Description

Total number of rows

Type

number

Default

onPageChange

Description

Event that fires when the page number changes

Type

function

Default

onRowsPerPageChange

Description

Event that fires when the number of rows per page changes. If no function is passed, the rows per page select will be hidden

Type

function

Default

rowsPerPageValues

Description

Values added to the rows per page select

Type

number[]

Default

Controlled Props

page

Description

Current page number

Type

number

Default

rowsPerPage

Description

Number of rows per page

Type

number

Default

Uncontrolled Props

defaultPage

Description

Page selected by default when the component is uncontrolled

Type

number

Default

defaultRowsPerPage

Description

Number of rows per page by default when component is uncontrolled

Type

number

Default

Design

Components

Patterns

Data Visualization

Table

Basic Usage

Vertical Borders

Hover Styles

Zebra Stripes

Density

Sortable

Inverse

Cell Alignment

Cell Width

Min-Width

Other Content

Table Row Color

Table Props

TableHead Props

TableHeaderCell Props

TableBody Props

TableRow Props

TableCell Props

Table Pagination Props

Common Props

Controlled Props

Uncontrolled Props