diff --git a/packages/synapse-react-client/src/components/TanStackTable/TableBody.tsx b/packages/synapse-react-client/src/components/TanStackTable/TableBody.tsx index 5b3e5e9f31..f0eed577e6 100644 --- a/packages/synapse-react-client/src/components/TanStackTable/TableBody.tsx +++ b/packages/synapse-react-client/src/components/TanStackTable/TableBody.tsx @@ -1,3 +1,4 @@ +import { styled } from '@mui/material' import { Cell, Row, Table } from '@tanstack/react-table' import { identity } from 'lodash-es' import { memo } from 'react' @@ -72,6 +73,11 @@ type TableBodyPropsRowOverride< 'rows' | 'rowTransform' > +// Simple wrapper around 'tr' to prevent forwarding invalid HTML attributes +const TableRow = styled('tr', { + shouldForwardProp: prop => prop !== 'row' && prop !== 'tableRow', +})({}) + export type TableBodyProps> = { /** The table instance */ table: Table @@ -98,7 +104,7 @@ export function TableBody>( const { Tbody = 'tbody', - Tr = 'tr', + Tr = TableRow, TableCellRenderer = DefaultTableCellRenderer, } = slots const { Tbody: tbodySlotProps = {}, Tr: _trSlotProps = {} } = slotProps