fix(Table): Fixes headless Table as previously it started to throw an error

packages/iTwinUI-react/src/core/Table/Table.test.tsx

@@ -2880,3 +2880,24 @@ it('should render selectable rows without select column', () => {
   expect(rows[2].classList).not.toContain('iui-selected');
   expect(onRowClick).toHaveBeenCalledTimes(3);
 });
+
+it('should not throw on headless table', () => {
+  const columns: Column<TestDataType>[] = [
+    {
+      id: 'name',
+      Header: 'Name',
+      accessor: 'name',
+    },
+    {
+      id: 'description',
+      Header: 'Description',
+      accessor: 'description',
+    },
+  ];
+  const { container } = renderComponent({
+    columns,
+  });
+
+  expect(container.querySelector('.iui-table-header .iui-row')).toBeFalsy();
+  expect(container.querySelector('.iui-table-body')).toBeTruthy();
+});

packages/iTwinUI-react/src/core/Table/Table.tsx

@@ -244,6 +244,23 @@ export type TableProps<
   enableColumnReordering?: boolean;
 } & Omit<CommonProps, 'title'>;
 
+// Original type for some reason is missing sub-columns
+type ColumnType<
+  T extends Record<string, unknown> = Record<string, unknown>
+> = Column<T> & {
+  columns: ColumnType[];
+};
+const flattenColumns = (columns: ColumnType[]): ColumnType[] => {
+  const flatColumns: ColumnType[] = [];
+  columns.forEach((column) => {
+    flatColumns.push(column);
+    if (column.columns) {
+      flatColumns.push(...flattenColumns(column.columns));
+    }
+  });
+  return flatColumns;
+};
+
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
  * @example
@@ -351,13 +368,10 @@ export const Table = <
     onRowInViewportRef.current = onRowInViewport;
   }, [onBottomReached, onRowInViewport]);
 
-  // Original type for some reason is missing sub-columns
-  type ColumnType = Column<T> & {
-    columns: Column<T>[];
-  };
-  const hasManualSelectionColumn = (columns as ColumnType[])[0]?.columns.some(
-    (column) => column.id === SELECTION_CELL_ID,
-  );
+  const hasManualSelectionColumn = React.useMemo(() => {
+    const flatColumns = flattenColumns(columns as ColumnType[]);
+    return flatColumns.some((column) => column.id === SELECTION_CELL_ID);
+  }, [columns]);
 
   const tableStateReducer = React.useCallback(
     (

packages/iTwinUI-react/src/core/Table/cells/EditableCell.tsx

@@ -41,7 +41,15 @@ export type EditableCellProps<
 export const EditableCell = <T extends Record<string, unknown>>(
   props: EditableCellProps<T>,
 ) => {
-  const { cellElementProps, cellProps, onCellEdit, children, ...rest } = props;
+  const {
+    cellElementProps,
+    cellProps,
+    onCellEdit,
+    children,
+    isDisabled,
+    ...rest
+  } = props;
+  isDisabled; // To omit and prevent eslint error.
 
   const sanitizeString = (text: string) => {
     return text.replace(/(\r\n|\n|\r)+/gm, ' ');