diff --git a/.changeset/happy-badgers-move.md b/.changeset/happy-badgers-move.md new file mode 100644 index 00000000000..a23e0b5de9b --- /dev/null +++ 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 index eca30911054..a0c98f73d7a 100644 --- 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[] = [ + { + 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[] = [ + { + 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 index db6f65e1dea..2e52d5941d6 100644 --- 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 ( - >[]} - > + ( tableRef, diff --git a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx index 493e5acc9e6..dd36511c7d9 100644 --- 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> = { export const DefaultCell = >( props: DefaultCellProps, ) => { - 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 index 525d6cd760b..8ca35f86048 100644 --- 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 = >( column: ColumnInstance, @@ -82,6 +82,4 @@ export const getSubRowStyle = ({ density = 'default', depth = 1 }) => { } satisfies React.CSSProperties; }; -export const TableColumnsContext = React.createContext< - Column>[] ->([]); +export const TableColumnsContext = React.createContext([]);