Skip to content

Latest commit

 

History

History
60 lines (36 loc) · 1.43 KB

README.md

File metadata and controls

60 lines (36 loc) · 1.43 KB
Raw

@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

From ./src/DataTable/index.js

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 ❌