@itwin/itwinui-react/esm/core/Table/columns/selectionColumn.js

A react component library for iTwinUI

import * as React from 'react';
import { Checkbox } from '../../Checkbox/Checkbox.js';
import { DefaultCell } from '../cells/index.js';
import { iuiId } from '../Table.js';
export const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
export const SelectionColumn = (props = {}) => {
  let { isDisabled, density } = props;
  let densityWidth =
    'condensed' === density ? 42 : 'extra-condensed' === density ? 34 : 48;
  return {
    id: SELECTION_CELL_ID,
    disableResizing: true,
    disableGroupBy: true,
    disableReordering: true,
    minWidth: densityWidth,
    width: densityWidth,
    maxWidth: densityWidth,
    columnClassName: 'iui-slot',
    cellClassName: 'iui-slot',
    Header: ({
      getToggleAllRowsSelectedProps,
      toggleAllRowsSelected,
      rows,
      preFilteredFlatRows,
      state,
    }) => {
      let disabled = preFilteredFlatRows.every((row) =>
        isDisabled?.(row.original),
      );
      let checked = preFilteredFlatRows.every(
        (row) => state.selectedRowIds[row.id] || isDisabled?.(row.original),
      );
      let indeterminate =
        !checked &&
        Object.keys(state.selectedRowIds).length > 0 &&
        Object.values(state.selectedRowIds).some((v) => true === v);
      let nextToggleState = !rows.some((row) => row.isSelected);
      return React.createElement(Checkbox, {
        ...getToggleAllRowsSelectedProps(),
        style: {},
        title: '',
        checked: checked && !disabled,
        indeterminate: indeterminate,
        disabled: disabled,
        'aria-label': `${nextToggleState ? 'Select' : 'Deselect'} all rows`,
        onChange: () => toggleAllRowsSelected(nextToggleState),
      });
    },
    Cell: ({ row, selectSubRows = true }) =>
      React.createElement(Checkbox, {
        ...row.getToggleRowSelectedProps(),
        style: {},
        title: '',
        disabled: isDisabled?.(row.original),
        onClick: (e) => e.stopPropagation(),
        'aria-label': `${row.isSelected ? 'Deselect' : 'Select'} row`,
        onChange: () => {
          if (
            row.subRows.length > 0 &&
            selectSubRows &&
            void 0 === row.initialSubRows[0].original[iuiId]
          )
            row.toggleRowSelected(
              !row.subRows.every(
                (subRow) => subRow.isSelected || isDisabled?.(subRow.original),
              ),
            );
          else row.toggleRowSelected(!row.isSelected);
        },
      }),
    cellRenderer: (props) =>
      React.createElement(DefaultCell, {
        ...props,
        isDisabled: (rowData) => !!isDisabled?.(rowData),
      }),
  };
};