Welcome friends! flat-ui is a React component that will render your flat dataset (an array of objects) in a table view:

It will...

• auto-detect types
• show a distribution of each quantitative column
• calculate a diff between the main dataset and a diffData dataset
• give more information about a hovered row & column
• allow the user to...
  • filter each column
  • sort by any column
  • sticky any column to the left
  • download the filtered & sorted data (csv or json)
  • cycle through the diffs, scrolling to each changed row

Install using npm or yarn:

yarn add @githubocto/flat-ui

Basic usage:

import { Grid } from '@githubocto/flat-ui';

const MyComponent = () => {
  const data = [{ column1: 123 }, { column1: 234 }];

  return <Grid data={data} />;
};

array

Your dataset, formatted as an array of objects, where each object is a row in the table.

array

A modified version of your main dataset, formatted as an array of objects, where each object is a row in the table. The table will show "differences" between this dataset and the main dataset:

• added lines
• removed lines
• modified cells

object

column names as keys and descriptions as values.

boolean

Whether or not the table provides "download csv" and "download json" buttons.

string

The name of the downloaded CSV or JSON file (without extension).

object

column names as keys, with filter values as values:

• string for text columns
• array of numbers for quantitative columns (numbers or dates)

The user can interact with the table and update the filters, but the table will use the default filters when defaultFilters or data changes.

array

The name of the column and the order you want the table to initialize sorting by (e.g. ["Location", "desc"]). The user can interact with the table and update the sort, but the table will use the default sort when defaultSort or data changes.

string

The name of the column you want the table to initialize stickied to the left. The user can interact with the table and update the sticky column, but the table will use the default sticky column when defaultStickyColumnName or data changes.

function

A callback function whose first parameter is the grid state:

{
  stickyColumnName: "",
  columnNames: ["", ""],
  filteredData: [{}, {}],
  diffs: [{}, {}], // where __status__ is "new"|"old"|"modified"
  filters: {},
  sort: ["column name", "asc" or "desc"],
  schema: {}, // column names : array|short-array|category|number|date
}

boolean

Whether or not to allow the user to edit the table.

(newData: any[]) => void

A callback when the user edits the data with the updated dataset. This is intended to be used as a controlled component, where the parent component handles data changes.

To get the example up & running:

yarn
yarn start

and also start the example server:

cd example
yarn
yarn start