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

Attribute	Type	Value	Default Value	Description
size	string	sm/md/lg	md	Size of Header, Cell and Footer text and padding
bordered	boolean	true/false	undefined	Add border to outside of table
borderless	boolean	true/false	undefined	Removes borders from table
hover	boolean/string	true/false	undefined	Applies hover to rows or cells
striped	boolean/string	true/false/odd/even	undefined	Apply stripes to rows
custom	boolean	true/false	undefined	Remove all styling while keeping functionality