Skip to main content

Renderers

The useStats hooks provides summary statistics and centralized settings for renderers such as which color scheme to use. LineUp-lite hooks provides adaptors to LineUp-lite components such that they can be easily used within react-table. In addition, utility functions for filtering and grouping of different data types are provided.

Builder functions

Builder functions (such asTextColumn or asNumberColumn) simplify the definition of columns with all renderers and options. Besides standard react-table attributes it defines several additional ones for rendering specific scenarios.

const col = asCategoricalColumn('shirtSize');

is the same as

const col = {
Header: 'name',
accessor: 'name',
// renderer for regular cells
Cell: CategoricalRenderer,
// renderer for header summary
Summary: CategoricalHistogramRenderer,
// renderer for group rows in which the column is the grouping criteria
Group: CategoricalRenderer,
// renderer for group rows in which the column is NOT the grouping criteria
Aggregated: CategoricalHistogramRenderer,
// logic how to aggregate group rows to a single value
aggregate: statsAggregate,
// filter logic that should be applied
filter: categoricalFilter,
// statistics computation logic
stats: categoricalStats(options),
sortType: options && options.categories ? sortCategories(options.categories) : sortCompare,
defaultCanSort: true,
// grouping computation logic, requires `columnSpecificGroupByFn` to be used in the useTable options
groupBy: categoricalGroupBy,
canHide: false,
};

Example

Live Editor
Result
Loading...