Skip to main content

Table

Implementation#

import { Table } from "slipstream-ui";
const Example = () => <Table />;

Basic#

Example
<Table>
<Table.Head>
<Table.Row>
<Table.Header>Header 1</Table.Header>
<Table.Header>Header 2</Table.Header>
<Table.Header>Header 3</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>
<Table.Row>
<Table.Cell>Body Cell 1</Table.Cell>
<Table.Cell>Body Cell 2</Table.Cell>
<Table.Cell>Body Cell 3</Table.Cell>
</Table.Row>
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.Cell>Footer Cell 1</Table.Cell>
<Table.Cell>Footer Cell 2</Table.Cell>
<Table.Cell>Footer Cell 3</Table.Cell>
</Table.Row>
</Table.Footer>
</Table>

Hover#

Example
<Table hover>...</Table>

Borderless#

Example
<Table borderless>...</Table>

Custom#

Example
<Table custom>...</Table>

Props#

AttributeTypeValueDefault ValueDescription
sizestringsm/md/lgmdSize of Header, Cell and Footer text and padding
borderedbooleantrue/falseundefinedAdd border to outside of table
borderlessbooleantrue/falseundefinedRemoves borders from table
hoverboolean/stringtrue/falseundefinedApplies hover to rows or cells
stripedboolean/stringtrue/false/odd/evenundefinedApply stripes to rows
custombooleantrue/falseundefinedRemove all styling while keeping functionality