About

This package emerged through the need of a custom state manager for IBMs Carbon Design Data table component. The default behavior of the component (sorting, filtering, searching) can only be overwritten by implementing an own Custom State manager.

Read more about it here: https://github.com/carbon-design-system/carbon/issues/6373#issuecomment-747612917

After implementing this custom state manager, I realized that I need the same code in many projects, so this package was born.

The initial code was taken from the example implementation by IBM: https://github.com/carbon-design-system/carbon/issues/6373#issuecomment-747612917

Features

The package was written with a focus on displaying time series data.

Time

You can supply a column named "time" and an optional Day.js format string. The time column will then be formatted according to this format string (default is YYYY/MM/DD HH:mm). Additionaly if you supply a title prop, the Table will show a description in the form from <start date> till <end date>.

Requirements

Requires Carbon components v10, migration to v11 is coming soon.

"@carbon/icons-react": "10.x",
"carbon-components": "10.x",
"carbon-components-react": "7.x",
"react": ">=16",
"react-dom": ">=16"

Install

yarn add carbon-data-table-state-manager

or

npm i carbon-data-table-state-manager --save

Usage

Example

import { CarbonDataTableStateManager } from "carbon-data-table-state-manager";
import { TABLE_SORT_DIRECTION } from "carbon-data-table-state-manager/misc";

const columns = [
  {
    title: "Time",
    id: "time",
    sortCycle: "tri-states-from-ascending",
  },
  {
    title: "Temperature",
    small: `in °C`,
    id: "temperature",
    sortCycle: "tri-states-from-ascending",
  },
  {
    title: "Humidity",
    small: `in %`,
    id: "humidity",
    sortCycle: "tri-states-from-ascending",
  },
];

const rows = [
  {
    time: 1614927420,
    temperature: -0.7,
    humidity: 93,
  },
  {
    time: 2021-03-05T02:57:00.000Z,
    temperature: 1.2,
    humidity: 77,
  },
];

<CarbonDataTableStateManager
  columns={columns}
  rows={rows}
  start={0}
  pageSize={10}
  pageSizes={[10, 25, 50, 100, 200, 500]}
  sortInfo={{
    columnId: "timeParsed",
    direction: TABLE_SORT_DIRECTION.ASC,
  }}
  size="short"
/>

Storybook

See the Storybook for more examples.

Props

{
  id: string | number;
  title: string;
  sortCycle?: string;
  small?: string;
  tooltip?: string;
}[]

{
  [key: string]: any;
  selected: boolean;
  time?: string | number;
}[]

{
  columnId: string;
  direction: "ASC" | "DESC" | "NONE";
}

Day.js format string for formatting the time column