Update IndexesTable

Author: kraenhansen

packages/compass-indexes/src/components/indexes-table/indexes-table.tsx

@@ -99,13 +99,11 @@ export function IndexesTable<T>({
     `${id}-sorting-state`,
     []
   );
-  const tableContainerRef = React.useRef<HTMLDivElement>(null);
   const table = useLeafyGreenTable<T>({
-    containerRef: tableContainerRef,
     data,
     columns,
-    enableExpanding: true,
     enableSortingRemoval: false,
+    withPagination: false,
     state: { sorting },
     onSortingChange: setSorting,
   });
@@ -120,7 +118,6 @@ export function IndexesTable<T>({
         className={tableStyles}
         data-testid={`${dataTestId}-list`}
         table={table}
-        ref={tableContainerRef}
       >
         <TableHead
           isSticky
@@ -147,26 +144,30 @@ export function IndexesTable<T>({
           ))}
         </TableHead>
         <TableBody>
-          {rows.map((row: LeafyGreenTableRow<T>) => {
-            return (
+          {rows.map((row: LeafyGreenTableRow<T>) =>
+            row.isExpandedContent ? (
+              <ExpandedContent key={row.id} row={row} />
+            ) : (
               <Row
-                className={rowStyles}
                 key={row.id}
                 row={row}
+                className={rowStyles}
                 data-testid={`${dataTestId}-row-${
                   (row.original as { name?: string }).name ?? row.id
                 }`}
               >
                 {row.getVisibleCells().map((cell: LeafyGreenTableCell<T>) => {
                   return (
                     <Cell
+                      key={cell.id}
+                      id={cell.id}
+                      cell={cell}
                       className={cx(
                         cell.column.id === 'actions' && indexActionsCellStyles,
                         cell.column.id === 'actions' &&
                           indexActionsCellClassName
                       )}
                       data-testid={`${dataTestId}-${cell.column.id}-field`}
-                      key={cell.id}
                     >
                       {flexRender(
                         cell.column.columnDef.cell,
@@ -175,13 +176,9 @@ export function IndexesTable<T>({
                     </Cell>
                   );
                 })}
-
-                {row.original.renderExpandedContent && (
-                  <ExpandedContent row={row} />
-                )}
               </Row>
-            );
-          })}
+            )
+          )}
         </TableBody>
       </Table>
     </div>