Quick Start

Install LineUp-lite#

npm install @lineup-lite/table

or

yarn add @lineup-lite/table
important

Is important to understand the principles of the underlying react-table library, such as following its own Quick Start.

Defining your data#

const data = React.useMemo(
() => [
{
name: 'Panchito Green',
age: 10,
shirtSize: 'S',
},
{
name: 'Rubia Robker',
age: 25,
shirtSize: 'M',
},
{
name: 'Micheil Sappell',
age: 50,
shirtSize: 'L',
},
{
name: 'Geoffrey Sprason',
age: 30,
shirtSize: 'M',
},
{
name: 'Grissel Rounsefull',
age: 21,
shirtSize: 'S',
},
],
[]
);

Defining your columns#

LineUp-lite provides multiple basic column types with automatic summary and filtering capabilities: text, number, categorial, date, categorical set, and number array. Each type comes with a as<type>Column builder function, defining the basic attributes of a column, such as which renderer to use and how the summary should be computed.

import { asTextColumn, asNumberColumn, asCategoricalColumn } from '@lineup-lite/table';
const columns = React.useMemo(
() => [asTextColumn('name'), asNumberColumn('age'), asCategoricalColumn('shirtSize')],
[]
);

Define the features to use and render#

LineUp-lite supports a set of composable features based on react-lite plugin hooks. The featureDefault function generates a list of default LineUp ranking table features, including:

  • an aggregation indicator column
  • a rank column
  • a select row checkbox column
  • sorting and gouping
  • interactive filtering

However, individual feature can be enabled manually.

import LineUpLite from '@lineup-lite/table';
import '@lineup-lite/table/dist/table.css';
const features = React.useMemo(() => featureDefault<IRow>(), []);
return <LineUpLite<IRow> data={data} columns={columns} features={features} />;

Result#

Live Editor
Result
#
Name
Age
Shirt Size
Birthday
1.
Panchito Green
10
S
2/1/2011
2.
Rubia Robker
25
M
5/13/1996
3.
Micheil Sappell
50
L
9/23/1971
4.
Geoffrey Sprason
30
M
12/5/1991
5.
Grissel Rounsefull
21
S
7/30/2000

Optional: add side panel#

In addition to the main LineUp-lite table, LineUp-lite ships with an optional side panel (LineUpLitePanel) that provides an overview over the table in a vertical form.

Live Editor
Result
#
Name
Age
Shirt Size
1.
Panchito Green
10
S
2.
Rubia Robker
25
M
3.
Micheil Sappell
50
L
4.
Geoffrey Sprason
30
5.
Grissel Rounsefull
21
S