@multiplatform.one/table 7.34.4 → 7.35.0

package/src/components/DataTable/index.native.tsx

@@ -17,9 +17,9 @@ import { FlashList, type FlashListRef } from "@shopify/flash-list";
 import { AsyncBoundary, EmptyState, useDirection, ScrollView } from "@multiplatform.one/components";
 import { Button, Field, useFormField } from "@multiplatform.one/forms";
 import { flexRender } from "@tanstack/react-table";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeTokenStep, useResolvedKnobs, Surface } from "@multiplatform.one/theme";
 import React, { useRef, useMemo, useCallback } from "react";
-import type { FontSizeTokens } from "tamagui";
+import type { FontSizeTokens, SizeTokens } from "tamagui";
 import { Text, View, useMedia, withStaticProperties } from "tamagui";
 import { useTranslation } from "react-i18next";
 import { useDataTable } from "../../hooks/useDataTable";
@@ -173,7 +173,6 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   renderFilters,
   className: _className,
   size,
-  compact = false,
   disabled = false,
   accent,
   error,
@@ -194,7 +193,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   const { knobProps, disabledState } = useResolvedKnobs({
     intent,
     component: "DataTable",
-    compact,
+    size,
   });
   const chrome = dataTableChrome(String(knobProps.sizeToken));
   const bulkBarPlacement = knobProps.bulkBarPlacement === "bottom" ? "bottom" : "top";
@@ -275,10 +274,10 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     }
   }, [selectAllScope, table]);
 
-  const resolvedSize: "sm" | "md" | "lg" =
-    size ?? (knobProps.sizeToken === "$3" ? "sm" : knobProps.sizeToken === "$5" ? "lg" : "md");
+  const resolvedSize = knobProps.sizeToken as SizeTokens;
+  const sizeStep = sizeTokenStep(resolvedSize);
 
-  const cellHeight = resolvedSize === "sm" ? "$6" : resolvedSize === "lg" ? "$10" : "$8";
+  const cellHeight = sizeStep < 0 ? "$6" : sizeStep > 0 ? "$10" : "$8";
 
   const headerGroups = table.getHeaderGroups();
   const rowModelRows = table.getRowModel().rows;
@@ -397,7 +396,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     [readOnly, disabled, minRows, data, isFormMode, onDataChange],
   );
 
-  const isCompact = resolvedSize === "sm" || compact;
+  const tableSize = resolvedSize;
   const renderCellContent = useCallback(
     (cell: any, rowIndex: number, rowData: TData) => {
       const columnDef = cell.column.columnDef as DataTableColumn;
@@ -703,7 +702,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
             onRetry={state.error ? onRetry : infinite?.retry}
             layout="table"
             errorTitle={t("Couldn't load table")}
-            compact
+            size="$3"
             aria-label={ariaLabel || "Data table"}
           />
         );
@@ -718,7 +717,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       }
 
       return (
-        <DataTableContext.Provider size={resolvedSize} compact={isCompact}>
+        <DataTableContext.Provider size={resolvedSize}>
           <DataTableStateContext.Provider value={stateContextValue}>
             <View
               flexDirection="column"
@@ -743,69 +742,73 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                 : {})}
               {...props}
             >
-              {(enableGlobalSearch || enableFiltering || enableViews) && (
-                <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
-                  {renderToolbarComponent()}
-                </View>
-              )}
-              {enableRowSelection && bulkBarPlacement === "top" ? (
-                <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
-                  <DataTableBulkActions
-                    actions={resolvedBulkActions}
-                    maxVisibleActions={5}
-                    showSelectionCount
-                    placement="top"
-                  />
-                </View>
-              ) : null}
-              {children}
-              {renderFilters?.({
-                filters: state.filters || [],
-                onFiltersChange: actions.setFilters,
-                onAddFilter: actions.addFilter,
-                onRemoveFilter: actions.removeFilter,
-                onClearFilters: actions.clearFilters,
-                availableColumns: columns.map((col) => ({
-                  id: col.id || "",
-                  label: typeof col.header === "string" ? col.header : col.id || "",
-                  type: mapFieldToFilterType(col.field),
-                })),
-              })}
+              <Surface size={tableSize}>
+                {(enableGlobalSearch || enableFiltering || enableViews) && (
+                  <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
+                    {renderToolbarComponent()}
+                  </View>
+                )}
+                {enableRowSelection && bulkBarPlacement === "top" ? (
+                  <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
+                    <DataTableBulkActions
+                      actions={resolvedBulkActions}
+                      maxVisibleActions={5}
+                      showSelectionCount
+                      placement="top"
+                    />
+                  </View>
+                ) : null}
+                {children}
+                {renderFilters?.({
+                  filters: state.filters || [],
+                  onFiltersChange: actions.setFilters,
+                  onAddFilter: actions.addFilter,
+                  onRemoveFilter: actions.removeFilter,
+                  onClearFilters: actions.clearFilters,
+                  availableColumns: columns.map((col) => ({
+                    id: col.id || "",
+                    label: typeof col.header === "string" ? col.header : col.id || "",
+                    type: mapFieldToFilterType(col.field),
+                  })),
+                })}
+              </Surface>
 
               {showList ? (
-                <DataTableDocumentList
-                  tableRows={displayRows}
-                  enableRowSelection={enableRowSelection}
-                  disabled={disabled}
-                  hasActiveFilters={computed.hasActiveFilters}
-                  renderCellContent={renderCellContent}
-                  compact={isCompact}
-                  selectRowLabel={deriveSelectRowLabel}
-                  queryInFlight={queryInFlight}
-                  {...(rowPressActive ? { getRowPressProps } : {})}
-                />
-              ) : showCards ? (
-                <View flexDirection="column" gap="$2">
-                  <DataTableMobileCards
+                <Surface size={tableSize}>
+                  <DataTableDocumentList
                     tableRows={displayRows}
                     enableRowSelection={enableRowSelection}
-                    showRowNumbers={showRowNumbers}
-                    showDeleteRow={showDeleteRow}
-                    readOnly={readOnly}
                     disabled={disabled}
-                    dataLength={tableData.length}
-                    minRows={minRows}
                     hasActiveFilters={computed.hasActiveFilters}
                     renderCellContent={renderCellContent}
-                    onDeleteRow={isFormMode ? effectiveHandleDeleteRow : handleDeleteRow}
-                    selectAllChecked={selectAllChecked}
-                    selectAllIndeterminate={selectAllIndeterminate}
-                    onToggleSelectAll={toggleSelectAll}
-                    compact={isCompact}
                     selectRowLabel={deriveSelectRowLabel}
                     queryInFlight={queryInFlight}
                     {...(rowPressActive ? { getRowPressProps } : {})}
                   />
+                </Surface>
+              ) : showCards ? (
+                <View flexDirection="column" gap="$2">
+                  <Surface size={tableSize}>
+                    <DataTableMobileCards
+                      tableRows={displayRows}
+                      enableRowSelection={enableRowSelection}
+                      showRowNumbers={showRowNumbers}
+                      showDeleteRow={showDeleteRow}
+                      readOnly={readOnly}
+                      disabled={disabled}
+                      dataLength={tableData.length}
+                      minRows={minRows}
+                      hasActiveFilters={computed.hasActiveFilters}
+                      renderCellContent={renderCellContent}
+                      onDeleteRow={isFormMode ? effectiveHandleDeleteRow : handleDeleteRow}
+                      selectAllChecked={selectAllChecked}
+                      selectAllIndeterminate={selectAllIndeterminate}
+                      onToggleSelectAll={toggleSelectAll}
+                      selectRowLabel={deriveSelectRowLabel}
+                      queryInFlight={queryInFlight}
+                      {...(rowPressActive ? { getRowPressProps } : {})}
+                    />
+                  </Surface>
                   {enablePagination && !infinite && (
                     <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
                       {renderPaginationComponent()}
@@ -813,283 +816,288 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                   )}
                 </View>
               ) : (
-                <ScrollView horizontal maxWidth="100%">
-                  <View
-                    flex={1}
-                    flexDirection="column"
-                    width="100%"
-                    paddingBottom={enablePagination ? "$10" : undefined}
-                    aria-label={`${ariaLabel || "Data table"} content`}
-                  >
-                    <Table
-                      alignCells={{ x: "start", y: "center" }}
-                      alignHeaderCells={{ x: "start", y: "center" }}
-                      cellHeight={cellHeight}
-                      {...knobProps.borderRadiusOuter}
+                <Surface size={tableSize}>
+                  <ScrollView horizontal maxWidth="100%">
+                    <View
+                      flex={1}
+                      flexDirection="column"
                       width="100%"
-                      aria-label={ariaLabel || "Data table"}
-                      aria-rowcount={computed.totalPages * state.pagination.pageSize}
-                      aria-colcount={
-                        table.getVisibleLeafColumns().length +
-                        extraColumnsBefore +
-                        extraColumnsAfter
-                      }
+                      paddingBottom={enablePagination ? "$10" : undefined}
+                      aria-label={`${ariaLabel || "Data table"} content`}
                     >
-                      <Table.Head zIndex="$1" aria-label="Table headers">
-                        {headerGroups.map((headerGroup, groupIndex) => (
-                          <Table.Row
-                            key={headerGroup.id}
-                            backgroundColor="$color2"
-                            rowLocation={groupIndex === 0 ? "first" : "middle"}
-                            borderTopRightRadius={knobProps.borderRadiusOuter.borderRadius}
-                            borderTopLeftRadius={knobProps.borderRadiusOuter.borderRadius}
-                            borderBottomLeftRadius="$0"
-                            borderBottomRightRadius="$0"
-                            aria-rowindex={groupIndex}
-                          >
-                            {showRowNumbers && (
-                              <Table.HeaderCell
-                                cellWidth={chrome.rowNumberCol}
-                                cellHeight={cellHeight as any}
-                              >
-                                <Text fontSize={knobProps.sizeToken} fontWeight="600">
-                                  #
-                                </Text>
-                              </Table.HeaderCell>
-                            )}
-                            {enableRowExpansion && (
-                              <Table.HeaderCell
-                                cellWidth={chrome.expandCol}
-                                cellHeight={cellHeight as any}
-                              >
-                                <View width={chrome.iconPx} />
-                              </Table.HeaderCell>
-                            )}
-                            {headerGroup.headers.map((header, headerIndex) => {
-                              const isSortableHeader = header.column.getCanSort();
-                              const sortDirection = header.column.getIsSorted();
-                              const isLastHeader =
-                                headerIndex === headerGroup.headers.length - 1 && !showDeleteRow;
-                              return (
+                      <Table
+                        alignCells={{ x: "start", y: "center" }}
+                        alignHeaderCells={{ x: "start", y: "center" }}
+                        cellHeight={cellHeight}
+                        {...knobProps.borderRadiusOuter}
+                        width="100%"
+                        aria-label={ariaLabel || "Data table"}
+                        aria-rowcount={computed.totalPages * state.pagination.pageSize}
+                        aria-colcount={
+                          table.getVisibleLeafColumns().length +
+                          extraColumnsBefore +
+                          extraColumnsAfter
+                        }
+                      >
+                        <Table.Head zIndex="$1" aria-label="Table headers">
+                          {headerGroups.map((headerGroup, groupIndex) => (
+                            <Table.Row
+                              key={headerGroup.id}
+                              backgroundColor="$color2"
+                              rowLocation={groupIndex === 0 ? "first" : "middle"}
+                              borderTopRightRadius={knobProps.borderRadiusOuter.borderRadius}
+                              borderTopLeftRadius={knobProps.borderRadiusOuter.borderRadius}
+                              borderBottomLeftRadius="$0"
+                              borderBottomRightRadius="$0"
+                              aria-rowindex={groupIndex}
+                            >
+                              {showRowNumbers && (
                                 <Table.HeaderCell
-                                  key={header.id}
-                                  id={`${header.column.id}-header`}
-                                  onPress={
-                                    isSortableHeader && !disabled
-                                      ? header.column.getToggleSortingHandler()
-                                      : undefined
-                                  }
-                                  cursor={
-                                    disabled
-                                      ? "not-allowed"
-                                      : isSortableHeader
-                                        ? "pointer"
-                                        : "default"
-                                  }
-                                  position="relative"
-                                  aria-sort={
-                                    isSortableHeader
-                                      ? sortDirection === "asc"
-                                        ? "ascending"
-                                        : sortDirection === "desc"
-                                          ? "descending"
-                                          : "none"
-                                      : undefined
-                                  }
-                                  {...getColSizeProps(header.column, isLastHeader)}
+                                  cellWidth={chrome.rowNumberCol}
+                                  cellHeight={cellHeight as any}
                                 >
-                                  <View
-                                    flexDirection="row"
-                                    gap="$2"
-                                    alignItems="center"
-                                    justifyContent="flex-start"
-                                    flex={1}
+                                  <Text fontSize={knobProps.sizeToken} fontWeight="600">
+                                    #
+                                  </Text>
+                                </Table.HeaderCell>
+                              )}
+                              {enableRowExpansion && (
+                                <Table.HeaderCell
+                                  cellWidth={chrome.expandCol}
+                                  cellHeight={cellHeight as any}
+                                >
+                                  <View width={chrome.iconPx} />
+                                </Table.HeaderCell>
+                              )}
+                              {headerGroup.headers.map((header, headerIndex) => {
+                                const isSortableHeader = header.column.getCanSort();
+                                const sortDirection = header.column.getIsSorted();
+                                const isLastHeader =
+                                  headerIndex === headerGroup.headers.length - 1 && !showDeleteRow;
+                                return (
+                                  <Table.HeaderCell
+                                    key={header.id}
+                                    id={`${header.column.id}-header`}
+                                    onPress={
+                                      isSortableHeader && !disabled
+                                        ? header.column.getToggleSortingHandler()
+                                        : undefined
+                                    }
+                                    cursor={
+                                      disabled
+                                        ? "not-allowed"
+                                        : isSortableHeader
+                                          ? "pointer"
+                                          : "default"
+                                    }
+                                    position="relative"
+                                    aria-sort={
+                                      isSortableHeader
+                                        ? sortDirection === "asc"
+                                          ? "ascending"
+                                          : sortDirection === "desc"
+                                            ? "descending"
+                                            : "none"
+                                        : undefined
+                                    }
+                                    {...getColSizeProps(header.column, isLastHeader)}
                                   >
-                                    <Text
-                                      fontSize={knobProps.sizeToken}
-                                      selectable={false}
-                                      userSelect="none"
+                                    <View
+                                      flexDirection="row"
+                                      gap="$2"
+                                      alignItems="center"
+                                      justifyContent="flex-start"
+                                      flex={1}
                                     >
-                                      {header.isPlaceholder
-                                        ? null
-                                        : flexRender(
-                                            header.column.columnDef.header,
-                                            header.getContext(),
-                                          )}
-                                    </Text>
-                                    {isSortableHeader && (
                                       <Text
-                                        aria-hidden={true}
-                                        role="presentation"
-                                        color={sortDirection ? "$color10" : "$color8"}
+                                        fontSize={knobProps.sizeToken}
+                                        selectable={false}
+                                        userSelect="none"
                                       >
-                                        {sortDirection === "asc" && (
-                                          <CaretDownIcon size={chrome.iconPx} />
-                                        )}
-                                        {sortDirection === "desc" && (
-                                          <CaretDownIcon
-                                            size={chrome.iconPx}
-                                            style={{ transform: "rotate(180deg)" }}
-                                          />
-                                        )}
-                                        {sortDirection === false && (
-                                          <CaretUpDownIcon size={chrome.iconPx} />
-                                        )}
+                                        {header.isPlaceholder
+                                          ? null
+                                          : flexRender(
+                                              header.column.columnDef.header,
+                                              header.getContext(),
+                                            )}
                                       </Text>
-                                    )}
-                                    {pinning && (
-                                      <View flexDirection="row" gap="$1">
-                                        {/* One compact cycle control (left →
+                                      {isSortableHeader && (
+                                        <Text
+                                          aria-hidden={true}
+                                          role="presentation"
+                                          color={sortDirection ? "$color10" : "$color8"}
+                                        >
+                                          {sortDirection === "asc" && (
+                                            <CaretDownIcon size={chrome.iconPx} />
+                                          )}
+                                          {sortDirection === "desc" && (
+                                            <CaretDownIcon
+                                              size={chrome.iconPx}
+                                              style={{ transform: "rotate(180deg)" }}
+                                            />
+                                          )}
+                                          {sortDirection === false && (
+                                            <CaretUpDownIcon size={chrome.iconPx} />
+                                          )}
+                                        </Text>
+                                      )}
+                                      {pinning && (
+                                        <View flexDirection="row" gap="$1">
+                                          {/* One compact cycle control (left →
                                             right → unpin) mirrors web. */}
-                                        <pinning.PinButton columnId={header.column.id} />
-                                      </View>
-                                    )}
-                                  </View>
-                                </Table.HeaderCell>
-                              );
-                            })}
-                            {showDeleteRow && !readOnly && (
-                              <Table.HeaderCell
-                                cellWidth={chrome.deleteCol}
-                                cellHeight={cellHeight as any}
-                                cellLocation="last"
-                              />
-                            )}
-                          </Table.Row>
-                        ))}
-                      </Table.Head>
-
-                      <Table.Body aria-label="Table data">
-                        {displayRows.length === 0 ? (
-                          <Table.Row>
-                            <Table.Cell>
-                              {queryInFlight ? null : (
-                                <EmptyState
-                                  compact
-                                  aria-live="polite"
-                                  title={
-                                    computed.hasActiveFilters
-                                      ? t("No results found")
-                                      : t("No data available")
-                                  }
+                                          <pinning.PinButton columnId={header.column.id} />
+                                        </View>
+                                      )}
+                                    </View>
+                                  </Table.HeaderCell>
+                                );
+                              })}
+                              {showDeleteRow && !readOnly && (
+                                <Table.HeaderCell
+                                  cellWidth={chrome.deleteCol}
+                                  cellHeight={cellHeight as any}
+                                  cellLocation="last"
                                 />
                               )}
-                            </Table.Cell>
-                          </Table.Row>
-                        ) : isVirtualized ? (
-                          <View style={{ height: virtualizationHeight }}>
-                            <FlashList
-                              keyboardShouldPersistTaps="handled"
-                              ref={flashListRef}
-                              data={displayRows}
-                              drawDistance={rowHeightPx * virtualizationOverscan}
-                              keyExtractor={(row) => row.id}
-                              renderItem={({ item, index }) => renderRow(item, index)}
-                              {...(infinite && !infinite.exhausted
-                                ? {
-                                    onEndReached: infinite.loadMore,
-                                    onEndReachedThreshold:
-                                      (INFINITE_TRIGGER_ROWS * rowHeightPx) / virtualizationHeight!,
-                                  }
-                                : {})}
-                            />
-                          </View>
-                        ) : (
-                          displayRows.map((row, index) => {
-                            const mainRow = renderRow(row, index);
-                            const subRow =
-                              enableRowExpansion &&
-                              renderSubComponent &&
-                              row.getIsExpanded() &&
-                              !row.subRows?.length ? (
-                                <Table.Row key={`${row.id}-sub`} backgroundColor="$color2">
-                                  <Table.Cell
-                                    {...({
-                                      colSpan:
-                                        table.getVisibleLeafColumns().length +
-                                        extraColumnsBefore +
-                                        extraColumnsAfter,
-                                    } as any)}
-                                  >
-                                    {renderSubComponent(row)}
-                                  </Table.Cell>
-                                </Table.Row>
-                              ) : null;
-                            return (
-                              <React.Fragment key={row.id}>
-                                {mainRow}
-                                {subRow}
-                              </React.Fragment>
-                            );
-                          })
-                        )}
-                      </Table.Body>
-
-                      {footerGroups.length > 0 && (
-                        <Table.Foot>
-                          {footerGroups.map((footerGroup) => (
-                            <Table.Row key={footerGroup.id}>
-                              {footerGroup.headers.map((header) => (
-                                <Table.Cell key={header.id}>
-                                  {header.isPlaceholder ? null : (
-                                    <NativeCellContent
-                                      cellDef={header.column.columnDef.footer}
-                                      ctx={header.getContext()}
-                                    />
-                                  )}
-                                </Table.Cell>
-                              ))}
                             </Table.Row>
                           ))}
-                        </Table.Foot>
-                      )}
-                    </Table>
-                  </View>
-                </ScrollView>
-              )}
+                        </Table.Head>
 
-              {infinite ? (
-                <DataTableInfiniteTail
-                  infinite={infinite}
-                  visibleCount={tableRows.length}
-                  showAppendSkeleton={!isVirtualGrid}
-                  rowHeightPx={rowHeightPx}
-                  fontSize={knobProps.sizeToken}
-                  gapProps={knobProps.gap}
-                  sentinel={
-                    !isVirtualGrid && !infinite.exhausted && !infinite.appendError ? (
-                      <NativeInfiniteSentinel
-                        onVisible={infinite.loadMore}
-                        leadPx={INFINITE_TRIGGER_ROWS * rowHeightPx}
-                      />
-                    ) : null
-                  }
-                />
-              ) : null}
+                        <Table.Body aria-label="Table data">
+                          {displayRows.length === 0 ? (
+                            <Table.Row>
+                              <Table.Cell>
+                                {queryInFlight ? null : (
+                                  <EmptyState
+                                    size="$3"
+                                    aria-live="polite"
+                                    title={
+                                      computed.hasActiveFilters
+                                        ? t("No results found")
+                                        : t("No data available")
+                                    }
+                                  />
+                                )}
+                              </Table.Cell>
+                            </Table.Row>
+                          ) : isVirtualized ? (
+                            <View style={{ height: virtualizationHeight }}>
+                              <FlashList
+                                keyboardShouldPersistTaps="handled"
+                                ref={flashListRef}
+                                data={displayRows}
+                                drawDistance={rowHeightPx * virtualizationOverscan}
+                                keyExtractor={(row) => row.id}
+                                renderItem={({ item, index }) => renderRow(item, index)}
+                                {...(infinite && !infinite.exhausted
+                                  ? {
+                                      onEndReached: infinite.loadMore,
+                                      onEndReachedThreshold:
+                                        (INFINITE_TRIGGER_ROWS * rowHeightPx) /
+                                        virtualizationHeight!,
+                                    }
+                                  : {})}
+                              />
+                            </View>
+                          ) : (
+                            displayRows.map((row, index) => {
+                              const mainRow = renderRow(row, index);
+                              const subRow =
+                                enableRowExpansion &&
+                                renderSubComponent &&
+                                row.getIsExpanded() &&
+                                !row.subRows?.length ? (
+                                  <Table.Row key={`${row.id}-sub`} backgroundColor="$color2">
+                                    <Table.Cell
+                                      {...({
+                                        colSpan:
+                                          table.getVisibleLeafColumns().length +
+                                          extraColumnsBefore +
+                                          extraColumnsAfter,
+                                      } as any)}
+                                    >
+                                      {renderSubComponent(row)}
+                                    </Table.Cell>
+                                  </Table.Row>
+                                ) : null;
+                              return (
+                                <React.Fragment key={row.id}>
+                                  {mainRow}
+                                  {subRow}
+                                </React.Fragment>
+                              );
+                            })
+                          )}
+                        </Table.Body>
 
-              {enableRowSelection && bulkBarPlacement === "bottom" ? (
-                <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
-                  <DataTableBulkActions
-                    actions={resolvedBulkActions}
-                    maxVisibleActions={5}
-                    showSelectionCount
-                    placement="bottom"
+                        {footerGroups.length > 0 && (
+                          <Table.Foot>
+                            {footerGroups.map((footerGroup) => (
+                              <Table.Row key={footerGroup.id}>
+                                {footerGroup.headers.map((header) => (
+                                  <Table.Cell key={header.id}>
+                                    {header.isPlaceholder ? null : (
+                                      <NativeCellContent
+                                        cellDef={header.column.columnDef.footer}
+                                        ctx={header.getContext()}
+                                      />
+                                    )}
+                                  </Table.Cell>
+                                ))}
+                              </Table.Row>
+                            ))}
+                          </Table.Foot>
+                        )}
+                      </Table>
+                    </View>
+                  </ScrollView>
+                </Surface>
+              )}
+
+              <Surface size={tableSize}>
+                {infinite ? (
+                  <DataTableInfiniteTail
+                    infinite={infinite}
+                    visibleCount={tableRows.length}
+                    showAppendSkeleton={!isVirtualGrid}
+                    rowHeightPx={rowHeightPx}
+                    fontSize={knobProps.sizeToken}
+                    gapProps={knobProps.gap}
+                    sentinel={
+                      !isVirtualGrid && !infinite.exhausted && !infinite.appendError ? (
+                        <NativeInfiniteSentinel
+                          onVisible={infinite.loadMore}
+                          leadPx={INFINITE_TRIGGER_ROWS * rowHeightPx}
+                        />
+                      ) : null
+                    }
                   />
-                </View>
-              ) : null}
+                ) : null}
 
-              {showAddRow && !readOnly && (
-                <View>
-                  <Button
-                    icon={PlusIcon}
-                    disabled={disabled || (maxRows !== undefined && tableData.length >= maxRows)}
-                    onPress={isFormMode ? effectiveHandleAddRow : handleAddRow}
-                    aria-label={t("Add Row")}
-                  >
-                    {t("Add Row")}
-                  </Button>
-                </View>
-              )}
+                {enableRowSelection && bulkBarPlacement === "bottom" ? (
+                  <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
+                    <DataTableBulkActions
+                      actions={resolvedBulkActions}
+                      maxVisibleActions={5}
+                      showSelectionCount
+                      placement="bottom"
+                    />
+                  </View>
+                ) : null}
+
+                {showAddRow && !readOnly && (
+                  <View>
+                    <Button
+                      icon={PlusIcon}
+                      disabled={disabled || (maxRows !== undefined && tableData.length >= maxRows)}
+                      onPress={isFormMode ? effectiveHandleAddRow : handleAddRow}
+                      aria-label={t("Add Row")}
+                    >
+                      {t("Add Row")}
+                    </Button>
+                  </View>
+                )}
+              </Surface>
 
               {!showCards && enablePagination && !infinite && (
                 <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
@@ -1103,7 +1111,6 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     },
     [
       resolvedSize,
-      isCompact,
       stateContextValue,
       ariaLabel,
       ariaDescribedBy,