Side Panel

LineUp-lite ships with an LineUpLitePanel component. The side panel is usually rendered next to the LineUp-lite table and shows a summary of the displayed rows including a vertical representation of all shown columns.

In order to LineUpLitePanel to work, both LineUpLite and LineUpLitePanel component has to be under the same LineUpLiteStateContextProvider. This component will be updated with the current react-table instance and state and is used to synchronize the both compnents.

Live Editor

// import React from 'react'; // import LineUpLite, { // asTextColumn, // asNumberColumn, // asCategoricalColumn, // LineUpLiteColumn, // featureDefault, // LineUpLiteStateContextProvider, // LineUpLitePanel, // } from '@lineup-lite/table'; // import '@lineup-lite/table/dist/table.css'; function GettingStarted() { 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, }, { name: 'Grissel Rounsefull', age: 21, shirtSize: 'S', }, ], [] ); const columns = React.useMemo( () => [asTextColumn('name'), asNumberColumn('age'), asCategoricalColumn('shirtSize')], [] ); const features = React.useMemo(() => featureDefault(), []); return ( <LineUpLiteStateContextProvider> <div style={{ display: 'flex', minHeight: '25em' }}> <div style={{ flexGrow: 1 }}> <LineUpLite data={data} columns={columns} features={features} /> </div> <LineUpLitePanel style={{ minWidth: '15em' }} /> </div> </LineUpLiteStateContextProvider> ); }

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

function GettingStarted() {
  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,
      },
      {
        name: 'Grissel Rounsefull',
        age: 21,
        shirtSize: 'S',
      },
    ],
    []
  );

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

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

  return (
    <LineUpLiteStateContextProvider>
      <div style={{ display: 'flex', minHeight: '25em' }}>
        <div style={{ flexGrow: 1 }}>
          <LineUpLite data={data} columns={columns} features={features} />
        </div>
        <LineUpLitePanel style={{ minWidth: '15em' }} />
      </div>
    </LineUpLiteStateContextProvider>
  );
}

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

Showing 5 of 5 items

Name

Age

Shirt Size