@react-spectre/table
v1.0.0-16
Published
React components for Spectre.css's table.
Downloads
13
Readme
@react-spectre/table
React components for Spectre.css's table.
Installation
yarn add @react-spectre/table
npm install @react-spectre/table --save
Usage
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 throughTable
for 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>
Made with :heart: by Rubens Mariuzzo.