React-cello NPM

React Cello

See the wiki for release notes.

See the demo to play around.

Overview

A component library and basic styling which allows for a table-like collection of cells which support controls such as tabbing and arrow navigation (left, right up, down), as well as multiple states for cells, which can be toggled through with Ctrl + shift + right arrow, Ctrl + shift + left arrow.

Components

Cells

A cell can hold multiple states. Possible states must be registered, and given a component for the cell to render in that state.
Cell state can be changed via Ctrl + right arrow, Ctrl + left arrow. The cell also exposes setMode and getMode methods.
Properties include canSelect.
Cells dispatch onSelect and onDeselect events.
Cells can be programmatically selected with select and deselect methods.
Cells with multiple states show an indicator that a next state can be selected (an arrow for either direction).
Cell states apply classes to the cell based on that state.
Can pass carousel argument to allow states to be toggled as carousel rather than starting / ending at last state.

HeaderCells

A cell which implements only a single state, and takes either a text value or component to render in that basic state.
Header cells can not be selected.

Rows

A row is a collection of n cells rendered on the x axis.
If onRemoveRow property is provided, controls for removing the row are provided.
Table refs include removeRowButton.

Table

A Table is a collection of rows.
Tables can be nested within cells. In this case, tabbing / arrow controls will delegate control from an outer table to an inner table. This is done through communication at the cell level.
Table takes a headers property and a rows property. These properties must be arrays of equal length.
Table refs include headers, rows, and addRowButton.
Can pass cellCarousel argument to allow states on contained cells to be toggled as carousel rather than starting / ending at last state.