fix: one tbody for all

Author: astandrik

src/components/PaginatedTable/PaginatedTable.tsx

@@ -183,11 +183,9 @@ export const PaginatedTable = <T, F>({
 
                 // Render merged empty tbody for consecutive inactive chunks
                 chunks.push(
-                    <tbody key={`merged-${startIndex}-${i - 1}`}>
-                        <tr style={{height: `${totalHeight}px`}}>
-                            <td colSpan={columns.length} style={{padding: 0, border: 'none'}} />
-                        </tr>
-                    </tbody>,
+                    <tr style={{height: `${totalHeight}px`}} key={`merged-${startIndex}-${i - 1}`}>
+                        <td colSpan={columns.length} style={{padding: 0, border: 'none'}} />
+                    </tr>,
                 );
             }
         }
@@ -198,7 +196,7 @@ export const PaginatedTable = <T, F>({
     const renderTable = () => (
         <table className={b('table')}>
             <TableHead columns={columns} onSort={setSortParams} onColumnsResize={onColumnsResize} />
-            {renderChunks()}
+            <tbody>{renderChunks()}</tbody>
         </table>
     );
 

src/components/PaginatedTable/TableChunk.tsx

@@ -112,15 +112,11 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     const dataLength = currentData?.data?.length || calculatedCount;
 
     const renderContent = () => {
-        if (!shouldRender) {
-            return null;
-        }
-
         if (!currentData) {
             if (error) {
                 const errorData = error as IResponseError;
                 return (
-                    <EmptyTableRow columns={columns}>
+                    <EmptyTableRow columns={columns} height={dataLength * rowHeight}>
                         {renderErrorMessage ? (
                             renderErrorMessage(errorData)
                         ) : (
@@ -138,7 +134,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
         // Data is loaded, but there are no entities in the chunk
         if (!currentData.data?.length) {
             return (
-                <EmptyTableRow columns={columns}>
+                <EmptyTableRow columns={columns} height={dataLength * rowHeight}>
                     {renderEmptyDataMessage ? renderEmptyDataMessage() : i18n('empty')}
                 </EmptyTableRow>
             );
@@ -155,21 +151,11 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
         ));
     };
 
-    return (
-        <tbody
-            id={id.toString()}
-            style={{
-                height: `${dataLength * rowHeight}px`,
-                display: 'table-row-group',
-            }}
-        >
-            {shouldRender ? (
-                renderContent()
-            ) : (
-                <tr style={{height: `${dataLength * rowHeight}px`}}>
-                    <td colSpan={columns.length} style={{padding: 0, border: 'none'}} />
-                </tr>
-            )}
-        </tbody>
+    return shouldRender ? (
+        renderContent()
+    ) : (
+        <tr style={{height: `${dataLength * rowHeight}px`}}>
+            <td colSpan={columns.length} style={{padding: 0, border: 'none'}} />
+        </tr>
     );
 });

src/components/PaginatedTable/TableRow.tsx

@@ -44,7 +44,7 @@ interface LoadingTableRowProps<T> {
 
 export const LoadingTableRow = typedMemo(function <T>({columns, height}: LoadingTableRowProps<T>) {
     return (
-        <tr className={b('row', {loading: true})}>
+        <tr className={b('row', {loading: true})} style={{height}}>
             {columns.map((column) => {
                 const resizeable = column.resizeable ?? DEFAULT_RESIZEABLE;
 
@@ -79,7 +79,7 @@ export const TableRow = <T,>({row, columns, getRowClassName, height}: TableRowPr
     const additionalClassName = getRowClassName?.(row);
 
     return (
-        <tr className={b('row', additionalClassName)}>
+        <tr className={b('row', additionalClassName)} style={{height}}>
             {columns.map((column) => {
                 const resizeable = column.resizeable ?? DEFAULT_RESIZEABLE;
 
@@ -103,11 +103,12 @@ export const TableRow = <T,>({row, columns, getRowClassName, height}: TableRowPr
 interface EmptyTableRowProps<T> {
     columns: Column<T>[];
     children?: React.ReactNode;
+    height: number;
 }
 
-export const EmptyTableRow = <T,>({columns, children}: EmptyTableRowProps<T>) => {
+export const EmptyTableRow = <T,>({columns, children, height}: EmptyTableRowProps<T>) => {
     return (
-        <tr className={b('row', {empty: true})}>
+        <tr className={b('row', {empty: true})} style={{height}}>
             <td colSpan={columns.length} className={b('td')}>
                 {children}
             </td>