useRowSelectColumn

The useRowSelectColumn react-table plugin hook injects a new column at the beginning showing checkboxes to select rows. This hook depends on the useRowSelect hook from react-table. For grouped rows the checkbox selects the whole group.

In addition, it supports a range selection similar to GMail by using the shift key. Clicking on a checkbox while pressing the shift key will automatically select all rows before this row till it either reaches the first row or a already selected row.

Live Editor

// import { useTable, useRowSelect } from 'react-table'; // import { useRowSelectColumn } 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, }, useRowSelect, useRowSelectColumn ); // Render the UI for your table return ( <table {...getTableProps()}> <thead> {headerGroups.map((headerGroup) => ( <tr {...headerGroup.getHeaderGroupProps()}> {headerGroup.headers.map((column) => ( <th {...column.getHeaderProps()}> {column.render('Header')} {column.id === 'selection' && column.render('Summary')} </th> ))} </tr> ))} </thead> <tbody {...getTableBodyProps()}> {rows.map((row, i) => { prepareRow(row); return ( <tr {...row.getRowProps()}> {row.cells.map((cell) => { return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>; })} </tr> ); })} </tbody> </table> ); }

// import { useTable, useRowSelect } from 'react-table';
// import { useRowSelectColumn } 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,
    },
    useRowSelect,
    useRowSelectColumn
  );

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>
                {column.render('Header')}
                {column.id === 'selection' && column.render('Summary')}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

Result

Loading...