Skip to main content

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
Loading...

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
Loading...