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

A react component library for iTwinUI

import * as React from 'react';
import { Checkbox } from '../../Checkbox/Checkbox.js';
import { FieldsetBase, SvgColumnManager } from '../../../utils/index.js';
import { IconButton } from '../../Buttons/IconButton.js';
import { tableResizeStartAction } from '../Table.js';
import { SELECTION_CELL_ID } from './selectionColumn.js';
import { EXPANDER_CELL_ID } from './expanderColumn.js';
import { Popover } from '../../Popover/Popover.js';
import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.js';
import { Flex } from '../../Flex/Flex.js';
let ACTION_CELL_ID = 'iui-table-action';
export const ActionColumn = ({ columnManager = false } = {}) => ({
  id: ACTION_CELL_ID,
  disableResizing: true,
  canResize: false,
  disableGroupBy: true,
  minWidth: 48,
  width: 48,
  maxWidth: 48,
  columnClassName: 'iui-slot',
  cellClassName: 'iui-slot',
  disableReordering: true,
  Header: ({ allColumns, dispatch, state }) => {
    let buttonRef = React.useRef(null);
    if (!columnManager) return null;
    let defaultColumnIds = [
      SELECTION_CELL_ID,
      EXPANDER_CELL_ID,
      ACTION_CELL_ID,
    ];
    let headerCheckBoxes = () =>
      allColumns
        .filter(({ id }) => !defaultColumnIds.includes(id))
        .map((column) => {
          let { checked } = column.getToggleHiddenProps();
          let onChange = () => {
            column.toggleHidden(checked);
            if (0 === Object.keys(state.columnResizing.columnWidths).length)
              return;
            dispatch({
              type: tableResizeStartAction,
            });
            queueMicrotask(() => {
              buttonRef.current?.scrollIntoView({
                block: 'nearest',
              });
            });
          };
          return React.createElement(Checkbox, {
            key: column.id,
            checked: checked,
            disabled: column.disableToggleVisibility,
            onChange: onChange,
            label: column.render('Header'),
          });
        });
    let popoverProps =
      'boolean' != typeof columnManager ? columnManager.dropdownMenuProps : {};
    return React.createElement(
      Popover,
      {
        applyBackground: true,
        content: React.createElement(
          Flex,
          {
            as: FieldsetBase,
            className: 'iui-table-column-manager',
            flexDirection: 'column',
            alignItems: 'flex-start',
          },
          React.createElement(
            VisuallyHidden,
            {
              as: 'legend',
            },
            'Show/hide columns',
          ),
          headerCheckBoxes(),
        ),
        ...popoverProps,
      },
      React.createElement(
        IconButton,
        {
          styleType: 'borderless',
          ref: buttonRef,
          label: 'Column manager',
        },
        React.createElement(SvgColumnManager, null),
      ),
    );
  },
});