LineUp-lite

LineUp-lite is an extension of the excellent react-table library for rendering beautiful interactive table visualizations based on the LineUp ranking visualization technique.

see more at https://lineup-lite.js.org.

Mono Repo structure

This monorepo contains following packages:

@lineup-lite/table higher level table component based on react-table and hooks
@lineup-lite/hooks hooks and renderers for react-table
@lineup-lite/components basic React components and statistic utils
@lineup-lite/docs Docusaurus based documentation
@lineup-lite/_playground Playground setup for testing lineup-lite

In addition there are numerous example projects.

Installation and Usage

see also Getting Started in the docs.

npm install @lineup-lite/table

yarn add @lineup-lite/table

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

import React from 'react';
import LineUpLite, {
  asTextColumn,
  asNumberColumn,
  asCategoricalColumn,
  asDateColumn,
  LineUpLiteColumn,
  featureDefault,
} from '@lineup-lite/table';
import '@lineup-lite/table/dist/table.css';

function GettingStarted() {
  const data = React.useMemo(
    () => [
      {
        name: 'Panchito Green',
        age: 10,
        shirtSize: 'S',
        birthday: new Date(2011, 1, 1),
      },
      {
        name: 'Rubia Robker',
        age: 25,
        shirtSize: 'M',
        birthday: new Date(1996, 4, 13),
      },
      {
        name: 'Micheil Sappell',
        age: 50,
        shirtSize: 'L',
        birthday: new Date(1971, 8, 23),
      },
      {
        name: 'Geoffrey Sprason',
        age: 30,
        shirtSize: 'M',
        birthday: new Date(1991, 11, 5),
      },
      {
        name: 'Grissel Rounsefull',
        age: 21,
        shirtSize: 'S',
        birthday: new Date(2000, 6, 30),
      },
    ],
    []
  );

  const columns = React.useMemo(
    () => [asTextColumn('name'), asNumberColumn('age'), asCategoricalColumn('shirtSize'), asDateColumn('birthday')],
    []
  );

  const features = React.useMemo(() => featureDefault(), []);

  return <LineUpLite data={data} columns={columns} features={features} />;
}

Dev Environment

npm i -g yarn
yarn set version berry
yarn plugin import version
yarn plugin import workspace-tools
cat .yarnrc_patch.yml >> .yarnrc.yml
yarn install
yarn pnpify --sdk vscode

Commands

yarn clear
yarn build
yarn test
yarn lint
yarn fix
yarn watch ... compiles and watches table/components/hooks
yarn start ... starts playground

Release

Release-it is used:

yarn release

Release Policy

to simplify this monorepo together with its siblings the following strategy for versioning is used: Major and Minor versions should be in sync. Patch version are independent except the 10 potent. Thus, a next unified patch release should be increased to the next 10 potent.

Privacy Policy

LineUp-lite is a client only library. The library or any of its integrations doesn't track you or transfers your data to any server.

License / Terms of Service

This library is released under the MPL-2.0 license.

sgratzl/lineup-lite