@multiplatform.one/table 7.34.3 → 7.35.0

package/src/components/DataTable/DataTable.stories.tsx

@@ -325,8 +325,8 @@ const AdvancedTableStory = () => {
           renderFilters={(props) => (
             <DataTableFilters {...props} availableColumns={columnsWithCounts} maxFilters={5} />
           )}
-          renderPagination={(props) => <DataTablePagination {...props} compact />}
-          size="md"
+          renderPagination={(props) => <DataTablePagination {...props} size="$3" />}
+          size="$true"
           aria-label="User management table"
         />
       </YStack>
@@ -347,7 +347,7 @@ const SimpleTableStory = () => {
         enableSorting={true}
         enablePagination={true}
         enableGlobalSearch={true}
-        size="sm"
+        size="$3"
       />
     </View>
   );
@@ -549,7 +549,7 @@ export const Compact: Story = {
   args: {
     data: sampleData,
     columns: basicColumns as DataTableColumn<Record<string, any>>[],
-    size: "sm",
+    size: "$3",
   },
 };
 
@@ -557,7 +557,7 @@ export const Large: Story = {
   args: {
     data: sampleData,
     columns: basicColumns as DataTableColumn<Record<string, any>>[],
-    size: "lg",
+    size: "$5",
   },
 };
 

package/src/components/DataTable/DataTableCardControls.tsx

@@ -34,7 +34,6 @@ export interface DataTableCardControlsProps {
     type: DataTableColumnType;
     options?: FacetedFilterOption[];
   }>;
-  compact?: boolean;
   /** Table-level disabled state (UX-011): controls render inert + LC-40 visible. */
   disabled?: boolean;
 }
@@ -46,12 +45,11 @@ function getColumnLabel(column: any): string {
 
 export function DataTableCardSortControl({
   table,
-  compact = false,
   disabled = false,
   contained = false,
-}: Pick<DataTableCardControlsProps, "table" | "compact" | "disabled"> & { contained?: boolean }) {
+}: Pick<DataTableCardControlsProps, "table" | "disabled"> & { contained?: boolean }) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ component: "DataTable", compact });
+  const { knobProps } = useResolvedKnobs({ component: "DataTable" });
   const chrome = dataTableChrome(String(knobProps.sizeToken));
   const [sortMenuOpen, setSortMenuOpen] = useState(false);
   const sortableColumns = table.getVisibleLeafColumns().filter((col: any) => col.getCanSort());
@@ -141,11 +139,10 @@ export function DataTableCardControls({
   enableSorting = false,
   enableFiltering = false,
   availableColumns = [],
-  compact = false,
   disabled = false,
 }: DataTableCardControlsProps) {
   const { t } = useTranslation();
-  const { disabledState } = useResolvedKnobs({ component: "DataTable", compact });
+  const { disabledState } = useResolvedKnobs({ component: "DataTable" });
   if (!enableSorting && !enableFiltering) return null;
   return (
     <XStack
@@ -156,9 +153,7 @@ export function DataTableCardControls({
       role="toolbar"
       aria-label={t("Card list controls")}
     >
-      {enableSorting && (
-        <DataTableCardSortControl table={table} compact={compact} disabled={disabled} />
-      )}
+      {enableSorting && <DataTableCardSortControl table={table} disabled={disabled} />}
       {enableFiltering && availableColumns.length > 0 && (
         // DataTableFilters (chrome) has no disabled API — the wrapper is the
         // LC-40 carrier and interaction gate for the disabled table.
@@ -167,7 +162,7 @@ export function DataTableCardControls({
             ? { ...disabledState.chromeKnobProps, pointerEvents: "none" as const }
             : {})}
         >
-          <DataTableFilters compact availableColumns={availableColumns} />
+          <DataTableFilters size="$3" availableColumns={availableColumns} />
         </View>
       )}
     </XStack>

package/src/components/DataTable/DataTableContext.ts

@@ -1,16 +1,14 @@
 /**
  * DataTableContext - styled context for DataTable compound component.
  *
- * Shares variant props (size, compact) across the compound tree
- * so sub-components render with consistent sizing without prop drilling.
+ * Shares the table's size token across the compound tree so sub-components
+ * render with consistent sizing without prop drilling.
  */
 
-import { createStyledContext } from "tamagui";
+import { createStyledContext, type SizeTokens } from "tamagui";
 
 export const DataTableContext = createStyledContext<{
-  size: "sm" | "md" | "lg";
-  compact: boolean;
+  size: SizeTokens;
 }>({
-  size: "md",
-  compact: false,
+  size: "$true",
 });

package/src/components/DataTable/DataTableDocumentList.tsx

@@ -1,19 +1,24 @@
 /**
  * DataTableDocumentList — subject-led document rows (desk List view).
  *
- * One horizontal row per document: checkbox | title + stacked meta | trailing
- * indicators | actions. No key-value labels, no card chrome, no grid headers,
+ * One horizontal row per document: checkbox | title over one wrapping meta
+ * line | fixed-width numeric/date columns (ListRowMeta) | indicators | actions.
+ * A record is one 48–56 px row: metas never stack one line per column. No key-value labels, no card chrome, no grid headers,
  * no wrapping into a column grid (Polaris Index / Frappe list). Stacked-group
  * radius (LC-72): first row top corners, last row bottom, interiors square.
+ * In the compact size class the trailing columns, indicators and actions
+ * wrap in one line under the subject so they never narrow the title, and an
+ * empty meta field is left out (FZ-7374).
  * LC-71: selected = fill; keyboard ring rides the row when it is the tab stop.
  */
 
-import { EmptyState } from "@multiplatform.one/components";
+import { EmptyState, ListRowMeta } from "@multiplatform.one/components";
 import { Checkbox } from "@multiplatform.one/forms";
 import {
   getGroupPosition,
   hairline,
   stackRadiusProps,
+  useLayoutSizeClass,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import { TableCellContext } from "@multiplatform.one/table-primitives";
@@ -50,26 +55,31 @@ export interface DataTableDocumentListProps<TData> {
   disabled?: boolean;
   hasActiveFilters: boolean;
   renderCellContent: (cell: any, rowIndex: number, rowData: TData) => React.ReactNode;
-  compact?: boolean;
   selectRowLabel?: (row: any, rowIndex: number) => string;
   getRowPressProps?: (row: any, rowIndex: number, variant?: "row" | "card") => Record<string, any>;
   /** In-flight refetch: do not paint empty-state over a blank body. */
   queryInFlight?: boolean;
 }
 
+function isEmptyMetaCell(cell: any): boolean {
+  if (!cell.column?.accessorFn) return false;
+  const value = cell.getValue?.();
+  return value == null || value === "" || (Array.isArray(value) && value.length === 0);
+}
+
 export function DataTableDocumentList<TData extends Record<string, any>>({
   tableRows,
   enableRowSelection = false,
   disabled = false,
   hasActiveFilters,
   renderCellContent,
-  compact = false,
   selectRowLabel,
   getRowPressProps,
   queryInFlight = false,
 }: DataTableDocumentListProps<TData>) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ component: "DataTable", compact });
+  const { knobProps } = useResolvedKnobs({ component: "DataTable" });
+  const compact = useLayoutSizeClass() === "compact";
   const chrome = dataTableChrome(String(knobProps.sizeToken));
   const tableZebraOn = knobProps.tableZebra === "on";
   const rowPad = knobProps.panelPadding.padding;
@@ -79,7 +89,38 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
       const rowData = row.original as TData;
       const visibleCells = row.getVisibleCells();
       const titleCell = pickDocumentListTitleCell(visibleCells);
-      const { indicators, metas, actions } = partitionDocumentListCells(visibleCells, titleCell);
+      const {
+        indicators,
+        trailing,
+        metas: metaCells,
+        actions,
+      } = partitionDocumentListCells(visibleCells, titleCell);
+      const metas = metaCells.filter((cell: any) => !isEmptyMetaCell(cell));
+      const slotCell = (cell: any, slot: "indicator" | "actions") => (
+        <View
+          key={cell.id}
+          flexShrink={0}
+          minWidth={0}
+          overflow="hidden"
+          {...({ "data-list-slot": slot } as any)}
+        >
+          <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
+            {renderCellContent(cell, index, rowData)}
+          </TableCellContext.Provider>
+        </View>
+      );
+      const indicatorCells = indicators.map((cell: any) => slotCell(cell, "indicator"));
+      const actionCells = actions.map((cell: any) => slotCell(cell, "actions"));
+      // A compact row drops the fixed column width: the values wrap under
+      // the subject with the indicators and actions.
+      const trailingCells = trailing.map((cell: any) => (
+        <ListRowMeta key={cell.id} width={compact ? undefined : "$10"}>
+          <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
+            {renderCellContent(cell, index, rowData)}
+          </TableCellContext.Provider>
+        </ListRowMeta>
+      ));
+      const compactLine = [...trailingCells, ...indicatorCells, ...actionCells];
       const position = getGroupPosition(index, tableRows.length);
       const corners = stackRadiusProps(position, knobProps.borderRadiusOuter.borderRadius);
       const selected = Boolean(enableRowSelection && row.getIsSelected?.());
@@ -95,7 +136,7 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
           {index > 0 ? <View {...hairline.line} /> : null}
           <XStack
             testID="data-table-list-row"
-            alignItems="center"
+            alignItems={compact ? "flex-start" : "center"}
             gap="$3"
             paddingHorizontal={rowPad}
             paddingVertical="$2"
@@ -130,7 +171,6 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
                       row: index + 1,
                     }),
                 }}
-                compact={compact}
               />
             )}
             <YStack flex={1} minWidth={0} gap="$1" overflow="hidden">
@@ -143,44 +183,62 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
               ) : (
                 <View flex={1} />
               )}
-              {metas.map((cell: any) => (
-                <View
-                  key={cell.id}
+              {metas.length > 0 ? (
+                <XStack
                   minWidth={0}
+                  flexWrap="wrap"
+                  alignItems="center"
+                  columnGap="$3"
+                  rowGap="$1"
                   opacity={0.7}
                   overflow="hidden"
-                  {...({ "data-list-slot": "meta" } as any)}
+                  {...({ "data-list-slot": "meta-line" } as any)}
                 >
-                  <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
-                    {renderCellContent(cell, index, rowData)}
-                  </TableCellContext.Provider>
-                </View>
-              ))}
+                  {metas.map((cell: any) => (
+                    <View
+                      key={cell.id}
+                      minWidth={0}
+                      flexShrink={1}
+                      overflow="hidden"
+                      {...({ "data-list-slot": "meta" } as any)}
+                    >
+                      <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
+                        {renderCellContent(cell, index, rowData)}
+                      </TableCellContext.Provider>
+                    </View>
+                  ))}
+                </XStack>
+              ) : null}
+              {compact && compactLine.length > 0 ? (
+                <XStack
+                  gap="$2"
+                  alignItems="center"
+                  flexWrap="wrap"
+                  {...({ "data-list-slot": "trailing-line" } as any)}
+                >
+                  {compactLine}
+                </XStack>
+              ) : null}
             </YStack>
-            {indicators.length > 0 ? (
+            {!compact && trailing.length > 0 ? (
+              <XStack
+                flexShrink={0}
+                gap="$3"
+                alignItems="center"
+                flexWrap="nowrap"
+                {...({ "data-list-slot": "trailing-cluster" } as any)}
+              >
+                {trailingCells}
+              </XStack>
+            ) : null}
+            {!compact && indicators.length > 0 ? (
               <XStack flexShrink={0} gap="$2" alignItems="center" flexWrap="nowrap" maxWidth="40%">
-                {indicators.map((cell: any) => (
-                  <View
-                    key={cell.id}
-                    flexShrink={0}
-                    {...({ "data-list-slot": "indicator" } as any)}
-                  >
-                    <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
-                      {renderCellContent(cell, index, rowData)}
-                    </TableCellContext.Provider>
-                  </View>
-                ))}
+                {indicatorCells}
               </XStack>
             ) : null}
-            {actions.length > 0 ? (
+            {!compact && actions.length > 0 ? (
               <XStack flexShrink={0} gap="$1" alignItems="center" flexWrap="nowrap">
-                {actions.map((cell: any) => (
-                  <View key={cell.id} flexShrink={0} {...({ "data-list-slot": "actions" } as any)}>
-                    <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
-                      {renderCellContent(cell, index, rowData)}
-                    </TableCellContext.Provider>
-                  </View>
-                ))}
+                {actionCells}
               </XStack>
             ) : null}
           </XStack>
@@ -199,6 +257,7 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
       t,
       tableRows.length,
       tableZebraOn,
+      compact,
     ],
   );
 
@@ -213,7 +272,7 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
       {tableRows.length === 0 ? (
         queryInFlight ? null : (
           <EmptyState
-            compact
+            size="$3"
             backgroundColor="$color1"
             {...knobProps.borderRadius}
             aria-live="polite"

package/src/components/DataTable/DataTableInfiniteTail.tsx

@@ -48,7 +48,7 @@ export function DataTableInfiniteTail({
           error={infinite.appendError}
           onRetry={infinite.retryAppend}
           errorTitle={t("Couldn't load more rows")}
-          compact
+          size="$3"
         />
       </View>
     );

package/src/components/DataTable/DataTableMobileCards.tsx

@@ -126,7 +126,6 @@ export interface DataTableMobileCardsProps<TData> {
   selectAllChecked?: boolean;
   selectAllIndeterminate?: boolean;
   onToggleSelectAll?: () => void;
-  compact?: boolean;
   /**
    * Accessible name for a row's selection checkbox ("Select row {identity}",
    * built by DataTableRoot so cards and grid share one naming source).
@@ -159,13 +158,12 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
   selectAllChecked = false,
   selectAllIndeterminate = false,
   onToggleSelectAll,
-  compact = false,
   selectRowLabel,
   getRowPressProps,
   queryInFlight = false,
 }: DataTableMobileCardsProps<TData>) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ component: "DataTable", compact });
+  const { knobProps } = useResolvedKnobs({ component: "DataTable" });
   const tableZebraOn = knobProps.tableZebra === "on";
 
   const renderCell = useCallback(
@@ -241,7 +239,6 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
                       row: index + 1,
                     }),
                 }}
-                compact={compact}
               />
             )}
             {titleCell ? (
@@ -258,7 +255,7 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
               <View flex={1} />
             )}
             {showRowNumbers && (
-              <Text fontSize={knobProps.sizeToken} color="$color10" fontWeight="600">
+              <Text fontSize={knobProps.sizeToken} color="$color10">
                 #{index + 1}
               </Text>
             )}
@@ -321,7 +318,7 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
             >
               {figures.map((cell: any) => (
                 <XStack key={cell.id} alignItems="center" gap="$1.5" flexShrink={1} minWidth={0}>
-                  <Text fontSize={knobProps.sizeToken} color="$color10" fontWeight="500">
+                  <Text fontSize={knobProps.sizeToken} color="$color10">
                     {getColumnLabel(cell)}
                   </Text>
                   <View flexShrink={1} minWidth={0}>
@@ -357,7 +354,6 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
       minRows,
       renderCell,
       onDeleteRow,
-      compact,
       knobProps,
       tableZebraOn,
       t,
@@ -386,7 +382,6 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
             }}
             disabled={disabled}
             checkboxProps={{ "aria-label": t("Select all rows") }}
-            compact={compact}
           />
           <Text fontSize={knobProps.sizeToken} color="$color10">
             {t("Select all")}
@@ -396,7 +391,7 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
       {tableRows.length === 0 ? (
         queryInFlight ? null : (
           <EmptyState
-            compact
+            size="$3"
             backgroundColor="$color1"
             {...knobProps.borderRadius}
             aria-live="polite"