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

A react component library for iTwinUI

import * as React from 'react';
import { SvgChevronRight } from '../../../utils/index.js';
import { IconButton } from '../../Buttons/IconButton.js';
import { DefaultCell } from '../cells/index.js';
export const EXPANDER_CELL_ID = 'iui-table-expander';
export const ExpanderColumn = (props = {}) => {
  let { subComponent, isDisabled } = props;
  return {
    id: EXPANDER_CELL_ID,
    disableResizing: true,
    disableGroupBy: true,
    disableReordering: true,
    minWidth: 48,
    width: 48,
    maxWidth: 48,
    columnClassName: 'iui-slot',
    cellClassName: 'iui-slot',
    Cell: (props) => {
      let { row } = props;
      if (!subComponent?.(row)) return null;
      return React.createElement(
        IconButton,
        {
          'aria-label': 'Toggle expandable content',
          className: 'iui-table-row-expander',
          styleType: 'borderless',
          size: 'small',
          onClick: (e) => {
            e.stopPropagation();
            row.toggleRowExpanded();
          },
          disabled: isDisabled?.(props.row.original),
          'aria-expanded': row.isExpanded,
        },
        React.createElement(SvgChevronRight, null),
      );
    },
    cellRenderer: (props) =>
      React.createElement(DefaultCell, {
        ...props,
        isDisabled: (rowData) => !!isDisabled?.(rowData),
      }),
  };
};