Fix bug where setting the style prop on a data grid cell causes colum…

…n resizing to fail, and add a test for this.

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<DataGridCellProps>({
@@ -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(
+      <DataGridContextProvider value={ctx}>
+        <DataGridCell style={{color: 'red', minWidth: 'unset'}}>Default DataGridCell</DataGridCell>
+      </DataGridContextProvider>,
+    );
+    const cell = getByRole('gridcell');
+    expect(cell).toHaveProperty('style.color', 'red');
+    expect(cell).toHaveProperty('style.width', '100px');
+    expect(cell).toHaveProperty('style.minWidth', 'unset');
+  });
 });

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,
   );