Fix column id check in DefaultCell (#2218)

iTwin · Sep 6, 2024 · 06f08f7 · 06f08f7
1 parent 547c780
commit 06f08f7
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 12 deletions.
diff --git a/.changeset/happy-badgers-move.md b/.changeset/happy-badgers-move.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Fix `Table` cell not taking full width when custom `Cell` implementation is passed.
diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx
@@ -3994,3 +3994,42 @@ it('should pass custom props to different parts of Table', () => {
   expect(emptyTableContent).toBeTruthy();
   expect(emptyTableContent.style.fontSize).toBe('12px');
 });
+
+it('should apply clamp, if cell is string value and no custom Cell is rendered', () => {
+  const data = [{ name: 'name' }];
+  const columns: Column<TestDataType>[] = [
+    {
+      Header: 'Name',
+      accessor: 'name',
+      cellClassName: 'test-cell',
+    },
+  ];
+  const { container } = renderComponent({
+    columns,
+    data,
+  });
+  const host = container.querySelector('.test-cell');
+  expect(host?.shadowRoot).toBeTruthy();
+  const lineClamp = host?.shadowRoot?.querySelector('div');
+  expect(lineClamp).toBeTruthy();
+});
+
+it('should not apply clamp, if custom Cell is used', () => {
+  const data = [{ name: 'name' }];
+  const columns: Column<TestDataType>[] = [
+    {
+      Header: 'Name',
+      accessor: 'name',
+      cellClassName: 'test-cell',
+      Cell: () => 'my custom content',
+    },
+  ];
+  const { container } = renderComponent({
+    columns,
+    data,
+  });
+  const host = container.querySelector('.test-cell');
+  expect(host?.shadowRoot).toBeTruthy();
+  const lineClamp = host?.shadowRoot?.querySelector('div');
+  expect(lineClamp).toBeNull();
+});
diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx
@@ -25,6 +25,7 @@ import type {
   ActionType,
   TableInstance,
   Column,
+  ColumnInstance,
 } from '../../react-table/react-table.js';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import {
@@ -906,9 +907,7 @@ export const Table = <
   }, []);
 
   return (
-    <TableColumnsContext.Provider
-      value={columns as Column<Record<string, unknown>>[]}
-    >
+    <TableColumnsContext.Provider value={instance.columns as ColumnInstance[]}>
       <Box
         ref={useMergedRefs<HTMLDivElement>(
           tableRef,

diff --git a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx
@@ -3,6 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
+import { defaultColumn } from 'react-table';
 import type { CellRendererProps } from '../../../react-table/react-table.js';
 import cx from 'classnames';
 import { Box, LineClamp, ShadowRoot } from '../../../utils/index.js';
@@ -45,13 +46,12 @@ export type DefaultCellProps<T extends Record<string, unknown>> = {
 export const DefaultCell = <T extends Record<string, unknown>>(
   props: DefaultCellProps<T>,
 ) => {
-  const columnsProp = React.useContext(TableColumnsContext);
+  const instanceColumns = React.useContext(TableColumnsContext);
   const isCustomCell = React.useMemo(
     () =>
-      columnsProp
-        .find(({ id }) => props.cellProps.column.id === id)
-        ?.hasOwnProperty('Cell'),
-    [props.cellProps.column.id, columnsProp],
+      instanceColumns.find(({ id }) => props.cellProps.column.id === id)
+        ?.Cell !== defaultColumn.Cell,
+    [instanceColumns, props.cellProps.column.id],
   );
 
   const {

diff --git a/packages/itwinui-react/src/core/Table/utils.ts b/packages/itwinui-react/src/core/Table/utils.ts
@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import type { ColumnInstance, Column } from '../../react-table/react-table.js';
+import type { ColumnInstance } from '../../react-table/react-table.js';
 
 export const getCellStyle = <T extends Record<string, unknown>>(
   column: ColumnInstance<T>,
@@ -82,6 +82,4 @@ export const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
   } satisfies React.CSSProperties;
 };
 
-export const TableColumnsContext = React.createContext<
-  Column<Record<string, unknown>>[]
->([]);
+export const TableColumnsContext = React.createContext<ColumnInstance[]>([]);