diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 9e9c284c5f89..0099518920bd 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -2000,7 +2000,8 @@ Map { }, }, "TableCell": Object { - "displayName": "TableCell", + "$$typeof": Symbol(react.forward_ref), + "render": [Function], }, "TableContainer": Object { "propTypes": Object { @@ -8016,7 +8017,8 @@ Map { }, }, "TableCell" => Object { - "displayName": "TableCell", + "$$typeof": Symbol(react.forward_ref), + "render": [Function], }, "TableContainer" => Object { "propTypes": Object { diff --git a/packages/react/src/components/DataTable/TableCell.tsx b/packages/react/src/components/DataTable/TableCell.tsx index 426e928f542e..1046bd770d2d 100644 --- a/packages/react/src/components/DataTable/TableCell.tsx +++ b/packages/react/src/components/DataTable/TableCell.tsx @@ -37,27 +37,24 @@ interface TableCellProps extends ReactAttr { headers?: string; } -const TableCell = ({ - children, - className, - hasSlugHeader, - colSpan, - ...rest -}: TableCellProps) => { - const prefix = usePrefix(); - - const tableCellClassNames = classNames(className, { - [`${prefix}--table-cell--column-slug`]: hasSlugHeader, - }); - return ( - - {children} - - ); -}; +const TableCell = React.forwardRef( + ({ children, className, hasSlugHeader, colSpan, ...rest }, ref) => { + const prefix = usePrefix(); + + const tableCellClassNames = classNames(className, { + [`${prefix}--table-cell--column-slug`]: hasSlugHeader, + }); + return ( + + {children} + + ); + } +); TableCell.displayName = 'TableCell'; export default TableCell; diff --git a/packages/react/src/components/DataTable/__tests__/TableCell-test.js b/packages/react/src/components/DataTable/__tests__/TableCell-test.js index bbf1faee5422..bb812181be9d 100644 --- a/packages/react/src/components/DataTable/__tests__/TableCell-test.js +++ b/packages/react/src/components/DataTable/__tests__/TableCell-test.js @@ -38,4 +38,24 @@ describe('TableCell', () => { 'test' ); }); + + it('should forward refs to the rendered cell element', () => { + let td = null; + const ref = jest.fn((node) => { + td = node; + }); + const { container } = render( + + + + + + +
+ ); + expect(ref).toHaveBeenCalled(); + expect(td).not.toBeNull(); + expect(td).toEqual(container.querySelector('td')); + expect(td).toHaveClass('custom-class'); + }); });