/carbon-data-table-state-manager

Primary LanguageTypeScriptGNU General Public License v3.0GPL-3.0

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: carbon-design-system/carbon#6373 (comment)

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: carbon-design-system/carbon#6373 (comment)

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.