@multiplatform.one/table 6.0.0

package/src/components/DataTableColumnPinning/index.tsx

@@ -0,0 +1,291 @@
+import { PushPinIcon, PushPinSlashIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type { Table as ReactTable } from "@tanstack/react-table";
+import { useCallback, useMemo, useState } from "react";
+import { Button } from "@multiplatform.one/forms";
+import { Text, View, styled } from "tamagui";
+import { useDataTableState } from "../DataTable/DataTableStateContext";
+
+interface DataTableColumnPinningProps<TData> {
+  table?: ReactTable<TData>;
+  onPinChange?: (columnId: string, position?: "left" | "right") => void;
+  maxPinnedColumns?: number;
+  allowPinning?: boolean;
+}
+
+const StickyColumn = styled(View, {
+  name: "DataTableStickyColumnFrame",
+  backgroundColor: "$background",
+  zIndex: 1,
+  variants: {
+    position: {
+      left: {
+        left: 0,
+      },
+      right: {
+        right: 0,
+        borderLeftWidth: 1,
+        borderRightWidth: 0,
+      },
+    },
+  } as const,
+});
+
+const PinnedIndicator = styled(View, {
+  name: "DataTablePinnedIndicatorFrame",
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  width: 3,
+  backgroundColor: "$accentBackground",
+  variants: {
+    position: {
+      left: {
+        left: 0,
+      },
+      right: {
+        right: 0,
+      },
+    },
+  } as const,
+});
+
+export type StickyColumnProps = React.ComponentProps<typeof StickyColumn>;
+export type PinnedIndicatorProps = React.ComponentProps<typeof PinnedIndicator>;
+
+export function DataTableColumnPinning<TData>(props: DataTableColumnPinningProps<TData>) {
+  // Try to consume from DataTableStateContext (compound component pattern)
+  const ctx = useDataTableState();
+
+  // Resolve values: explicit props override context values
+  const table = props.table ?? (ctx?.table as ReactTable<TData> | undefined);
+
+  if (!table) {
+    throw new Error(
+      "DataTableColumnPinning requires a `table` prop or must be used inside a DataTable compound component.",
+    );
+  }
+
+  const { onPinChange, maxPinnedColumns = 3, allowPinning = true } = props;
+
+  const { knobProps } = useResolvedKnobs();
+
+  // Get fresh table state on each render
+  const pinnedColumns = table.getState().columnPinning || {
+    left: [],
+    right: [],
+  };
+
+  const togglePin = useCallback(
+    (columnId: string, position?: "left" | "right") => {
+      const currentPinning = table.getState().columnPinning || {
+        left: [],
+        right: [],
+      };
+      const isCurrentlyPinnedLeft = (currentPinning.left || []).includes(columnId);
+      const isCurrentlyPinnedRight = (currentPinning.right || []).includes(columnId);
+
+      const newPinned = { ...currentPinning };
+
+      // Unpin if already pinned
+      if (isCurrentlyPinnedLeft) {
+        newPinned.left = (currentPinning.left || []).filter((id) => id !== columnId);
+        onPinChange?.(columnId, undefined);
+      } else if (isCurrentlyPinnedRight) {
+        newPinned.right = (currentPinning.right || []).filter((id) => id !== columnId);
+        onPinChange?.(columnId, undefined);
+      } else {
+        // Pin to specified position
+        if (position === "left") {
+          if ((currentPinning.left || []).length < maxPinnedColumns) {
+            newPinned.left = [...(currentPinning.left || []), columnId];
+            onPinChange?.(columnId, "left");
+          } else {
+            return; // Don't pin if max limit reached
+          }
+        } else if (position === "right") {
+          if ((currentPinning.right || []).length < maxPinnedColumns) {
+            newPinned.right = [...(currentPinning.right || []), columnId];
+            onPinChange?.(columnId, "right");
+          } else {
+            return; // Don't pin if max limit reached
+          }
+        }
+      }
+
+      // Update table state
+      table.setColumnPinning(newPinned);
+    },
+    [maxPinnedColumns, onPinChange, table],
+  );
+
+  const isPinned = useCallback(
+    (columnId: string) => {
+      return (
+        (pinnedColumns.left || []).includes(columnId) ||
+        (pinnedColumns.right || []).includes(columnId)
+      );
+    },
+    [pinnedColumns],
+  );
+
+  const getPinPosition = useCallback(
+    (columnId: string): "left" | "right" | undefined => {
+      if ((pinnedColumns.left || []).includes(columnId)) return "left";
+      if ((pinnedColumns.right || []).includes(columnId)) return "right";
+      return undefined;
+    },
+    [pinnedColumns],
+  );
+
+  const canPin = useCallback(
+    (position: "left" | "right") => {
+      return position === "left"
+        ? (pinnedColumns.left || []).length < maxPinnedColumns
+        : (pinnedColumns.right || []).length < maxPinnedColumns;
+    },
+    [pinnedColumns, maxPinnedColumns],
+  );
+
+  const PinButton = useCallback(
+    ({ columnId, position }: { columnId: string; position?: "left" | "right" }) => {
+      const pinned = isPinned(columnId);
+      const currentPosition = getPinPosition(columnId);
+
+      if (!allowPinning) return null;
+
+      return (
+        <Button
+          size={knobProps.sizeToken}
+          icon={pinned ? PushPinSlashIcon : PushPinIcon}
+          onPress={() => togglePin(columnId, position || "left")}
+          disabled={!pinned && !canPin(position || "left")}
+          variant={pinned ? "outlined" : undefined}
+          circular
+          aria-label={
+            pinned ? `Unpin column ${columnId}` : `Pin column ${columnId} ${position || "left"}`
+          }
+          {...knobProps.borderRadius}
+        >
+          {pinned && currentPosition && <Text fontSize="$1">{currentPosition}</Text>}
+        </Button>
+      );
+    },
+    [
+      isPinned,
+      getPinPosition,
+      allowPinning,
+      togglePin,
+      canPin,
+      knobProps.sizeToken,
+      knobProps.borderRadius,
+    ],
+  );
+
+  const pinnedLeftColumns = useMemo(() => {
+    return table.getAllColumns().filter((column) => (pinnedColumns.left || []).includes(column.id));
+  }, [table, pinnedColumns.left]);
+
+  const pinnedRightColumns = useMemo(() => {
+    return table
+      .getAllColumns()
+      .filter((column) => (pinnedColumns.right || []).includes(column.id));
+  }, [table, pinnedColumns.right]);
+
+  const scrollableColumns = useMemo(() => {
+    return table
+      .getAllColumns()
+      .filter(
+        (column) =>
+          !(pinnedColumns.left || []).includes(column.id) &&
+          !(pinnedColumns.right || []).includes(column.id),
+      );
+  }, [table, pinnedColumns]);
+
+  const ThemedStickyColumn = useCallback(
+    (props: React.ComponentProps<typeof StickyColumn>) => (
+      <StickyColumn {...knobProps.borderRadius} {...props} />
+    ),
+    [knobProps.borderRadius],
+  );
+
+  return {
+    pinnedColumns,
+    pinnedLeftColumns,
+    pinnedRightColumns,
+    scrollableColumns,
+    togglePin,
+    isPinned,
+    getPinPosition,
+    canPin,
+    PinButton,
+    StickyColumn: ThemedStickyColumn,
+    PinnedIndicator,
+  };
+}
+
+export function useColumnPinning<TData>(
+  table: ReactTable<TData>,
+  options?: {
+    maxPinnedColumns?: number;
+    allowPinning?: boolean;
+    initialPinnedColumns?: {
+      left?: string[];
+      right?: string[];
+    };
+  },
+) {
+  const [pinnedState, setPinnedState] = useState({
+    left: options?.initialPinnedColumns?.left || [],
+    right: options?.initialPinnedColumns?.right || [],
+  });
+
+  const pinColumn = useCallback(
+    (columnId: string, position: "left" | "right") => {
+      setPinnedState((prev) => {
+        const newState = { ...prev };
+        // Remove from other position if exists
+        newState.left = prev.left.filter((id) => id !== columnId);
+        newState.right = prev.right.filter((id) => id !== columnId);
+
+        // Add to new position
+        if (position === "left") {
+          newState.left = [...newState.left, columnId];
+        } else {
+          newState.right = [...newState.right, columnId];
+        }
+
+        table.setColumnPinning(newState);
+        return newState;
+      });
+    },
+    [table],
+  );
+
+  const unpinColumn = useCallback(
+    (columnId: string) => {
+      setPinnedState((prev) => {
+        const newState = {
+          left: prev.left.filter((id) => id !== columnId),
+          right: prev.right.filter((id) => id !== columnId),
+        };
+        table.setColumnPinning(newState);
+        return newState;
+      });
+    },
+    [table],
+  );
+
+  const resetPinning = useCallback(() => {
+    const emptyState = { left: [], right: [] };
+    setPinnedState(emptyState);
+    table.setColumnPinning(emptyState);
+  }, [table]);
+
+  return {
+    pinnedState,
+    pinColumn,
+    unpinColumn,
+    resetPinning,
+  };
+}