@multiplatform.one/table 7.34.4 → 7.36.0

package/dist/esm/components/DataTable/DataTableRoot.mjs

@@ -2,10 +2,10 @@ import { CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpDownIcon, PlusIcon
 import { Button, Checkbox, Field, useFormField } from "@multiplatform.one/forms";
 import { flexRender } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, sizeTokenBelow, useResolvedKnobs, Surface } from "@multiplatform.one/theme";
 import React, { useEffect, useRef, useMemo, useCallback, useState } from "react";
 import { AsyncBoundary, EmptyState, Tooltip, useDirection } from "@multiplatform.one/components";
-import { Text, View, isWeb, useMedia } from "tamagui";
+import { SizableText, Text, View, isWeb, useMedia } from "tamagui";
 import { useTranslation } from "react-i18next";
 import { useDataTable } from "../../hooks/useDataTable.mjs";
 import { useDragScroll } from "../../hooks/useDragScroll.mjs";
@@ -111,7 +111,6 @@ function DataTableRoot({
   renderFilters: _renderFilters,
   className,
   size,
-  compact = false,
   disabled = false,
   accent,
   error,
@@ -147,7 +146,7 @@ function DataTableRoot({
   } = useResolvedKnobs({
     intent,
     component: "DataTable",
-    compact
+    size
   });
   const chrome = dataTableChrome(String(knobProps.sizeToken));
   const rowHeightPx = chrome.rowPx;
@@ -220,8 +219,9 @@ function DataTableRoot({
       table.toggleAllPageRowsSelected();
     }
   }, [selectAllScope, table]);
-  const resolvedSize = size ?? (knobProps.sizeToken === "$3" ? "sm" : knobProps.sizeToken === "$5" ? "lg" : "md");
-  const cellHeight = resolvedSize === "sm" ? "$3" : resolvedSize === "lg" ? "$5" : "$4";
+  const resolvedSize = knobProps.sizeToken;
+  const cellHeight = resolvedSize;
+  const cellSize = sizeTokenBelow(resolvedSize);
   const headerGroups = table.getHeaderGroups();
   const rowModelRows = table.getRowModel().rows;
   const infinite = computed.infinite;
@@ -510,7 +510,6 @@ function DataTableRoot({
       onDataChange(data.filter((_, idx) => idx !== rowIndex));
     }
   }, [readOnly, disabled, minRows, data, isFormMode, onDataChange]);
-  const isCompact = resolvedSize === "sm" || compact;
   const renderCellContent = useCallback((cell, rowIndex, rowData) => {
     const columnDef = cell.column.columnDef;
     const columnId = cell.column.id;
@@ -557,12 +556,11 @@ function DataTableRoot({
       columnLabel: typeof columnDef.header === "string" ? columnDef.header : void 0,
       rowIndex,
       rowData,
-      size: knobProps.sizeToken,
-      compact: isCompact,
+      size: String(cellSize),
       linkedValue,
       onLinkedChange
     });
-  }, [handleCellChange, readOnly, disabled, knobProps.sizeToken, knobProps.label.fontSize, isCompact]);
+  }, [handleCellChange, readOnly, disabled, cellSize, knobProps.label.fontSize]);
   const extraColumnsBefore = (enableRowSelection ? 1 : 0) + (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
   const extraColumnsAfter = showDeleteRow && !readOnly ? 1 : 0;
   const excelCellNav = enableKeyboardNavigation && !rowPressActive && !disabled;
@@ -657,8 +655,7 @@ function DataTableRoot({
             // differentiated for screen readers (DG-A11Y-06). The
             // aria-label rides the role="checkbox" frame itself.
             "aria-label": deriveSelectRowLabel(row, rowIndex)
-          },
-          compact: isCompact
+          }
         })
       }), showRowNumbers && /* @__PURE__ */jsx(Table.Cell, {
         ...cellRenderProps,
@@ -798,7 +795,7 @@ function DataTableRoot({
         })
       })]
     });
-  }, [enableRowSelection, showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, disabled, cellHeight, knobProps.sizeToken, cellFlexProps, getColSizeProps, getStickyStyle, renderCellContent, handleDeleteRow, data.length, minRows, isCompact, t, deriveSelectRowLabel, ExpandCaretIcon, expandedCaretRotation, clipBodyCells, excelCellNav, keyboardNav.isNavigating, keyboardNav.focusedRowIndex, focusedColIndex]);
+  }, [enableRowSelection, showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, disabled, cellHeight, knobProps.sizeToken, cellFlexProps, getColSizeProps, getStickyStyle, renderCellContent, handleDeleteRow, data.length, minRows, t, deriveSelectRowLabel, ExpandCaretIcon, expandedCaretRotation, clipBodyCells, excelCellNav, keyboardNav.isNavigating, keyboardNav.focusedRowIndex, focusedColIndex]);
   const [filterEditTarget, setFilterEditTarget] = useState(null);
   const filterUi = useMemo(() => ({
     editTarget: filterEditTarget,
@@ -827,7 +824,6 @@ function DataTableRoot({
         views: state.views,
         activeViewId: state.activeViewId,
         size: knobProps.sizeToken,
-        compact: isCompact,
         isFetching: Boolean(state.isFetching)
       });
     }
@@ -837,7 +833,6 @@ function DataTableRoot({
       onClearFilters: actions.clearFilters,
       customActions: defaultCardToolbar && hasCardSort ? /* @__PURE__ */jsx(DataTableCardSortControl, {
         table,
-        compact: isCompact,
         disabled,
         contained: true
       }) : void 0,
@@ -850,7 +845,6 @@ function DataTableRoot({
       enableGlobalSearch,
       enableFiltering,
       size: knobProps.sizeToken,
-      compact: isCompact,
       isFetching: Boolean(state.isFetching)
     });
   };
@@ -867,7 +861,7 @@ function DataTableRoot({
       pagination: state.pagination,
       onPaginationChange: actions.setPagination,
       pageSizeOptions: resolvedPageSizeOptions,
-      compact: true
+      size: resolvedSize
     });
   };
   const renderInner = (tableData, effectiveHandleAddRow, effectiveHandleDeleteRow, _effectiveHandleCellChange) => {
@@ -906,7 +900,7 @@ function DataTableRoot({
         onRetry: state.error ? onRetry : infinite?.retry,
         layout: "table",
         errorTitle: t("Couldn't load table"),
-        compact: true,
+        size: resolvedSize,
         "aria-label": resolvedAriaLabel
       });
     }
@@ -919,7 +913,6 @@ function DataTableRoot({
     }
     return /* @__PURE__ */jsx(DataTableContext.Provider, {
       size: resolvedSize,
-      compact: isCompact,
       children: /* @__PURE__ */jsx(DataTableStateContext.Provider, {
         value: stateContextValue,
         children: /* @__PURE__ */jsxs(View, {
@@ -949,649 +942,651 @@ function DataTableRoot({
             })
           } : {}),
           ...props,
-          children: [hasToolbar && /* @__PURE__ */jsx(View, {
-            width: "100%",
-            ...(disabled ? disabledState.chromeKnobProps : {}),
-            children: renderToolbarComponent()
-          }), enableFiltering && /* @__PURE__ */jsx(View, {
-            width: "100%",
-            ...(disabled ? disabledState.chromeKnobProps : {}),
-            children: /* @__PURE__ */jsx(DataTableFilterChips, {})
-          }), enableRowSelection && bulkBarPlacement === "top" ? /* @__PURE__ */jsx(View, {
-            width: "100%",
-            ...(disabled ? disabledState.chromeKnobProps : {}),
-            children: /* @__PURE__ */jsx(DataTableBulkActions, {
-              actions: resolvedBulkActions,
-              maxVisibleActions: 5,
-              showSelectionCount: true,
-              placement: "top"
-            })
-          }) : null, children, showList ? /* @__PURE__ */jsx(DataTableDocumentList, {
-            tableRows: displayRows,
-            enableRowSelection,
-            disabled,
-            hasActiveFilters: computed.hasActiveFilters,
-            renderCellContent,
-            compact: isCompact,
-            selectRowLabel: deriveSelectRowLabel,
-            queryInFlight,
-            ...(rowPressActive ? {
-              getRowPressProps
-            } : {})
-          }) : showCards ? /* @__PURE__ */jsxs(Fragment, {
-            children: [!defaultCardToolbar && /* @__PURE__ */jsx(DataTableCardControls, {
-              table,
-              enableSorting,
-              enableFiltering,
-              availableColumns: cardFilterColumns,
-              compact: isCompact,
-              disabled
-            }), /* @__PURE__ */jsx(DataTableMobileCards, {
+          children: [/* @__PURE__ */jsxs(Surface, {
+            size: resolvedSize,
+            children: [hasToolbar && /* @__PURE__ */jsx(View, {
+              width: "100%",
+              ...(disabled ? disabledState.chromeKnobProps : {}),
+              children: renderToolbarComponent()
+            }), enableFiltering && /* @__PURE__ */jsx(View, {
+              width: "100%",
+              ...(disabled ? disabledState.chromeKnobProps : {}),
+              children: /* @__PURE__ */jsx(DataTableFilterChips, {})
+            }), enableRowSelection && bulkBarPlacement === "top" ? /* @__PURE__ */jsx(View, {
+              width: "100%",
+              ...(disabled ? disabledState.chromeKnobProps : {}),
+              children: /* @__PURE__ */jsx(DataTableBulkActions, {
+                actions: resolvedBulkActions,
+                maxVisibleActions: 5,
+                showSelectionCount: true,
+                placement: "top"
+              })
+            }) : null, children, showList ? /* @__PURE__ */jsx(DataTableDocumentList, {
               tableRows: displayRows,
               enableRowSelection,
-              showRowNumbers,
-              showDeleteRow,
-              readOnly,
               disabled,
-              dataLength: tableData.length,
-              minRows,
               hasActiveFilters: computed.hasActiveFilters,
               renderCellContent,
-              onDeleteRow: effectiveHandleDeleteRow,
-              selectAllChecked,
-              selectAllIndeterminate,
-              onToggleSelectAll: toggleSelectAll,
-              compact: isCompact,
               selectRowLabel: deriveSelectRowLabel,
               queryInFlight,
               ...(rowPressActive ? {
                 getRowPressProps
               } : {})
-            })]
-          }) : (/* Table View */
-          /* @__PURE__ */jsx(View, {
-            ref: node => {
-              if (enableKeyboardNavigation && !isSSR && keyboardNav.containerRef) {
-                keyboardNav.containerRef.current = node;
-              }
-              if (scrollContainerRef) {
-                scrollContainerRef.current = node;
-              }
-            },
-            flexDirection: "column",
-            width: "100%",
-            flexGrow: 0,
-            flexShrink: 1,
-            flexBasis: "auto",
-            minHeight: 0,
-            ...(hScroll ? {
-              overflowX: "auto"
-            } : {}),
-            "aria-label": withInterp(t("{{label}} content", {
-              label: resolvedAriaLabel
-            }), {
-              label: resolvedAriaLabel
-            }),
-            tabIndex: enableKeyboardNavigation && !isSSR ? 0 : void 0,
-            ...{
-              "data-table-grid": "true"
-            },
-            onKeyDown: enableKeyboardNavigation && !isSSR ? handleGridKeyDown : void 0,
-            onPress: enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerClick : void 0,
-            onBlur: enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerBlur : void 0,
-            children: /* @__PURE__ */jsxs(Table, {
-              displayMode,
-              alignCells: {
-                x: "start",
-                y: "center"
-              },
-              alignHeaderCells: {
-                x: "start",
-                y: "center"
+            }) : showCards ? /* @__PURE__ */jsxs(Fragment, {
+              children: [!defaultCardToolbar && /* @__PURE__ */jsx(DataTableCardControls, {
+                table,
+                enableSorting,
+                enableFiltering,
+                availableColumns: cardFilterColumns,
+                disabled
+              }), /* @__PURE__ */jsx(DataTableMobileCards, {
+                tableRows: displayRows,
+                enableRowSelection,
+                showRowNumbers,
+                showDeleteRow,
+                readOnly,
+                disabled,
+                dataLength: tableData.length,
+                minRows,
+                hasActiveFilters: computed.hasActiveFilters,
+                renderCellContent,
+                onDeleteRow: effectiveHandleDeleteRow,
+                selectAllChecked,
+                selectAllIndeterminate,
+                onToggleSelectAll: toggleSelectAll,
+                selectRowLabel: deriveSelectRowLabel,
+                queryInFlight,
+                ...(rowPressActive ? {
+                  getRowPressProps
+                } : {})
+              })]
+            }) : (/* Table View */
+            /* @__PURE__ */jsx(View, {
+              ref: node => {
+                if (enableKeyboardNavigation && !isSSR && keyboardNav.containerRef) {
+                  keyboardNav.containerRef.current = node;
+                }
+                if (scrollContainerRef) {
+                  scrollContainerRef.current = node;
+                }
               },
-              cellHeight,
-              borderTopLeftRadius: hasToolbar ? 0 : knobProps.borderRadiusOuter.borderRadius,
-              borderTopRightRadius: hasToolbar ? 0 : knobProps.borderRadiusOuter.borderRadius,
-              borderBottomLeftRadius: knobProps.borderRadiusOuter.borderRadius,
-              borderBottomRightRadius: knobProps.borderRadiusOuter.borderRadius,
-              marginBottom: 0,
-              "aria-label": resolvedAriaLabel,
-              "aria-rowcount": computed.totalPages * state.pagination.pageSize,
-              "aria-colcount": table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter,
+              flexDirection: "column",
               width: "100%",
+              flexGrow: 0,
+              flexShrink: 1,
+              flexBasis: "auto",
+              minHeight: 0,
               ...(hScroll ? {
-                style: {
-                  minWidth: "max-content"
-                }
-              } : {}),
-              ...(hScroll && enableColumnPinning ? {
-                overflow: "visible"
-              } : {}),
-              ...(rowPressActive ? {
-                "data-row-press-scope": "true"
+                overflowX: "auto"
               } : {}),
-              children: [/* @__PURE__ */jsx(Table.Head, {
-                zIndex: "$1",
-                "aria-label": t("Table headers"),
-                children: headerGroups.map(headerGroup => {
-                  rowCounter.current++;
-                  return /* @__PURE__ */jsxs(Table.Row, {
-                    ...{
-                      background: true,
-                      backgroundColor: "$color2",
-                      rowLocation: rowCounter.current === 0 ? "first" : rowCounter.current === allRowsLength - 1 ? "last" : "middle",
-                      borderTopRightRadius: hasToolbar ? "$0" : knobProps.borderRadiusOuter.borderRadius,
-                      borderTopLeftRadius: hasToolbar ? "$0" : knobProps.borderRadiusOuter.borderRadius,
-                      borderBottomLeftRadius: "$0",
-                      borderBottomRightRadius: "$0",
-                      "aria-rowindex": rowCounter.current
-                    },
-                    children: [enableRowSelection && /* @__PURE__ */jsx(Table.HeaderCell, {
-                      cellWidth: selectionColWidth,
-                      cellHeight,
-                      cellLocation: "first",
-                      justifyContent: "center",
-                      children: /* @__PURE__ */jsx(Checkbox, {
-                        checked: selectAllIndeterminate ? "indeterminate" : selectAllChecked,
-                        disabled,
-                        onChange: checked => {
-                          if (disabled || checked === "indeterminate") return;
-                          const shouldSelect = checked === true;
-                          const isAll = selectAllScope === "filtered" ? table.getIsAllRowsSelected() : table.getIsAllPageRowsSelected();
-                          if (shouldSelect !== isAll) toggleSelectAll();
-                        },
-                        checkboxProps: {
-                          "aria-label": selectAllScope === "filtered" ? t("Select all matching rows") : t("Select all rows on page")
-                        },
-                        compact: isCompact
-                      })
-                    }), showRowNumbers && /* @__PURE__ */jsx(Table.HeaderCell, {
-                      cellWidth: chrome.rowNumberCol,
-                      cellHeight,
-                      cellLocation: enableRowSelection ? "middle" : "first",
-                      children: /* @__PURE__ */jsx(Text, {
-                        fontSize: knobProps.sizeToken,
-                        fontWeight: "600",
-                        children: "#"
-                      })
-                    }), enableRowExpansion && /* @__PURE__ */jsx(Table.HeaderCell, {
-                      cellWidth: chrome.expandCol,
-                      cellHeight,
-                      cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first",
-                      children: /* @__PURE__ */jsx(View, {
-                        width: 14
-                      })
-                    }), headerGroup.headers.map((header, headerIndex) => {
-                      const isSortableHeader = header.column.getCanSort();
-                      const sortDirection = header.column.getIsSorted();
-                      const canResize = enableColumnResizing && header.column.getCanResize();
-                      const resizeHandler = canResize ? header.getResizeHandler() : void 0;
-                      const colSize = header.getSize();
-                      const colMinSize = header.column.columnDef.minSize ?? 0;
-                      const colMaxSize = header.column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
-                      const stickyStyle = getStickyStyle(header.column.id);
-                      const columnDef = header.column.columnDef;
-                      const columnAlign = resolveColumnAlign({
-                        ...columnDef,
-                        id: header.column.id
-                      });
-                      const headerJustify = alignToFlex(columnAlign);
-                      const isRightAligned = columnAlign === "right";
-                      const isFirstHeaderCell = headerIndex === 0 && !enableRowSelection && !showRowNumbers && !enableRowExpansion;
-                      const isLastHeaderCell = headerIndex === headerGroup.headers.length - 1 && !(showDeleteRow && !readOnly);
-                      const headerCellLocation = isFirstHeaderCell ? "first" : isLastHeaderCell ? "last" : "middle";
-                      return /* @__PURE__ */jsxs(Table.HeaderCell, {
-                        id: `${header.column.id}-header`,
-                        onPress: isSortableHeader && !disabled ? header.column.getToggleSortingHandler() : void 0,
-                        ...(isSortableHeader && !disabled && isWeb ? {
-                          tabIndex: 0,
-                          onKeyDown: e => {
-                            if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
-                              e.preventDefault();
-                              header.column.getToggleSortingHandler()?.(e);
-                            }
+              "aria-label": withInterp(t("{{label}} content", {
+                label: resolvedAriaLabel
+              }), {
+                label: resolvedAriaLabel
+              }),
+              tabIndex: enableKeyboardNavigation && !isSSR ? 0 : void 0,
+              ...{
+                "data-table-grid": "true"
+              },
+              onKeyDown: enableKeyboardNavigation && !isSSR ? handleGridKeyDown : void 0,
+              onPress: enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerClick : void 0,
+              onBlur: enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerBlur : void 0,
+              children: /* @__PURE__ */jsxs(Table, {
+                size: resolvedSize,
+                cellSize,
+                displayMode,
+                alignCells: {
+                  x: "start",
+                  y: "center"
+                },
+                alignHeaderCells: {
+                  x: "start",
+                  y: "center"
+                },
+                cellHeight,
+                borderTopLeftRadius: hasToolbar ? 0 : knobProps.borderRadiusOuter.borderRadius,
+                borderTopRightRadius: hasToolbar ? 0 : knobProps.borderRadiusOuter.borderRadius,
+                borderBottomLeftRadius: knobProps.borderRadiusOuter.borderRadius,
+                borderBottomRightRadius: knobProps.borderRadiusOuter.borderRadius,
+                marginBottom: 0,
+                "aria-label": resolvedAriaLabel,
+                "aria-rowcount": computed.totalPages * state.pagination.pageSize,
+                "aria-colcount": table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter,
+                width: "100%",
+                ...(hScroll ? {
+                  style: {
+                    minWidth: "max-content"
+                  }
+                } : {}),
+                ...(hScroll && enableColumnPinning ? {
+                  overflow: "visible"
+                } : {}),
+                ...(rowPressActive ? {
+                  "data-row-press-scope": "true"
+                } : {}),
+                children: [/* @__PURE__ */jsx(Table.Head, {
+                  zIndex: "$1",
+                  "aria-label": t("Table headers"),
+                  children: headerGroups.map(headerGroup => {
+                    rowCounter.current++;
+                    return /* @__PURE__ */jsxs(Table.Row, {
+                      ...{
+                        background: true,
+                        backgroundColor: "$color2",
+                        rowLocation: rowCounter.current === 0 ? "first" : rowCounter.current === allRowsLength - 1 ? "last" : "middle",
+                        borderTopRightRadius: hasToolbar ? "$0" : knobProps.borderRadiusOuter.borderRadius,
+                        borderTopLeftRadius: hasToolbar ? "$0" : knobProps.borderRadiusOuter.borderRadius,
+                        borderBottomLeftRadius: "$0",
+                        borderBottomRightRadius: "$0",
+                        "aria-rowindex": rowCounter.current
+                      },
+                      children: [enableRowSelection && /* @__PURE__ */jsx(Table.HeaderCell, {
+                        cellWidth: selectionColWidth,
+                        cellHeight,
+                        cellLocation: "first",
+                        justifyContent: "center",
+                        children: /* @__PURE__ */jsx(Checkbox, {
+                          checked: selectAllIndeterminate ? "indeterminate" : selectAllChecked,
+                          disabled,
+                          onChange: checked => {
+                            if (disabled || checked === "indeterminate") return;
+                            const shouldSelect = checked === true;
+                            const isAll = selectAllScope === "filtered" ? table.getIsAllRowsSelected() : table.getIsAllPageRowsSelected();
+                            if (shouldSelect !== isAll) toggleSelectAll();
                           },
-                          focusVisibleStyle: ensureFocusVisibleRing({
-                            outlineOffset: -2
-                          })
-                        } : {}),
-                        cursor: disabled ? "not-allowed" : isSortableHeader ? "pointer" : "default",
-                        position: "relative",
-                        cellLocation: headerCellLocation,
-                        justifyContent: headerJustify,
-                        "data-align": columnAlign,
-                        "aria-sort": isSortableHeader ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0,
-                        ...(dnd && !disabled ? {
-                          draggable: true,
-                          onDragStart: e => dnd.onDragStart(e, header.column.id),
-                          onDragOver: dnd.onDragOver,
-                          onDrop: e => dnd.onDrop(e, header.column.id)
-                        } : {}),
-                        ...cellFlexProps,
-                        ...getColSizeProps(header.column),
-                        ...(isWeb && stickyStyle ? {
-                          style: {
-                            position: "sticky",
-                            ...("insetInlineStart" in stickyStyle && {
-                              insetInlineStart: stickyStyle.insetInlineStart
-                            }),
-                            ...("insetInlineEnd" in stickyStyle && {
-                              insetInlineEnd: stickyStyle.insetInlineEnd
-                            }),
-                            zIndex: 2,
-                            backgroundColor: "var(--color2)"
+                          checkboxProps: {
+                            "aria-label": selectAllScope === "filtered" ? t("Select all matching rows") : t("Select all rows on page")
                           }
-                        } : {}),
-                        children: [/* @__PURE__ */jsxs(View, {
-                          flexDirection: "row",
-                          flexWrap: "wrap",
-                          gap: "$2",
-                          alignItems: "center",
-                          justifyContent: isRightAligned ? "flex-end" : "space-between",
-                          flex: 1,
-                          minWidth: 0,
+                        })
+                      }), showRowNumbers && /* @__PURE__ */jsx(Table.HeaderCell, {
+                        cellWidth: chrome.rowNumberCol,
+                        cellHeight,
+                        cellLocation: enableRowSelection ? "middle" : "first",
+                        children: /* @__PURE__ */jsx(Text, {
+                          fontSize: knobProps.sizeToken,
+                          fontWeight: "600",
+                          children: "#"
+                        })
+                      }), enableRowExpansion && /* @__PURE__ */jsx(Table.HeaderCell, {
+                        cellWidth: chrome.expandCol,
+                        cellHeight,
+                        cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first",
+                        children: /* @__PURE__ */jsx(View, {
+                          width: 14
+                        })
+                      }), headerGroup.headers.map((header, headerIndex) => {
+                        const isSortableHeader = header.column.getCanSort();
+                        const sortDirection = header.column.getIsSorted();
+                        const canResize = enableColumnResizing && header.column.getCanResize();
+                        const resizeHandler = canResize ? header.getResizeHandler() : void 0;
+                        const colSize = header.getSize();
+                        const colMinSize = header.column.columnDef.minSize ?? 0;
+                        const colMaxSize = header.column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+                        const stickyStyle = getStickyStyle(header.column.id);
+                        const columnDef = header.column.columnDef;
+                        const columnAlign = resolveColumnAlign({
+                          ...columnDef,
+                          id: header.column.id
+                        });
+                        const headerJustify = alignToFlex(columnAlign);
+                        const isRightAligned = columnAlign === "right";
+                        const isFirstHeaderCell = headerIndex === 0 && !enableRowSelection && !showRowNumbers && !enableRowExpansion;
+                        const isLastHeaderCell = headerIndex === headerGroup.headers.length - 1 && !(showDeleteRow && !readOnly);
+                        const headerCellLocation = isFirstHeaderCell ? "first" : isLastHeaderCell ? "last" : "middle";
+                        return /* @__PURE__ */jsxs(Table.HeaderCell, {
+                          id: `${header.column.id}-header`,
+                          onPress: isSortableHeader && !disabled ? header.column.getToggleSortingHandler() : void 0,
+                          ...(isSortableHeader && !disabled && isWeb ? {
+                            tabIndex: 0,
+                            onKeyDown: e => {
+                              if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+                                e.preventDefault();
+                                header.column.getToggleSortingHandler()?.(e);
+                              }
+                            },
+                            focusVisibleStyle: ensureFocusVisibleRing({
+                              outlineOffset: -2
+                            })
+                          } : {}),
+                          cursor: disabled ? "not-allowed" : isSortableHeader ? "pointer" : "default",
+                          position: "relative",
+                          cellLocation: headerCellLocation,
+                          justifyContent: headerJustify,
+                          "data-align": columnAlign,
+                          "aria-sort": isSortableHeader ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0,
+                          ...(dnd && !disabled ? {
+                            draggable: true,
+                            onDragStart: e => dnd.onDragStart(e, header.column.id),
+                            onDragOver: dnd.onDragOver,
+                            onDrop: e => dnd.onDrop(e, header.column.id)
+                          } : {}),
+                          ...cellFlexProps,
+                          ...getColSizeProps(header.column),
+                          ...(isWeb && stickyStyle ? {
+                            style: {
+                              position: "sticky",
+                              ...("insetInlineStart" in stickyStyle && {
+                                insetInlineStart: stickyStyle.insetInlineStart
+                              }),
+                              ...("insetInlineEnd" in stickyStyle && {
+                                insetInlineEnd: stickyStyle.insetInlineEnd
+                              }),
+                              zIndex: 2,
+                              backgroundColor: "var(--color2)"
+                            }
+                          } : {}),
                           children: [/* @__PURE__ */jsxs(View, {
                             flexDirection: "row",
+                            flexWrap: "wrap",
                             gap: "$2",
                             alignItems: "center",
-                            flexGrow: isRightAligned ? 0 : 1,
-                            flexShrink: 1,
-                            flexBasis: "auto",
+                            justifyContent: isRightAligned ? "flex-end" : "space-between",
+                            flex: 1,
                             minWidth: 0,
-                            justifyContent: isRightAligned ? "flex-end" : void 0,
-                            children: [/* @__PURE__ */jsx(Text, {
-                              fontSize: knobProps.sizeToken,
-                              userSelect: "none",
+                            children: [/* @__PURE__ */jsxs(View, {
+                              flexDirection: "row",
+                              gap: "$2",
+                              alignItems: "center",
+                              flexGrow: isRightAligned ? 0 : 1,
                               flexShrink: 1,
+                              flexBasis: "auto",
                               minWidth: 0,
-                              textAlign: isRightAligned ? "right" : void 0,
-                              "data-header-label": "",
-                              ...(isWeb ? {
-                                style: {
-                                  overflowWrap: "anywhere"
-                                }
-                              } : {}),
-                              children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
-                            }), isSortableHeader && /* @__PURE__ */jsx(Tooltip, {
-                              content: sortDirection === "asc" ? t("Sorted ascending (click to sort descending)") : sortDirection === "desc" ? t("Sorted descending (click to clear)") : t("Click to sort (Shift+click for multi-sort)"),
-                              children: /* @__PURE__ */jsxs(View, {
-                                "aria-hidden": true,
-                                role: "presentation",
-                                flexShrink: 0,
-                                children: [sortDirection === "asc" && /* @__PURE__ */jsx(CaretDownIcon, {
-                                  size: chrome.iconPx,
-                                  color: "var(--color11)"
-                                }), sortDirection === "desc" && /* @__PURE__ */jsx(CaretDownIcon, {
-                                  size: chrome.iconPx,
-                                  color: "var(--color11)",
+                              justifyContent: isRightAligned ? "flex-end" : void 0,
+                              children: [/* @__PURE__ */jsx(Text, {
+                                fontSize: knobProps.sizeToken,
+                                userSelect: "none",
+                                flexShrink: 1,
+                                minWidth: 0,
+                                textAlign: isRightAligned ? "right" : void 0,
+                                "data-header-label": "",
+                                ...(isWeb ? {
                                   style: {
-                                    transform: "rotate(180deg)"
+                                    overflowWrap: "anywhere"
                                   }
-                                }), sortDirection === false && /* @__PURE__ */jsx(CaretUpDownIcon, {
-                                  size: chrome.iconPx,
-                                  color: "var(--color11)"
-                                })]
-                              })
-                            })]
-                          }), /* @__PURE__ */jsxs(View, {
-                            flexDirection: "row",
-                            gap: "$1",
-                            alignItems: "center",
-                            flexShrink: 0,
-                            children: [enableFiltering && header.column.getCanFilter() && /* @__PURE__ */jsx(ColumnHeaderFilter, {
-                              columnId: header.column.id,
-                              columnLabel: typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id,
-                              columnType: mapFieldToFilterType(getColumnField(header.column.columnDef)),
-                              filterValue: header.column.getFilterValue(),
-                              onFilterChange: value => header.column.setFilterValue(value),
-                              isFiltered: header.column.getIsFiltered(),
-                              options: header.column.columnDef.fieldProps?.options
-                            }), pinning && enableColumnPinning &&
-                            /* One compact cycle control per header
-                            (left → right → unpin) — two full
-                            buttons crowded the header (owner). */
-                            /* @__PURE__ */
-                            jsx(pinning.PinButton, {
-                              columnId: header.column.id
+                                } : {}),
+                                children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+                              }), isSortableHeader && /* @__PURE__ */jsx(Tooltip, {
+                                content: sortDirection === "asc" ? t("Sorted ascending (click to sort descending)") : sortDirection === "desc" ? t("Sorted descending (click to clear)") : t("Click to sort (Shift+click for multi-sort)"),
+                                children: /* @__PURE__ */jsxs(View, {
+                                  "aria-hidden": true,
+                                  role: "presentation",
+                                  flexShrink: 0,
+                                  children: [sortDirection === "asc" && /* @__PURE__ */jsx(CaretDownIcon, {
+                                    size: chrome.iconPx,
+                                    color: "var(--color11)"
+                                  }), sortDirection === "desc" && /* @__PURE__ */jsx(CaretDownIcon, {
+                                    size: chrome.iconPx,
+                                    color: "var(--color11)",
+                                    style: {
+                                      transform: "rotate(180deg)"
+                                    }
+                                  }), sortDirection === false && /* @__PURE__ */jsx(CaretUpDownIcon, {
+                                    size: chrome.iconPx,
+                                    color: "var(--color11)"
+                                  })]
+                                })
+                              })]
+                            }), /* @__PURE__ */jsxs(View, {
+                              flexDirection: "row",
+                              gap: "$1",
+                              alignItems: "center",
+                              flexShrink: 0,
+                              children: [enableFiltering && header.column.getCanFilter() && /* @__PURE__ */jsx(ColumnHeaderFilter, {
+                                columnId: header.column.id,
+                                columnLabel: typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id,
+                                columnType: mapFieldToFilterType(getColumnField(header.column.columnDef)),
+                                filterValue: header.column.getFilterValue(),
+                                onFilterChange: value => header.column.setFilterValue(value),
+                                isFiltered: header.column.getIsFiltered(),
+                                options: header.column.columnDef.fieldProps?.options
+                              }), pinning && enableColumnPinning &&
+                              /* One compact cycle control per header
+                              (left → right → unpin) — two full
+                              buttons crowded the header (owner). */
+                              /* @__PURE__ */
+                              jsx(pinning.PinButton, {
+                                columnId: header.column.id
+                              })]
                             })]
+                          }), canResize && resizeHandler && /* @__PURE__ */jsx(View, {
+                            position: "absolute",
+                            right: -4,
+                            top: 0,
+                            height: 2e3,
+                            width: 8,
+                            cursor: "col-resize",
+                            onMouseDown: resizeHandler,
+                            onTouchStart: resizeHandler,
+                            role: "separator",
+                            "aria-valuenow": colSize,
+                            "aria-valuemin": colMinSize,
+                            "aria-valuemax": colMaxSize,
+                            "aria-label": withInterp(t("Resize {{column}} column", {
+                              column: header.column.columnDef.header || header.column.id
+                            }), {
+                              column: header.column.columnDef.header || header.column.id
+                            }),
+                            style: {
+                              touchAction: "none"
+                            },
+                            zIndex: 10
                           })]
-                        }), canResize && resizeHandler && /* @__PURE__ */jsx(View, {
-                          position: "absolute",
-                          right: -4,
-                          top: 0,
-                          height: 2e3,
-                          width: 8,
-                          cursor: "col-resize",
-                          onMouseDown: resizeHandler,
-                          onTouchStart: resizeHandler,
-                          role: "separator",
-                          "aria-valuenow": colSize,
-                          "aria-valuemin": colMinSize,
-                          "aria-valuemax": colMaxSize,
-                          "aria-label": withInterp(t("Resize {{column}} column", {
-                            column: header.column.columnDef.header || header.column.id
-                          }), {
-                            column: header.column.columnDef.header || header.column.id
-                          }),
-                          style: {
-                            touchAction: "none"
-                          },
-                          zIndex: 10
-                        })]
-                      }, header.id);
-                    }), showDeleteRow && !readOnly && /* @__PURE__ */jsx(Table.HeaderCell, {
-                      cellWidth: chrome.deleteCol,
-                      cellHeight,
-                      cellLocation: "last"
-                    })]
-                  }, headerGroup.id);
-                })
-              }), /* @__PURE__ */jsxs(Table.Body, {
-                role: isVirtualized ? "presentation" : "rowgroup",
-                "aria-label": isVirtualized ? void 0 : t("Table data"),
-                ...(hScroll && enableColumnPinning ? {
-                  overflowY: "visible",
-                  overflowX: "visible"
-                } : {}),
-                ref: node => {
-                  tableBodyRef.current = node ?? null;
-                },
-                children: [displayRows.length === 0 ? /* @__PURE__ */jsx(Table.Row, {
-                  children: /* @__PURE__ */jsx(Table.Cell, {
-                    children: isRefetching ? null : /* @__PURE__ */jsx(EmptyState, {
-                      compact: true,
-                      "aria-live": "polite",
-                      title: computed.hasActiveFilters ? t("No results found") : t("No data available")
-                    })
+                        }, header.id);
+                      }), showDeleteRow && !readOnly && /* @__PURE__ */jsx(Table.HeaderCell, {
+                        cellWidth: chrome.deleteCol,
+                        cellHeight,
+                        cellLocation: "last"
+                      })]
+                    }, headerGroup.id);
                   })
-                }) : isVirtualized ? /* @__PURE__ */jsx(Table.Row, {
-                  role: "presentation",
-                  children: /* @__PURE__ */jsx(Table.Cell, {
+                }), /* @__PURE__ */jsxs(Table.Body, {
+                  role: isVirtualized ? "presentation" : "rowgroup",
+                  "aria-label": isVirtualized ? void 0 : t("Table data"),
+                  ...(hScroll && enableColumnPinning ? {
+                    overflowY: "visible",
+                    overflowX: "visible"
+                  } : {}),
+                  ref: node => {
+                    tableBodyRef.current = node ?? null;
+                  },
+                  children: [displayRows.length === 0 ? /* @__PURE__ */jsx(Table.Row, {
+                    children: /* @__PURE__ */jsx(Table.Cell, {
+                      children: isRefetching ? null : /* @__PURE__ */jsx(EmptyState, {
+                        size: resolvedSize,
+                        "aria-live": "polite",
+                        title: computed.hasActiveFilters ? t("No results found") : t("No data available")
+                      })
+                    })
+                  }) : isVirtualized ? /* @__PURE__ */jsx(Table.Row, {
                     role: "presentation",
-                    padding: 0,
-                    cellWidth: "auto",
-                    style: {
-                      display: "block",
-                      overflow: "hidden",
-                      width: "100%",
-                      minWidth: 0
-                    },
-                    ...{
-                      colSpan: table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
-                    },
-                    children: /* @__PURE__ */jsx(DataTableVirtualized, {
-                      virtualItems,
-                      totalSize,
-                      bodyScrollRef,
-                      virtualizationHeight,
-                      tableRows: displayRows,
-                      headerGroups,
-                      showRowNumbers,
-                      enableRowExpansion,
-                      showDeleteRow,
-                      readOnly,
-                      enableKeyboardNavigation,
-                      keyboardNav,
-                      getColSizeProps,
-                      renderRowContent,
-                      extraColumnsBefore,
-                      extraColumnsAfter,
-                      table,
-                      hasInfiniteTail,
-                      rowHeightPx,
-                      tableZebraOn,
-                      ...(rowPressActive ? {
-                        getRowPressProps
-                      } : {})
+                    children: /* @__PURE__ */jsx(Table.Cell, {
+                      role: "presentation",
+                      padding: 0,
+                      cellWidth: "auto",
+                      style: {
+                        display: "block",
+                        overflow: "hidden",
+                        width: "100%",
+                        minWidth: 0
+                      },
+                      ...{
+                        colSpan: table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
+                      },
+                      children: /* @__PURE__ */jsx(DataTableVirtualized, {
+                        virtualItems,
+                        totalSize,
+                        bodyScrollRef,
+                        virtualizationHeight,
+                        tableRows: displayRows,
+                        headerGroups,
+                        showRowNumbers,
+                        enableRowExpansion,
+                        showDeleteRow,
+                        readOnly,
+                        enableKeyboardNavigation,
+                        keyboardNav,
+                        getColSizeProps,
+                        renderRowContent,
+                        extraColumnsBefore,
+                        extraColumnsAfter,
+                        table,
+                        hasInfiniteTail,
+                        rowHeightPx,
+                        tableZebraOn,
+                        ...(rowPressActive ? {
+                          getRowPressProps
+                        } : {})
+                      })
                     })
-                  })
-                }) : /* @__PURE__ */jsxs(Fragment, {
-                  children: [displayRows.map((row, index) => {
-                    rowCounter.current++;
-                    const isLastRow = index === displayRows.length - 1;
-                    if (enableGrouping && row.getIsGrouped?.()) {
-                      const colSpan = table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter;
-                      const indent = (row.depth ?? 0) * chrome.indent;
-                      return /* @__PURE__ */jsx(Table.Row, {
-                        backgroundColor: "$color3",
+                  }) : /* @__PURE__ */jsxs(Fragment, {
+                    children: [displayRows.map((row, index) => {
+                      rowCounter.current++;
+                      const isLastRow = index === displayRows.length - 1;
+                      if (enableGrouping && row.getIsGrouped?.()) {
+                        const colSpan = table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter;
+                        const indent = (row.depth ?? 0) * chrome.indent;
+                        return /* @__PURE__ */jsx(Table.Row, {
+                          backgroundColor: "$color3",
+                          flexShrink: 0,
+                          "aria-rowindex": rowCounter.current,
+                          children: /* @__PURE__ */jsx(Table.Cell, {
+                            ...{
+                              colSpan
+                            },
+                            children: /* @__PURE__ */jsxs(View, {
+                              flexDirection: "row",
+                              alignItems: "center",
+                              gap: "$2",
+                              paddingInlineStart: indent,
+                              cursor: "pointer",
+                              onPress: () => row.toggleExpanded(),
+                              role: "button",
+                              tabIndex: 0,
+                              "aria-expanded": row.getIsExpanded(),
+                              ...{
+                                onKeyDown: e => {
+                                  if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    row.toggleExpanded();
+                                  }
+                                }
+                              },
+                              children: [/* @__PURE__ */jsx(Text, {
+                                fontFamily: "$mono",
+                                fontSize: "$3",
+                                children: row.getIsExpanded() ? "\u25BC" : "\u25B6"
+                              }), /* @__PURE__ */jsx(SizableText, {
+                                fontFamily: knobProps.heading.fontFamily,
+                                size: "$4",
+                                children: String(row.groupingValue ?? "\u2014")
+                              }), /* @__PURE__ */jsxs(Text, {
+                                color: "$placeholderColor",
+                                fontSize: "$2",
+                                children: ["(", row.subRows?.length ?? 0, ")"]
+                              })]
+                            })
+                          })
+                        }, row.id);
+                      }
+                      const mainRow = /* @__PURE__ */createElement(Table.Row, {
+                        ...tableRowStateProps({
+                          selected: Boolean(enableRowSelection && row.getIsSelected?.()),
+                          keyboardFocused: false,
+                          zebraOn: tableZebraOn,
+                          index,
+                          pressable: rowPressActive
+                        }),
+                        ...{
+                          animation: "quick"
+                        },
                         flexShrink: 0,
+                        rowLocation: rowCounter.current === 0 ? "first" : rowCounter.current === allRowsLength - 1 ? "last" : "middle",
+                        key: `${row.id}-${index}`,
                         "aria-rowindex": rowCounter.current,
+                        "aria-label": withInterp(t("Row {{row}}", {
+                          row: index + 1
+                        }), {
+                          row: index + 1
+                        }),
+                        tabIndex: -1,
+                        ...{
+                          "data-table-zebra": tableZebraOn ? index % 2 === 0 ? "even" : "odd" : "off"
+                        },
+                        ...getRowPressProps(row, index),
+                        ...rowIntentProps(row.original)
+                      }, renderRowContent(row, index, isLastRow));
+                      const subRow = enableRowExpansion && renderSubComponent && row.getIsExpanded() && !row.subRows?.length ? /* @__PURE__ */jsx(Table.Row, {
+                        backgroundColor: "$color2",
                         children: /* @__PURE__ */jsx(Table.Cell, {
                           ...{
-                            colSpan
+                            colSpan: table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
                           },
-                          children: /* @__PURE__ */jsxs(View, {
-                            flexDirection: "row",
-                            alignItems: "center",
-                            gap: "$2",
-                            paddingInlineStart: indent,
-                            cursor: "pointer",
-                            onPress: () => row.toggleExpanded(),
-                            role: "button",
-                            tabIndex: 0,
-                            "aria-expanded": row.getIsExpanded(),
-                            ...{
-                              onKeyDown: e => {
-                                if (e.key === "Enter" || e.key === " ") {
-                                  e.preventDefault();
-                                  row.toggleExpanded();
-                                }
-                              }
-                            },
-                            children: [/* @__PURE__ */jsx(Text, {
-                              fontFamily: "$mono",
-                              fontSize: "$3",
-                              children: row.getIsExpanded() ? "\u25BC" : "\u25B6"
-                            }), /* @__PURE__ */jsx(Text, {
-                              fontWeight: "600",
-                              children: String(row.groupingValue ?? "\u2014")
-                            }), /* @__PURE__ */jsxs(Text, {
-                              color: "$placeholderColor",
-                              fontSize: "$2",
-                              children: ["(", row.subRows?.length ?? 0, ")"]
-                            })]
-                          })
+                          children: renderSubComponent(row)
                         })
+                      }, `${row.id}-sub`) : null;
+                      return /* @__PURE__ */jsxs(React.Fragment, {
+                        children: [mainRow, subRow]
                       }, row.id);
-                    }
-                    const mainRow = /* @__PURE__ */createElement(Table.Row, {
-                      ...tableRowStateProps({
-                        selected: Boolean(enableRowSelection && row.getIsSelected?.()),
-                        keyboardFocused: false,
-                        zebraOn: tableZebraOn,
-                        index,
-                        pressable: rowPressActive
-                      }),
-                      ...{
-                        animation: "quick"
-                      },
-                      flexShrink: 0,
-                      rowLocation: rowCounter.current === 0 ? "first" : rowCounter.current === allRowsLength - 1 ? "last" : "middle",
-                      key: `${row.id}-${index}`,
-                      "aria-rowindex": rowCounter.current,
-                      "aria-label": withInterp(t("Row {{row}}", {
-                        row: index + 1
-                      }), {
-                        row: index + 1
-                      }),
-                      tabIndex: -1,
+                    }), isFlexLayout && /* @__PURE__ */jsxs(Table.Row, {
+                      "aria-hidden": true,
+                      backgroundColor: "$color1",
+                      flex: 1,
+                      flexShrink: 1,
+                      flexGrow: 1,
+                      flexBasis: 0,
+                      minHeight: 0,
+                      children: [enableRowSelection && /* @__PURE__ */jsx(Table.Cell, {
+                        cellWidth: selectionColWidth,
+                        cellLocation: "first",
+                        padding: 0,
+                        minHeight: 0
+                      }), showRowNumbers && /* @__PURE__ */jsx(Table.Cell, {
+                        cellWidth: chrome.rowNumberCol,
+                        cellLocation: enableRowSelection ? "middle" : "first",
+                        padding: 0,
+                        minHeight: 0
+                      }), enableRowExpansion && /* @__PURE__ */jsx(Table.Cell, {
+                        cellWidth: chrome.expandCol,
+                        cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first",
+                        padding: 0,
+                        minHeight: 0
+                      }), headerGroups[0]?.headers.map((header, headerIndex) => {
+                        const isFirstDataCell = headerIndex === 0 && !enableRowSelection && !showRowNumbers && !enableRowExpansion;
+                        const isLastDataCell = headerIndex === headerGroups[0].headers.length - 1 && !(showDeleteRow && !readOnly);
+                        const cellLoc = isFirstDataCell ? "first" : isLastDataCell ? "last" : "middle";
+                        return /* @__PURE__ */jsx(Table.Cell, {
+                          ...cellFlexProps,
+                          ...getColSizeProps(header.column),
+                          cellLocation: cellLoc,
+                          padding: 0,
+                          minHeight: 0
+                        }, header.id);
+                      }), showDeleteRow && !readOnly && /* @__PURE__ */jsx(Table.Cell, {
+                        cellWidth: chrome.deleteCol,
+                        cellLocation: "last",
+                        padding: 0,
+                        minHeight: 0
+                      })]
+                    }, "filler-row")]
+                  }), isWeb && bodyClipped && /* @__PURE__ */jsx(Table.Row, {
+                    "aria-hidden": true,
+                    role: "presentation",
+                    position: "sticky",
+                    bottom: 0,
+                    height: 0,
+                    flexShrink: 0,
+                    zIndex: 2,
+                    pointerEvents: "none",
+                    ...{
+                      "data-table-clip-affordance": "true"
+                    },
+                    children: /* @__PURE__ */jsx(View, {
                       ...{
-                        "data-table-zebra": tableZebraOn ? index % 2 === 0 ? "even" : "odd" : "off"
+                        render: "td"
                       },
-                      ...getRowPressProps(row, index),
-                      ...rowIntentProps(row.original)
-                    }, renderRowContent(row, index, isLastRow));
-                    const subRow = enableRowExpansion && renderSubComponent && row.getIsExpanded() && !row.subRows?.length ? /* @__PURE__ */jsx(Table.Row, {
-                      backgroundColor: "$color2",
-                      children: /* @__PURE__ */jsx(Table.Cell, {
-                        ...{
-                          colSpan: table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
-                        },
-                        children: renderSubComponent(row)
-                      })
-                    }, `${row.id}-sub`) : null;
-                    return /* @__PURE__ */jsxs(React.Fragment, {
-                      children: [mainRow, subRow]
-                    }, row.id);
-                  }), isFlexLayout && /* @__PURE__ */jsxs(Table.Row, {
-                    "aria-hidden": true,
-                    backgroundColor: "$color1",
-                    flex: 1,
-                    flexShrink: 1,
-                    flexGrow: 1,
-                    flexBasis: 0,
-                    minHeight: 0,
+                      position: "absolute",
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      height: 28,
+                      style: {
+                        background: "linear-gradient(to bottom, rgba(0,0,0,0), var(--background))"
+                      }
+                    })
+                  })]
+                }), hasFooter && /* @__PURE__ */jsx(Table.Foot, {
+                  children: footerGroups.map(footerGroup => /* @__PURE__ */jsxs(Table.Row, {
                     children: [enableRowSelection && /* @__PURE__ */jsx(Table.Cell, {
                       cellWidth: selectionColWidth,
-                      cellLocation: "first",
-                      padding: 0,
-                      minHeight: 0
+                      cellHeight,
+                      cellLocation: "first"
                     }), showRowNumbers && /* @__PURE__ */jsx(Table.Cell, {
                       cellWidth: chrome.rowNumberCol,
-                      cellLocation: enableRowSelection ? "middle" : "first",
-                      padding: 0,
-                      minHeight: 0
+                      cellHeight,
+                      cellLocation: enableRowSelection ? "middle" : "first"
                     }), enableRowExpansion && /* @__PURE__ */jsx(Table.Cell, {
                       cellWidth: chrome.expandCol,
-                      cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first",
-                      padding: 0,
-                      minHeight: 0
-                    }), headerGroups[0]?.headers.map((header, headerIndex) => {
-                      const isFirstDataCell = headerIndex === 0 && !enableRowSelection && !showRowNumbers && !enableRowExpansion;
-                      const isLastDataCell = headerIndex === headerGroups[0].headers.length - 1 && !(showDeleteRow && !readOnly);
-                      const cellLoc = isFirstDataCell ? "first" : isLastDataCell ? "last" : "middle";
+                      cellHeight,
+                      cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first"
+                    }), footerGroup.headers.map(header => {
+                      const stickyStyle = getStickyStyle(header.column.id);
+                      const columnAlign = resolveColumnAlign({
+                        ...header.column.columnDef,
+                        id: header.column.id
+                      });
                       return /* @__PURE__ */jsx(Table.Cell, {
                         ...cellFlexProps,
                         ...getColSizeProps(header.column),
-                        cellLocation: cellLoc,
-                        padding: 0,
-                        minHeight: 0
+                        ...(isWeb && stickyStyle ? {
+                          style: {
+                            position: "sticky",
+                            ...("insetInlineStart" in stickyStyle && {
+                              insetInlineStart: stickyStyle.insetInlineStart
+                            }),
+                            ...("insetInlineEnd" in stickyStyle && {
+                              insetInlineEnd: stickyStyle.insetInlineEnd
+                            }),
+                            zIndex: 2,
+                            backgroundColor: "var(--color2)"
+                          }
+                        } : {}),
+                        justifyContent: alignToFlex(columnAlign),
+                        "data-align": columnAlign,
+                        children: header.isPlaceholder ? null : /* @__PURE__ */jsx(View, {
+                          width: "100%",
+                          minWidth: 0,
+                          flexDirection: "row",
+                          alignItems: "center",
+                          justifyContent: alignToFlex(columnAlign),
+                          "data-cell-align": columnAlign,
+                          style: isWeb ? {
+                            textAlign: columnAlign
+                          } : void 0,
+                          children: flexRender(header.column.columnDef.footer, header.getContext())
+                        })
                       }, header.id);
                     }), showDeleteRow && !readOnly && /* @__PURE__ */jsx(Table.Cell, {
                       cellWidth: chrome.deleteCol,
-                      cellLocation: "last",
-                      padding: 0,
-                      minHeight: 0
+                      cellHeight,
+                      cellLocation: "last"
                     })]
-                  }, "filler-row")]
-                }), isWeb && bodyClipped && /* @__PURE__ */jsx(Table.Row, {
-                  "aria-hidden": true,
-                  role: "presentation",
-                  position: "sticky",
-                  bottom: 0,
-                  height: 0,
-                  flexShrink: 0,
-                  zIndex: 2,
-                  pointerEvents: "none",
-                  ...{
-                    "data-table-clip-affordance": "true"
-                  },
-                  children: /* @__PURE__ */jsx(View, {
-                    ...{
-                      render: "td"
-                    },
-                    position: "absolute",
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    height: 28,
-                    style: {
-                      background: "linear-gradient(to bottom, rgba(0,0,0,0), var(--background))"
-                    }
-                  })
+                  }, footerGroup.id))
                 })]
-              }), hasFooter && /* @__PURE__ */jsx(Table.Foot, {
-                children: footerGroups.map(footerGroup => /* @__PURE__ */jsxs(Table.Row, {
-                  children: [enableRowSelection && /* @__PURE__ */jsx(Table.Cell, {
-                    cellWidth: selectionColWidth,
-                    cellHeight,
-                    cellLocation: "first"
-                  }), showRowNumbers && /* @__PURE__ */jsx(Table.Cell, {
-                    cellWidth: chrome.rowNumberCol,
-                    cellHeight,
-                    cellLocation: enableRowSelection ? "middle" : "first"
-                  }), enableRowExpansion && /* @__PURE__ */jsx(Table.Cell, {
-                    cellWidth: chrome.expandCol,
-                    cellHeight,
-                    cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first"
-                  }), footerGroup.headers.map(header => {
-                    const stickyStyle = getStickyStyle(header.column.id);
-                    const columnAlign = resolveColumnAlign({
-                      ...header.column.columnDef,
-                      id: header.column.id
-                    });
-                    return /* @__PURE__ */jsx(Table.Cell, {
-                      ...cellFlexProps,
-                      ...getColSizeProps(header.column),
-                      ...(isWeb && stickyStyle ? {
-                        style: {
-                          position: "sticky",
-                          ...("insetInlineStart" in stickyStyle && {
-                            insetInlineStart: stickyStyle.insetInlineStart
-                          }),
-                          ...("insetInlineEnd" in stickyStyle && {
-                            insetInlineEnd: stickyStyle.insetInlineEnd
-                          }),
-                          zIndex: 2,
-                          backgroundColor: "var(--color2)"
-                        }
-                      } : {}),
-                      justifyContent: alignToFlex(columnAlign),
-                      "data-align": columnAlign,
-                      children: header.isPlaceholder ? null : /* @__PURE__ */jsx(View, {
-                        width: "100%",
-                        minWidth: 0,
-                        flexDirection: "row",
-                        alignItems: "center",
-                        justifyContent: alignToFlex(columnAlign),
-                        "data-cell-align": columnAlign,
-                        style: isWeb ? {
-                          textAlign: columnAlign
-                        } : void 0,
-                        children: flexRender(header.column.columnDef.footer, header.getContext())
-                      })
-                    }, header.id);
-                  }), showDeleteRow && !readOnly && /* @__PURE__ */jsx(Table.Cell, {
-                    cellWidth: chrome.deleteCol,
-                    cellHeight,
-                    cellLocation: "last"
-                  })]
-                }, footerGroup.id))
-              })]
-            })
-          })), infinite ? /* @__PURE__ */jsx(DataTableInfiniteTail, {
-            infinite,
-            visibleCount: tableRows.length,
-            showAppendSkeleton: !isVirtualized,
-            rowHeightPx,
-            fontSize: knobProps.sizeToken,
-            gapProps: knobProps.gap,
-            sentinel: !isVirtualized && !infinite.exhausted && !infinite.appendError && isWeb ? /* @__PURE__ */jsx(View, {
-              ref: sentinelRef,
-              height: 1,
+              })
+            })), infinite ? /* @__PURE__ */jsx(DataTableInfiniteTail, {
+              infinite,
+              visibleCount: tableRows.length,
+              showAppendSkeleton: !isVirtualized,
+              rowHeightPx,
+              fontSize: knobProps.sizeToken,
+              gapProps: knobProps.gap,
+              sentinel: !isVirtualized && !infinite.exhausted && !infinite.appendError && isWeb ? /* @__PURE__ */jsx(View, {
+                ref: sentinelRef,
+                height: 1,
+                width: "100%",
+                "aria-hidden": true,
+                ...{
+                  "data-testid": "infinite-sentinel"
+                }
+              }) : null
+            }) : null, enableRowSelection && bulkBarPlacement === "bottom" ? /* @__PURE__ */jsx(View, {
               width: "100%",
-              "aria-hidden": true,
-              ...{
-                "data-testid": "infinite-sentinel"
-              }
-            }) : null
-          }) : null, enableRowSelection && bulkBarPlacement === "bottom" ? /* @__PURE__ */jsx(View, {
-            width: "100%",
-            ...(disabled ? disabledState.chromeKnobProps : {}),
-            children: /* @__PURE__ */jsx(DataTableBulkActions, {
-              actions: resolvedBulkActions,
-              maxVisibleActions: 5,
-              showSelectionCount: true,
-              placement: "bottom"
-            })
-          }) : null, showAddRow && !readOnly && /* @__PURE__ */jsx(View, {
-            children: /* @__PURE__ */jsx(Button, {
-              icon: PlusIcon,
-              disabled: disabled || maxRows !== void 0 && tableData.length >= maxRows,
-              onPress: effectiveHandleAddRow,
-              "aria-label": t("Add Row"),
-              children: t("Add Row")
-            })
+              ...(disabled ? disabledState.chromeKnobProps : {}),
+              children: /* @__PURE__ */jsx(DataTableBulkActions, {
+                actions: resolvedBulkActions,
+                maxVisibleActions: 5,
+                showSelectionCount: true,
+                placement: "bottom"
+              })
+            }) : null, showAddRow && !readOnly && /* @__PURE__ */jsx(View, {
+              children: /* @__PURE__ */jsx(Button, {
+                icon: PlusIcon,
+                disabled: disabled || maxRows !== void 0 && tableData.length >= maxRows,
+                onPress: effectiveHandleAddRow,
+                "aria-label": t("Add Row"),
+                children: t("Add Row")
+              })
+            })]
           }), enablePagination && !infinite && /* @__PURE__ */jsxs(View, {
             paddingTop: "$3",
             flexDirection: "row",