useRowRankColumn

The useRowRankColumn react-table plugin hook injects a new column at the beginning showing the current rank of the row. For grouped rows the column indicates the rank range (first rank ... last rank) contained in this group.

Live Editor

// import { useTable } from 'react-table'; // import { useRowRankColumn } from '@lineup-lite/hooks'; function Table() { 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', }, ], [] ); const columns = React.useMemo( () => [ { Header: 'Name', accessor: 'name', }, { Header: 'Age', accessor: 'age', }, { Header: 'Shirt Size', accessor: 'shirtSize', }, ], [] ); // Use the state and functions returned from useTable to build your UI const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable( { columns, data, }, useGroupBy, useExpanded, useRowRankColumn ); // 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 { useRowRankColumn } from '@lineup-lite/hooks';

function Table() {
  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',
      },
    ],
    []
  );

  const columns = React.useMemo(
    () => [
      {
        Header: 'Name',
        accessor: 'name',
      },
      {
        Header: 'Age',
        accessor: 'age',
      },
      {
        Header: 'Shirt Size',
        accessor: 'shirtSize',
      },
    ],
    []
  );

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

  // 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
1.	Panchito Green	10	S
2.	Rubia Robker	25	M
3.	Micheil Sappell	50	L
4.	Geoffrey Sprason	30	M
5.	Grissel Rounsefull	21	S