carbon-data-table-state-manager

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

Prop	Type	Default	Description
collator?	Intl.Collator	new Intl.Collator()	An Intl.Collator object for string comparison.
columns	{ id: string | number; title: string; sortCycle?: string; small?: string; tooltip?: string; }[]		The table headers / column definitions
hasSelection?	boolean	false	Should the table allow for selection?
id?	string
pageSize	number	5	Default page size.
rows	{ [key: string]: any; selected: boolean; time?: string | number; }[]		The actual table rows.
size?	"compact" | "lg" | "md" | "normal" | "short" | "sm" | "tall" | "xl" | "xs"	normal	Table cell size.
sortInfo	{ columnId: string; direction: "ASC" | "DESC" | "NONE"; }		Default sorting state
start	number	0	Offset
zebra?	boolean		Use zebra styling for table rows
title?	string		Table title
dateFormat?	string		Day.js format string for formatting the time column
pageSizes?	number[]		Array of available page sizes for the Pagination.
emptyCell?	string	"-"	String to render when column has no data.