@multiplatform.one/table 6.0.0

package/src/components/DataTable/DataTableContext.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+
+import { createStyledContext } from "tamagui";
+
+export const DataTableContext = createStyledContext<{
+  size: "sm" | "md" | "lg";
+  compact: boolean;
+}>({
+  size: "md",
+  compact: false,
+});

package/src/components/DataTable/DataTableMobileCards.tsx

@@ -0,0 +1,164 @@
+/**
+ * DataTableMobileCards - mobile card view for DataTable.
+ *
+ * Renders data as stacked cards instead of table rows when the
+ * screen is at the mobile breakpoint (sm === false).
+ */
+
+import { TrashIcon } from "@phosphor-icons/react";
+import { Button } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type React from "react";
+import { useCallback } from "react";
+import { Text, View } from "tamagui";
+import { useTranslation } from "react-i18next";
+import type { DataTableColumn } from "../../types";
+
+export interface DataTableMobileCardsProps<TData> {
+  tableRows: any[];
+  showRowNumbers: boolean;
+  showDeleteRow: boolean;
+  readOnly: boolean;
+  dataLength: number;
+  minRows: number;
+  hasActiveFilters: boolean;
+  renderCellContent: (cell: any, rowIndex: number, rowData: TData) => React.ReactNode;
+  onDeleteRow: (rowIndex: number) => void;
+}
+
+export function DataTableMobileCards<TData extends Record<string, any>>({
+  tableRows,
+  showRowNumbers,
+  showDeleteRow,
+  readOnly,
+  dataLength,
+  minRows,
+  hasActiveFilters,
+  renderCellContent,
+  onDeleteRow,
+}: DataTableMobileCardsProps<TData>) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+
+  const renderMobileCard = useCallback(
+    (row: any, index: number) => {
+      const rowData = row.original as TData;
+      const visibleCells = row.getVisibleCells();
+
+      return (
+        <View
+          key={`${row.id}-${index}`}
+          backgroundColor="$color1"
+          {...knobProps.borderRadius}
+          borderColor="$color6"
+          {...knobProps.panelPadding}
+          marginBottom="$2"
+        >
+          {/* Row number */}
+          {showRowNumbers && (
+            <View
+              flexDirection="row"
+              justifyContent="space-between"
+              paddingBottom="$2"
+              borderBottomWidth={1}
+              borderBottomColor="$color6"
+              marginBottom="$2"
+            >
+              <Text fontSize={knobProps.sizeToken} color="$color10" fontWeight="600">
+                #{index + 1}
+              </Text>
+              {showDeleteRow && !readOnly && (
+                <Button
+                  chromeless
+                  circular
+                  size="$2"
+                  icon={TrashIcon}
+                  disabled={dataLength <= minRows}
+                  onPress={() => onDeleteRow(index)}
+                  aria-label={t("Delete row")}
+                />
+              )}
+            </View>
+          )}
+
+          {/* Field rows */}
+          {visibleCells.map((cell: any) => {
+            const columnDef = cell.column.columnDef as DataTableColumn;
+            const headerLabel =
+              typeof columnDef.header === "string"
+                ? columnDef.header
+                : columnDef.id || cell.column.id;
+
+            return (
+              <View
+                key={cell.id}
+                flexDirection="row"
+                alignItems="center"
+                paddingVertical="$1.5"
+                gap="$2"
+              >
+                <Text
+                  fontSize={knobProps.sizeToken}
+                  color="$color10"
+                  fontWeight="500"
+                  width="40%"
+                  flexShrink={0}
+                >
+                  {headerLabel}
+                </Text>
+                <View flex={1}>{renderCellContent(cell, index, rowData)}</View>
+              </View>
+            );
+          })}
+
+          {/* Delete button (if no row numbers shown) */}
+          {!showRowNumbers && showDeleteRow && !readOnly && (
+            <View paddingTop="$2" alignItems="flex-end">
+              <Button
+                chromeless
+                circular
+                size="$2"
+                icon={TrashIcon}
+                disabled={dataLength <= minRows}
+                onPress={() => onDeleteRow(index)}
+                aria-label={t("Delete row")}
+              />
+            </View>
+          )}
+        </View>
+      );
+    },
+    [
+      showRowNumbers,
+      showDeleteRow,
+      readOnly,
+      dataLength,
+      minRows,
+      renderCellContent,
+      onDeleteRow,
+      knobProps,
+      t,
+    ],
+  );
+
+  return (
+    <View flexDirection="column" {...knobProps.gap}>
+      {tableRows.length === 0 ? (
+        <View
+          padding="$8"
+          alignItems="center"
+          justifyContent="center"
+          backgroundColor="$color1"
+          {...knobProps.borderRadius}
+          aria-live="polite"
+        >
+          <Text color="$color10" fontSize={knobProps.sizeToken}>
+            {hasActiveFilters ? t("No results found") : t("No data available")}
+          </Text>
+        </View>
+      ) : (
+        tableRows.map((row: any, index: number) => renderMobileCard(row, index))
+      )}
+    </View>
+  );
+}