Package Exports

@newamerica/data-table

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@newamerica/data-table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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

DataTable

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
children	`ReactElement`		❌
columns	`Array[]<Object>`		✅
data	`Array`		✅
showPagination	`Boolean`	`true`	❌