Last selected row state in ColumnDef

[senbonsakura]

I've created a plug-in ColumnDef for shift+click selecting multiple rows. I couldn't find any proper way to hold last selected row state in the api. As this is not a proper react component I can't use state. To hack this I pushed last clicked column into column meta. But this is not the intended way column meta is used. Is there any better method that I can use?

const SelectColumn: ColumnDef<never> = {
  footer: null,
  id: "selected",
  enableGrouping: false,
  enableSorting: false,

  header: ({ table, column }) => (
    <CheckBox
      {...{
        checked: table.getIsAllRowsSelected(),
        indeterminate: table.getIsSomeRowsSelected(),
        onChange: table.getToggleAllPageRowsSelectedHandler(),
      }}
    />
  ),
  aggregatedCell: ({ row }) => (
    <CheckBox
      className="ml-1"
      {...{
        checked: row.getIsSelected(),
        indeterminate: row.getIsSomeSelected(),
        onChange: row.getToggleSelectedHandler(),
      }}
    />
  ),
  cell: ({ row, table, column }) => (
    <CheckBox
      className="ml-2"
      {...{
        checked: row.getIsSelected(),
        indeterminate: row.getIsSomeSelected(),
        onChange: (event: React.KeyboardEvent<HTMLInputElement>) => {
          const lastSelectedRow = column.columnDef.meta.lastSelectedRow;
          const { shiftKey } = event.nativeEvent;
          const checked = event.currentTarget.checked;
          if (shiftKey) {
            const start = lastSelectedRow?.id || 0;
            const end = row.id;
            const selectedRowArr = checked
              ? table.getRowModel().rows
              : [...table.getRowModel().rows, lastSelectedRow];
            const startIndex = selectedRowArr.findIndex(
              (row) => row.id === start
            );
            const endIndex = selectedRowArr.findIndex((row) => row.id === end);
            const slice = [startIndex, endIndex].sort((a, b) => a - b);

            const selectedRows = selectedRowArr
              .slice(slice[0] < 0 ? 0 : slice[0], slice[1] + 1)
              .reduce((acc, row) => {
                //acc[row.id] = true;
                //return acc;
                return [...acc, row.id];
              }, []);
            const preSelectedRows = Object.keys(table.getState().rowSelection);

            let difference;
            if (!checked) {
              difference = preSelectedRows
                .filter((x) => !selectedRows.includes(x))
                .concat(
                  selectedRows.filter((x) => !preSelectedRows.includes(x))
                )
                .filter((x) => x !== start);
            } else {
              difference = [...preSelectedRows, ...selectedRows];
            }
            const differenceObject = difference.reduce((acc, row) => {
              acc[row] = true;
              return acc;
            }, {});
            table.setRowSelection(differenceObject);
          } else {
            row.getToggleSelectedHandler()(event);
          }
          column.columnDef.meta.lastSelectedRow = row;
        },
      }}
    />
  ),
};

[chiptus]

@senbonsakura

I wrote something like this:

createSelectColumn.tsx

import { ColumnDef, Row } from '@tanstack/react-table';

import { Checkbox } from '@@/form-components/Checkbox';

export function createSelectColumn<T>(): ColumnDef<T> {
  let lastSelectedId = '';

  return {
    id: 'select',
    header: ({ table }) => (
      <Checkbox
        id="select-all"
        checked={table.getIsAllRowsSelected()}
        indeterminate={table.getIsSomeRowsSelected()}
        onChange={table.getToggleAllRowsSelectedHandler()}
      />
    ),
    cell: ({ row, table }) => (
      <Checkbox
        id={`select-row-${row.id}`}
        checked={row.getIsSelected()}
        indeterminate={row.getIsSomeSelected()}
        onChange={row.getToggleSelectedHandler()}
        onClick={(e) => {
          if (e.shiftKey) {
            const { rows, rowsById } = table.getRowModel();
            const rowsToToggle = getRowRange(rows, row.id, lastSelectedId);
            const isLastSelected = rowsById[lastSelectedId].getIsSelected();
            rowsToToggle.forEach((row) => row.toggleSelected(isLastSelected));
          }

          lastSelectedId = row.id;
        }}
      />
    ),
    meta: {
      width: 50,
    },
  };
}

function getRowRange<T>(rows: Array<Row<T>>, idA: string, idB: string) {
  const range: Array<Row<T>> = [];
  let foundStart = false;
  let foundEnd = false;
  for (let index = 0; index < rows.length; index += 1) {
    const row = rows[index];
    if (row.id === idA || row.id === idB) {
      if (foundStart) {
        foundEnd = true;
      }
      if (!foundStart) {
        foundStart = true;
      }
    }

    if (foundStart) {
      range.push(row);
    }

    if (foundEnd) {
      break;
    }
  }

  return range;
}

and the way I use it is to call it when I'm defining the table column:

const columns = [
   createSelectColumn<RowData>(),
   nameColumn,...
]