@react-spectre/table
React components for Spectre.css's table.
Installation
yarn add @react-spectre/tablenpm install @react-spectre/table --saveUsage
Table
There are 6 components exported for tables: Table, Header (thead), Body (tbody), Row (tr), Heading (th) and Cell (td).
import { Table, Header, Body, Row, Heading, Cell } from '@react-spectre/table'Note: The main component is
Table, other component can be accessed throughTablefor example:Table.Header,Table.Body,Table.Row, etc...
Example
<Table striped hover scroll>
<Header>
<Row>
<Heading>Name</Heading>
<Heading>Age</Heading>
<Heading>Is admin?</Heading>
</Row>
</Header>
<Body>
<Row active>
<Cell>Rubens</Cell>
<Cell>98</Cell>
<Cell>Yes</Cell>
</Row>
</Body>
</Table>Tables can have 2 different style decorators: striped and hover.
<Table></Table>
<Table striped></Table>
<Table hover></Table>
<Table hover striped></Table>Rows
Table rows can be marked as active using: active prop:
<Table>
<Body>
<Row></Row>
<Row active></Row>
</Body>
<Table>Scroll
A table can have horizontal scroll using the scroll props:
<Table scroll></Table>