0.0.9 • Published 5 years ago
@newamerica/data-table v0.0.9
@newamerica/data-table
A nicely styled, responsive data table, with options for pagination and search. This basically wraps react-table with some extra functionality and custom styling.
Installation
npm install @newamerica/data-table --save
Usage Example
import { DataTable, DataTableWithSearch } from "@newamerica/data-table";
import "@newamerica/data-table/dist/styles.css";
const columns = [
{
Header: // string for the column header,
Accessor: // accessor string,
// ^ this is the bare minimum, but react-table accepts a lot more, like custom cell renderers etc...
}
]
const MyTable = () => (
<DataTable data={data} columns={columns} showPagination={true} maxRows={20} />
);
Components
API
DataTable
All extra props will be passed directly to the ReactTable
component. See docs for that here.
TODO:
- add functionality for a sticky first column
add functionality for a select dropdown in addition to a search box
prop | type | default | required | description |
---|---|---|---|---|
children | ReactElement | :x: | ||
columns | Array[]<Object> | :white_check_mark: | ||
data | Array | :white_check_mark: | ||
showPagination | Boolean | true | :x: |