Hooks Quick Start

Install LineUp-lite Hooks

npm install @lineup-lite/hooks

or

yarn add @lineup-lite/hooks

Live Editor

// import { useTable } from 'react-table'; // import { useRowExpandColumn, useRowRankColumn, useRowSelectColumn } from '@lineup-lite/hooks'; function Table() { 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( () => [ { Header: 'Name', accessor: 'name', }, { Header: 'Age', accessor: 'age', }, { Header: 'Shirt Size', accessor: 'shirtSize', }, { Header: 'Birthday', accessor: (r) => r.birthday.toLocaleString(), }, ], [] ); // Use the state and functions returned from useTable to build your UI const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable( { columns, data, }, useGroupBy, useExpanded, useRowSelect, useRowSelectColumn, useRowRankColumn, useRowExpandColumn ); // Render the UI for your table return ( <table {...getTableProps()}> <thead> {headerGroups.map((headerGroup) => ( <tr {...headerGroup.getHeaderGroupProps()}> {headerGroup.headers.map((column) => ( <th {...column.getHeaderProps()}> {column.canGroupBy ? ( // If the column can be grouped, let's add a toggle <span {...column.getGroupByToggleProps()}>{column.isGrouped ? '🛑 ' : '👊 '}</span> ) : null} {column.render('Header')} </th> ))} </tr> ))} </thead> <tbody {...getTableBodyProps()}> {rows.map((row, i) => { prepareRow(row); return ( <tr {...row.getRowProps()}> {row.cells.map((cell) => { return ( <td {...cell.getCellProps()}> {cell.isGrouped ? ( <> {cell.render('Cell')} ({row.subRows.length}) </> ) : cell.isAggregated ? ( // If the cell is aggregated, use the Aggregated // renderer for cell cell.render('Aggregated') ) : cell.isPlaceholder ? null : ( // For cells with repeated values, render null // Otherwise, just render the regular cell cell.render('Cell') )} </td> ); })} </tr> ); })} </tbody> </table> ); }

// import { useTable } from 'react-table';
// import { useRowExpandColumn, useRowRankColumn, useRowSelectColumn } from '@lineup-lite/hooks';

function Table() {
  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(
    () => [
      {
        Header: 'Name',
        accessor: 'name',
      },
      {
        Header: 'Age',
        accessor: 'age',
      },
      {
        Header: 'Shirt Size',
        accessor: 'shirtSize',
      },
      {
        Header: 'Birthday',
        accessor: (r) => r.birthday.toLocaleString(),
      },
    ],
    []
  );

  // Use the state and functions returned from useTable to build your UI
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
    {
      columns,
      data,
    },
    useGroupBy,
    useExpanded,
    useRowSelect,
    useRowSelectColumn,
    useRowRankColumn,
    useRowExpandColumn
  );

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>
                {column.canGroupBy ? (
                  // If the column can be grouped, let's add a toggle
                  <span {...column.getGroupByToggleProps()}>{column.isGrouped ? '🛑 ' : '👊 '}</span>
                ) : null}
                {column.render('Header')}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return (
                  <td {...cell.getCellProps()}>
                    {cell.isGrouped ? (
                      <>
                        {cell.render('Cell')} ({row.subRows.length})
                      </>
                    ) : cell.isAggregated ? (
                      // If the cell is aggregated, use the Aggregated
                      // renderer for cell
                      cell.render('Aggregated')
                    ) : cell.isPlaceholder ? null : ( // For cells with repeated values, render null
                      // Otherwise, just render the regular cell
                      cell.render('Cell')
                    )}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

Result

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