feat!: replace getRowTrProps with render prop renderRowTr

src/components/logger/FifoLoggerDialog.tsx

@@ -7,11 +7,7 @@ import type { LogEntry } from 'fifo-logger';
 import { CSSProperties, useMemo } from 'react';
 
 import { Button } from '../button';
-import {
-  createTableColumnHelper,
-  Table,
-  type TableRowTrPropsGetter,
-} from '../table';
+import { createTableColumnHelper, Table } from '../table';
 
 import { useFifoLogger } from './useFifoLogger';
 
@@ -79,14 +75,6 @@ function useColumns(unseen: number) {
   );
 }
 
-const getRowTrProps: TableRowTrPropsGetter<LogEntry> = (row) => {
-  return {
-    style: {
-      backgroundColor: rowBackgroundColor[row.original.levelLabel],
-    },
-  };
-};
-
 export function FifoLoggerDialog(props: FifoLoggerDialogProps) {
   const logger = useFifoLogger();
 
@@ -113,7 +101,15 @@ export function FifoLoggerDialog(props: FifoLoggerDialogProps) {
           compact
           bordered
           tableProps={{ style: { width: '100%' } }}
-          getRowTrProps={getRowTrProps}
+          renderRowTr={({ row, children }) => (
+            <tr
+              style={{
+                backgroundColor: rowBackgroundColor[row.original.levelLabel],
+              }}
+            >
+              {children}
+            </tr>
+          )}
         />
       </DialogBody>
       <DialogFooter

src/components/table/table_body.tsx

@@ -1,31 +1,37 @@
 import type { Row, RowData } from '@tanstack/react-table';
-import type { HTMLAttributes } from 'react';
+import { Fragment } from 'react';
 
-import { TableRow } from './table_row';
 import { TableRowCell } from './table_row_cell';
-import type { TableRowTrPropsGetter } from './table_utils';
-
-export type TrPropsGetter = Omit<
-  HTMLAttributes<HTMLTableRowElement>,
-  'children'
->;
+import type {
+  TableRowTrRenderer,
+  TableRowTrRendererProps,
+} from './table_utils';
 
 interface TableBodyProps<TData extends RowData> {
   rows: Array<Row<TData>>;
-  getRowTrProps?: TableRowTrPropsGetter<TData>;
+  renderRowTr: TableRowTrRenderer<TData> | undefined;
 }
 
 export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
-  const { rows, getRowTrProps } = props;
+  const { rows, renderRowTr = defaultRenderRowTr } = props;
   return (
     <tbody>
       {rows.map((row) => (
-        <TableRow key={row.id} trProps={getRowTrProps?.(row)}>
-          {row.getVisibleCells().map((cell) => (
-            <TableRowCell key={cell.id} cell={cell} />
-          ))}
-        </TableRow>
+        <Fragment key={row.id}>
+          {renderRowTr({
+            row,
+            children: row
+              .getVisibleCells()
+              .map((cell) => <TableRowCell key={cell.id} cell={cell} />),
+          })}
+        </Fragment>
       ))}
     </tbody>
   );
 }
+
+function defaultRenderRowTr<TData extends RowData>(
+  props: TableRowTrRendererProps<TData>,
+) {
+  return <tr>{props.children}</tr>;
+}

src/components/table/table_header.tsx

@@ -2,7 +2,6 @@ import type { Header, RowData } from '@tanstack/react-table';
 import { CSSProperties } from 'react';
 
 import { TableHeaderCell } from './table_header_cell';
-import { TableRow } from './table_row';
 
 const headerStyle: CSSProperties = {
   position: 'sticky',
@@ -22,11 +21,11 @@ export function TableHeader<TData extends RowData>(
   const { headers, sticky } = props;
   return (
     <thead style={sticky ? headerStyle : undefined}>
-      <TableRow>
+      <tr>
         {headers.map((header) => (
           <TableHeaderCell key={header.id} header={header} />
         ))}
-      </TableRow>
+      </tr>
     </thead>
   );
 }

src/components/table/table_root.tsx

@@ -12,7 +12,7 @@ import { TableHTMLAttributes } from 'react';
 
 import { TableBody } from './table_body';
 import { TableHeader } from './table_header';
-import type { TableColumnDef, TableRowTrPropsGetter } from './table_utils';
+import type { TableColumnDef, TableRowTrRenderer } from './table_utils';
 import { useTableColumns } from './use_table_columns';
 
 export interface TableProps<TData extends RowData> {
@@ -31,7 +31,7 @@ export interface TableProps<TData extends RowData> {
     'data' | 'columns' | 'getCoreRowModel' | 'getSortedRowModel'
   >;
   tableProps?: Omit<TableHTMLAttributes<HTMLTableElement>, 'children'>;
-  getRowTrProps?: TableRowTrPropsGetter<TData>;
+  renderRowTr?: TableRowTrRenderer<TData>;
 }
 
 export function Table<TData extends RowData>(props: TableProps<TData>) {
@@ -47,7 +47,7 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
 
     reactTable,
     tableProps,
-    getRowTrProps,
+    renderRowTr,
   } = props;
 
   const columnDefs = useTableColumns(columns);
@@ -68,10 +68,7 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
       {...tableProps}
     >
       <TableHeader sticky={stickyHeader} headers={table.getFlatHeaders()} />
-      <TableBody
-        rows={table.getRowModel().rows}
-        getRowTrProps={getRowTrProps}
-      />
+      <TableBody rows={table.getRowModel().rows} renderRowTr={renderRowTr} />
     </HTMLTable>
   );
 }

src/components/table/table_utils.ts

@@ -4,8 +4,7 @@ import {
   type Row,
   type RowData,
 } from '@tanstack/react-table';
-
-import type { TrProps } from './table_row';
+import type { ReactNode } from 'react';
 
 export type TableColumnDef<TData extends RowData, TValue = unknown> = ColumnDef<
   TData,
@@ -16,6 +15,10 @@ export function createTableColumnHelper<TData extends RowData>() {
   return createColumnHelper<TData>();
 }
 
-export type TableRowTrPropsGetter<TData extends RowData> = (
-  row: Row<TData>,
-) => TrProps;
+export interface TableRowTrRendererProps<TData extends RowData> {
+  row: Row<TData>;
+  children: ReactNode;
+}
+export type TableRowTrRenderer<TData extends RowData> = (
+  props: TableRowTrRendererProps<TData>,
+) => ReactNode;