A nicely styled, responsive data table, with options for pagination and search. This basically wraps react-table with some extra functionality and custom styling.
npm install @newamerica/data-table --save
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} />
);
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 |
❌ | ||
columns | Array[]<Object> |
✅ | ||
data | Array |
✅ | ||
showPagination | Boolean |
true |
❌ |