@multiplatform.one/table 6.0.0

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@multiplatform.one/table",
+  "version": "6.0.0",
+  "description": "Advanced table components with filtering, pagination, sorting, and URL state management",
+  "keywords": [
+    "cross-platform",
+    "data-table",
+    "filtering",
+    "multiplatform",
+    "pagination",
+    "react",
+    "react-native",
+    "sorting",
+    "table",
+    "tamagui",
+    "tanstack-table",
+    "url-state"
+  ],
+  "homepage": "https://multiplatform.one",
+  "bugs": {
+    "url": "https://gitlab.com/bitspur/multiplatform.one/multiplatform.one/issues",
+    "email": "support@risserlabs.com"
+  },
+  "license": "Apache-2.0",
+  "author": "BitSpur <support@risserlabs.com> (https://risserlabs.com)",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/bitspur/multiplatform.one/multiplatform.one.git"
+  },
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "source": "./src/index.ts",
+      "react-native": {
+        "import": "./dist/esm/index.native.js",
+        "require": "./dist/cjs/index.native.js"
+      },
+      "types": "./src/index.ts",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/cjs/index.cjs"
+    },
+    "./tableCellContext": {
+      "source": "./src/shims/tableCellContext.ts",
+      "types": "./src/shims/tableCellContext.ts",
+      "import": "./src/shims/tableCellContext.ts",
+      "require": "./src/shims/tableCellContext.ts",
+      "default": "./src/shims/tableCellContext.ts"
+    },
+    "./primitives": {
+      "source": "./src/shims/primitives.ts",
+      "types": "./src/shims/primitives.ts",
+      "import": "./src/shims/primitives.ts",
+      "require": "./src/shims/primitives.ts",
+      "default": "./src/shims/primitives.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.1.10",
+    "@shopify/flash-list": "^2.3.1",
+    "@tamagui/roving-focus": "2.0.0-rc.41",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/table-core": "^8.21.3",
+    "tamagui": "2.0.0-rc.41",
+    "@multiplatform.one/components": "6.0.0",
+    "@multiplatform.one/forms": "6.0.0",
+    "@multiplatform.one/platform": "6.0.0",
+    "@multiplatform.one/table-primitives": "6.0.0",
+    "@multiplatform.one/router": "6.0.0",
+    "@multiplatform.one/rich-text": "6.0.0",
+    "@multiplatform.one/theme": "6.0.0"
+  },
+  "devDependencies": {
+    "@tamagui/build": "2.0.0-rc.41",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "~19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "^4.1.5",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "vitest": "^4.1.5",
+    "@multiplatform.one/config": "6.0.0",
+    "@multiplatform.one/storybook": "6.0.0",
+    "@multiplatform.one/router": "6.0.0",
+    "@multiplatform.one/test-utils": "6.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "module:jsx": "dist/jsx",
+  "scripts": {
+    "build": "rm -rf dist types 2>/dev/null && tamagui-build --ts-project ./tsconfig.build.json",
+    "test": "vitest run --coverage --coverage.provider=v8 --coverage.reporter=text --coverage.reporter=lcov --coverage.reporter=html",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/components/ChildTable/index.tsx

@@ -0,0 +1,87 @@
+import type { ReactNode } from "react";
+import { FieldLayout, useFormField, type AnyFormApi } from "@multiplatform.one/forms";
+import { useProps } from "tamagui";
+import { TableInput } from "../TableInput";
+import type { DataTableColumn, DataTableData } from "../../types";
+
+export type ChildTableProps<TRow extends DataTableData = DataTableData> = {
+  name?: string;
+  form?: AnyFormApi;
+  validators?: Record<string, unknown>;
+  value?: TRow[];
+  onChange?: (rows: TRow[]) => void;
+  columns: DataTableColumn<TRow>[];
+  defaultRow?: Partial<TRow>;
+  disabled?: boolean;
+  readOnly?: boolean;
+  minRows?: number;
+  maxRows?: number;
+  showRowNumbers?: boolean;
+  showAddRow?: boolean;
+  showDeleteRow?: boolean;
+  label?: ReactNode;
+  error?: string | boolean;
+  helperText?: string;
+  required?: boolean;
+  id?: string;
+};
+
+export function ChildTable<TRow extends DataTableData = DataTableData>(
+  props: ChildTableProps<TRow>,
+) {
+  const {
+    name,
+    form,
+    value,
+    onChange,
+    columns,
+    defaultRow,
+    disabled,
+    readOnly,
+    minRows,
+    maxRows,
+    showRowNumbers = true,
+    showAddRow = true,
+    showDeleteRow = true,
+    label,
+    error,
+    helperText,
+    required,
+    id: idProp,
+  } = useProps(props);
+
+  const { knobProps, id } = useFormField({ form, id: idProp });
+  const hasLayout = label || error || helperText || required;
+
+  const table = (
+    <TableInput
+      name={name}
+      form={form as any}
+      data={value ?? []}
+      onDataChange={onChange}
+      columns={columns ?? []}
+      defaultRow={defaultRow}
+      readOnly={readOnly || disabled}
+      minRows={minRows}
+      maxRows={maxRows}
+      showRowNumbers={showRowNumbers}
+      showAddRow={showAddRow && !readOnly && !disabled}
+      showDeleteRow={showDeleteRow && !readOnly && !disabled}
+    />
+  );
+
+  if (!hasLayout) return table;
+
+  return (
+    <FieldLayout
+      id={id}
+      label={label}
+      error={error}
+      helperText={helperText}
+      required={required}
+      knobProps={knobProps}
+    >
+      {table}
+    </FieldLayout>
+  );
+}

package/src/components/ColumnHeaderFilter/ColumnHeaderFilter.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta } from "@storybook/react-native-web-vite";
+import { YStack, Text } from "tamagui";
+
+const meta: Meta = {
+  title: "Table/ColumnHeaderFilter",
+  parameters: {
+    status: { type: "stable" },
+  },
+};
+
+export default meta;
+
+export const Default = {
+  name: "Main",
+  render: () => (
+    <YStack padding="$4">
+      <Text fontSize="$2" color="$color10">
+        ColumnHeaderFilter provides AG Grid-style column filtering with operators and value inputs.
+        It requires a DataTable column context. See DataTable stories for integrated usage.
+      </Text>
+    </YStack>
+  ),
+};

package/src/components/ColumnHeaderFilter/index.tsx

@@ -0,0 +1,274 @@
+/**
+ * ColumnHeaderFilter - Filter popover for individual column headers
+ * AG Grid style column filtering with operators and value inputs
+ */
+
+import { FunnelIcon } from "@phosphor-icons/react";
+import { Button, Input, Select } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState, useMemo } from "react";
+import { Tooltip } from "@multiplatform.one/components";
+import { Popover, Text, View, XStack, YStack } from "tamagui";
+import type { FilterOperator } from "../../types";
+
+export type ColumnFilterType = "text" | "number" | "date" | "boolean" | "select";
+
+export interface ColumnHeaderFilterProps {
+  columnId: string;
+  columnLabel: string;
+  columnType: ColumnFilterType;
+  /** Current filter value for this column */
+  filterValue?: any;
+  /** Callback when filter changes */
+  onFilterChange: (value: any) => void;
+  /** Options for select-type columns */
+  options?: Array<{ label: string; value: any }>;
+  /** Whether the column is currently filtered */
+  isFiltered?: boolean;
+}
+
+const TEXT_OPERATORS: FilterOperator[] = [
+  "contains",
+  "doesNotContain",
+  "is",
+  "isNot",
+  "startsWith",
+  "endsWith",
+  "isEmpty",
+  "isNotEmpty",
+];
+
+const NUMBER_OPERATORS: FilterOperator[] = [
+  "is",
+  "isNot",
+  "isLessThan",
+  "isGreaterThan",
+  "isLessThanOrEqual",
+  "isGreaterThanOrEqual",
+];
+
+const DATE_OPERATORS: FilterOperator[] = [
+  "is",
+  "isNot",
+  "isBefore",
+  "isAfter",
+  "isOnOrBefore",
+  "isOnOrAfter",
+];
+
+const BOOLEAN_OPERATORS: FilterOperator[] = ["is", "isNot"];
+
+const OPERATOR_LABELS: Record<string, string> = {
+  contains: "Contains",
+  doesNotContain: "Does not contain",
+  is: "Is",
+  isNot: "Is not",
+  startsWith: "Starts with",
+  endsWith: "Ends with",
+  isEmpty: "Is empty",
+  isNotEmpty: "Is not empty",
+  isLessThan: "Less than",
+  isGreaterThan: "Greater than",
+  isLessThanOrEqual: "Less than or equal",
+  isGreaterThanOrEqual: "Greater than or equal",
+  isBefore: "Before",
+  isAfter: "After",
+  isOnOrBefore: "On or before",
+  isOnOrAfter: "On or after",
+};
+
+export function ColumnHeaderFilter({
+  columnId: _columnId,
+  columnLabel,
+  columnType,
+  filterValue: _filterValue,
+  onFilterChange,
+  options,
+  isFiltered,
+}: ColumnHeaderFilterProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [open, setOpen] = useState(false);
+  const [operator, setOperator] = useState<FilterOperator>("contains");
+  const [value, setValue] = useState<string>("");
+
+  // Get operators based on column type
+  const operators = useMemo(() => {
+    switch (columnType) {
+      case "number":
+        return NUMBER_OPERATORS;
+      case "date":
+        return DATE_OPERATORS;
+      case "boolean":
+        return BOOLEAN_OPERATORS;
+      case "select":
+        return ["is", "isNot", "isAnyOf"] as FilterOperator[];
+      default:
+        return TEXT_OPERATORS;
+    }
+  }, [columnType]);
+
+  // Convert operators to forms Select options
+  const operatorOptions = useMemo(
+    () =>
+      operators.map((op) => ({
+        value: op,
+        label: OPERATOR_LABELS[op] || op,
+      })),
+    [operators],
+  );
+
+  const handleApply = () => {
+    if (["isEmpty", "isNotEmpty"].includes(operator)) {
+      onFilterChange({ operator, value: null });
+    } else {
+      onFilterChange({ operator, value });
+    }
+    setOpen(false);
+  };
+
+  const handleClear = () => {
+    setValue("");
+    setOperator("contains");
+    onFilterChange(undefined);
+    setOpen(false);
+  };
+
+  const needsValueInput = !["isEmpty", "isNotEmpty"].includes(operator);
+
+  // Boolean options for forms Select
+  const booleanOptions = [
+    { value: "true", label: "True" },
+    { value: "false", label: "False" },
+  ];
+
+  // Convert column options to forms Select format
+  const selectOptions = useMemo(
+    () =>
+      options?.map((opt) => ({
+        value: String(opt.value),
+        label: opt.label,
+      })) || [],
+    [options],
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Tooltip content={isFiltered ? "Edit filter" : "Filter this column"}>
+        <Popover.Trigger asChild>
+          <View
+            padding="$1"
+            borderRadius="$2"
+            cursor="pointer"
+            hoverStyle={{ backgroundColor: "$color4" }}
+            pressStyle={{ backgroundColor: "$color5" }}
+            onPress={(e) => {
+              e.stopPropagation();
+              setOpen(true);
+            }}
+            role="button"
+            aria-label={`Filter column ${columnLabel}`}
+          >
+            <FunnelIcon
+              size={14}
+              color={isFiltered ? "var(--accentColor)" : "var(--color10)"}
+              weight={isFiltered ? "fill" : "regular"}
+            />
+          </View>
+        </Popover.Trigger>
+      </Tooltip>
+
+      <Popover.Content
+        {...knobProps.borderRadius}
+        borderWidth={1}
+        borderColor="$color6"
+        backgroundColor="$background"
+        {...knobProps.panelPadding}
+        minWidth={240}
+        enterStyle={{ y: -5, opacity: 0 }}
+        exitStyle={{ y: -5, opacity: 0 }}
+        elevate
+      >
+        <Popover.Arrow borderWidth={1} borderColor="$color6" />
+
+        <YStack {...knobProps.gap}>
+          <Text fontSize={knobProps.sizeToken} fontWeight="600" color="$color11">
+            Filter: {columnLabel}
+          </Text>
+
+          {/* Operator select */}
+          <Select
+            label="Condition"
+            value={operator}
+            onValueChange={(v) => {
+              if (typeof v === "string") {
+                setOperator(v as FilterOperator);
+              }
+            }}
+            options={operatorOptions}
+            size="$3"
+            compact
+          />
+
+          {/* Value input */}
+          {needsValueInput && (
+            <YStack gap="$1">
+              {columnType === "boolean" ? (
+                <Select
+                  label="Value"
+                  value={value}
+                  onValueChange={(v) => {
+                    if (typeof v === "string") {
+                      setValue(v);
+                    }
+                  }}
+                  options={booleanOptions}
+                  placeholder="Select..."
+                  size="$3"
+                  compact
+                />
+              ) : columnType === "select" && options ? (
+                <Select
+                  label="Value"
+                  value={value}
+                  onValueChange={(v) => {
+                    if (typeof v === "string") {
+                      setValue(v);
+                    }
+                  }}
+                  options={selectOptions}
+                  placeholder="Select..."
+                  size="$3"
+                  compact
+                />
+              ) : (
+                <Input
+                  label="Value"
+                  value={value}
+                  onChangeText={setValue}
+                  placeholder={columnType === "date" ? "YYYY-MM-DD" : "Enter value..."}
+                  size="$3"
+                  compact
+                  {...(columnType === "number" && { keyboardType: "numeric" })}
+                />
+              )}
+            </YStack>
+          )}
+
+          {/* Actions */}
+          <XStack gap="$2" justifyContent="flex-end">
+            {isFiltered && (
+              <Button size="$2" variant="outlined" onPress={handleClear}>
+                Clear
+              </Button>
+            )}
+            <Button size="$2" onPress={handleApply}>
+              Apply
+            </Button>
+          </XStack>
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  );
+}
+
+export default ColumnHeaderFilter;