diff --git a/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx b/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx index c23ab6932d69a..a73124ff44424 100644 --- a/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx +++ b/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx @@ -5,6 +5,7 @@ import { isConformant } from '../../testing/isConformant'; import { DataGridCellProps } from './DataGridCell.types'; import { DataGridContextProvider } from '../../contexts/dataGridContext'; import { mockDataGridContext } from '../../testing/mockDataGridContext'; +import {defaultColumnSizingState} from "../../hooks"; describe('DataGridCell', () => { isConformant({ @@ -65,4 +66,26 @@ describe('DataGridCell', () => { expect(row.tabIndex).toBe(-1); expect(row.hasAttribute('tabindex')).toBe(false); }); + + it('should merge column sizing styles when a style prop is provided', () => { + const ctx = mockDataGridContext({ + resizableColumns: true, + // eslint-disable-next-line @typescript-eslint/naming-convention + columnSizing_unstable: { + ...defaultColumnSizingState, + getTableCellProps: ()=> ({ + style: { width: 100, minWidth: 100 }, + }) + } + }); + const {getByRole} = render( + + Default DataGridCell + , + ); + const cell = getByRole('gridcell'); + expect(cell).toHaveProperty('style.color', 'red'); + expect(cell).toHaveProperty('style.width', '100px'); + expect(cell).toHaveProperty('style.minWidth', 'unset'); + }); }); diff --git a/packages/react-components/react-table/library/src/components/DataGridCell/useDataGridCell.ts b/packages/react-components/react-table/library/src/components/DataGridCell/useDataGridCell.ts index 4cd7facddb251..74751b80a145e 100644 --- a/packages/react-components/react-table/library/src/components/DataGridCell/useDataGridCell.ts +++ b/packages/react-components/react-table/library/src/components/DataGridCell/useDataGridCell.ts @@ -25,6 +25,10 @@ export const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Re return ctx.columnSizing_unstable.getTableCellProps; }); const focusableGroupAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' }); + const style = { + ...(resizableColumns ? getTableCellProps(columnId).style : {}), + ...(props.style || {}), + }; return useTableCell_unstable( { as: 'div', @@ -33,6 +37,7 @@ export const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Re tabIndex: tabbable ? 0 : undefined, ...(resizableColumns ? getTableCellProps(columnId) : {}), ...props, + style, }, ref, );