sea-dev 1.0.0

package/libs/ui/src/components/table/data-table.tsx

@@ -0,0 +1,546 @@
+import { cn } from "@/lib/utils";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@sea/ui/components/ui/table";
+import type { OnChangeFn, Row, Updater } from "@tanstack/react-table";
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  type SortingState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { notUndefined, useVirtualizer } from "@tanstack/react-virtual";
+import { RotateCcw } from "lucide-react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { Skeleton } from "../ui/skeleton";
+
+const CELL_HEIGHT = 53;
+
+function pluralizeFilterLabel(label: string): string {
+  const pluralMap: Record<string, string> = {
+    deal: "deals",
+    workflow: "workflows",
+    form: "forms",
+    status: "statuses",
+  };
+  return pluralMap[label.toLowerCase()] || label + "s";
+}
+
+function isStickyColumn({
+  stickyFirstColumn,
+  meta,
+  index,
+}: {
+  stickyFirstColumn: boolean;
+  meta?: { sticky?: boolean };
+  index: number;
+}): boolean {
+  if (!stickyFirstColumn) return false;
+  if (meta && typeof meta.sticky === "boolean") return meta.sticky;
+  // Fallback: treat the first visible column as the sticky one when no
+  // explicit meta is provided.
+  return index === 0;
+}
+
+export interface DataTableProps<TData extends object, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  loading?: boolean;
+  searchCol?: keyof TData & string;
+  filterCols?: Array<keyof TData>;
+  sortingState?: SortingState;
+  columnFiltersState?: ColumnFiltersState;
+  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+  onSearchChange?: (value: string) => void;
+  onSortingChange?: OnChangeFn<SortingState>;
+  onResetFilters?: () => void;
+  pivot?: boolean;
+  leftPad?: boolean;
+  /**
+   * When enabled, cells in columns marked with `columnDef.meta.sticky === true`
+   * (or the first visible column when no meta is provided) are rendered as
+   * `position: sticky` and pinned to the left edge of this table's scrollable
+   * container.
+   *
+   * Only a single sticky column is currently supported. If more than one column
+   * is marked sticky, only the leftmost column will render correctly.
+   */
+  stickyFirstColumn?: boolean;
+}
+
+export function DataTable<TData extends object, TValue>({
+  columns,
+  data,
+  loading = false,
+  searchCol,
+  filterCols,
+  sortingState,
+  columnFiltersState,
+  onColumnFiltersChange,
+  onSearchChange,
+  onSortingChange,
+  onResetFilters,
+  pivot = false,
+  leftPad = false,
+  stickyFirstColumn = false,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>(sortingState ?? []);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(columnFiltersState ?? []);
+
+  const resetState = useCallback(() => {
+    setSorting([]);
+    setColumnFilters([]);
+    onResetFilters?.();
+  }, [onResetFilters]);
+
+  const handleColumnFiltersChange = useCallback(
+    (updater: Updater<ColumnFiltersState>) => {
+      const nextFilters = typeof updater === "function" ? updater(columnFilters) : updater;
+      setColumnFilters(nextFilters);
+      onColumnFiltersChange?.(nextFilters);
+    },
+    [columnFilters, onColumnFiltersChange],
+  );
+
+  const handleSortingChange = useCallback(
+    (updater: Updater<SortingState>) => {
+      const nextSorting = typeof updater === "function" ? updater(sorting) : updater;
+      setSorting(nextSorting);
+      onSortingChange?.(nextSorting);
+    },
+    [sorting, onSortingChange],
+  );
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: handleSortingChange,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: handleColumnFiltersChange,
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      sorting,
+      columnFilters,
+    },
+  });
+
+  const filterOptions = useMemo(() => {
+    if (!filterCols) {
+      return {};
+    }
+
+    const options: Record<string, string[]> = {};
+    filterCols.forEach((col) => {
+      const colKey = String(col);
+      const uniqueValues = Array.from(
+        new Set(
+          data
+            .map((row) => row[col])
+            .filter((value) => value != null && value !== "")
+            .map((value) => String(value)),
+        ),
+      ).sort();
+      options[colKey] = uniqueValues;
+    });
+    return options;
+  }, [data, filterCols]);
+
+  const handleFilterChange = useCallback(
+    (columnId: string, value: string) => {
+      const column = table.getColumn(columnId);
+      if (column) {
+        column.setFilterValue(value === "all" ? "" : value);
+        // onColumnFiltersChange?.(column.getFilterValue());
+      }
+    },
+    [table, onColumnFiltersChange],
+  );
+
+  const hasActiveFilters =
+    (searchCol && (table?.getColumn(searchCol)?.getFilterValue() as string)) ||
+    (filterCols &&
+      filterCols.some((col) => {
+        const colKey = String(col);
+        return table.getColumn(colKey)?.getFilterValue();
+      }));
+
+  return (
+    <>
+      <div className="relative my-2 flex gap-4">
+        {searchCol && (
+          <Input
+            placeholder={`Filter by ${searchCol}...`}
+            value={(table?.getColumn(searchCol)?.getFilterValue() as string) ?? ""}
+            onChange={(event) => {
+              const value = event.target.value;
+              table?.getColumn(searchCol)?.setFilterValue(value);
+              onSearchChange?.(value);
+            }}
+            className="max-w-sm"
+          />
+        )}
+        {filterCols && (
+          <div className="ml-4 flex flex-wrap items-center gap-2">
+            {filterCols.map((col) => {
+              const colKey = String(col);
+              const options = filterOptions[colKey] || [];
+              const currentValue = (table.getColumn(colKey)?.getFilterValue() as string) || "";
+
+              return (
+                <Select
+                  key={colKey}
+                  value={currentValue || "all"}
+                  onValueChange={(value) => handleFilterChange(colKey, value)}
+                >
+                  <SelectTrigger className="!h-10 w-[150px]">
+                    <SelectValue placeholder={`Filter ${colKey}`} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All {pluralizeFilterLabel(colKey)}</SelectItem>
+                    {options.map((option) => (
+                      <SelectItem key={option} value={option}>
+                        {option}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              );
+            })}
+          </div>
+        )}
+        {hasActiveFilters && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => resetState()}
+            disabled={!hasActiveFilters}
+            className="absolute right-0 h-10"
+          >
+            <RotateCcw className="h-4 w-4" />
+            Reset Filters
+          </Button>
+        )}
+      </div>
+
+      {pivot ? (
+        <PivotedTable
+          table={table}
+          leftPad={leftPad}
+          loading={loading}
+          stickyFirstColumn={stickyFirstColumn}
+        />
+      ) : (
+        <NormalTable
+          table={table}
+          columns={columns}
+          leftPad={leftPad}
+          loading={loading}
+          stickyFirstColumn={stickyFirstColumn}
+        />
+      )}
+    </>
+  );
+}
+
+function NormalTable<TData extends object, TValue>({
+  table,
+  columns,
+  loading,
+  leftPad,
+  stickyFirstColumn,
+}: {
+  table: ReturnType<typeof useReactTable<TData>>;
+  columns: ColumnDef<TData, TValue>[];
+  loading: boolean;
+  leftPad: boolean;
+  stickyFirstColumn: boolean;
+}) {
+  const parentRef = useRef<HTMLDivElement>(null);
+  const { rows } = table.getRowModel();
+
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => CELL_HEIGHT,
+  });
+
+  const items = virtualizer.getVirtualItems();
+  const [before, after] =
+    items.length > 0
+      ? [
+          notUndefined(items[0]).start - virtualizer.options.scrollMargin,
+          virtualizer.getTotalSize() - notUndefined(items[items.length - 1]).end,
+        ]
+      : [0, 0];
+
+  return (
+    <div
+      ref={parentRef}
+      className="border-muted relative max-h-[500px] overflow-auto rounded-lg border"
+    >
+      <Table>
+        <TableHeader className="bg-muted">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header, index) => {
+                const isStickyHeaderCell = isStickyColumn({
+                  stickyFirstColumn,
+                  meta: header.column.columnDef.meta as { sticky?: boolean } | undefined,
+                  index,
+                });
+
+                return (
+                  <TableHead
+                    key={header.id}
+                    style={{ minWidth: header.column.columnDef.size }}
+                    className={cn(
+                      leftPad ? "pl-8" : "",
+                      isStickyHeaderCell
+                        ? "bg-muted sticky left-0 z-30 shadow-[4px_0_6px_-4px_rgba(0,0,0,0.2)]"
+                        : "",
+                    )}
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {before > 0 && (
+            <tr>
+              <td colSpan={columns.length} style={{ height: before }} />
+            </tr>
+          )}
+          {rows.length ? (
+            items.map((virtualRow, index) => (
+              <TRow
+                key={index}
+                row={rows[virtualRow.index]}
+                leftPad={leftPad}
+                stickyFirstColumn={stickyFirstColumn}
+              />
+            ))
+          ) : loading ? (
+            [1, 2, 3, 4, 5].map((row) => (
+              <TableRow key={row}>
+                <TableCell colSpan={columns.length}>
+                  <Skeleton className="h-10 w-full" key={row} />
+                </TableCell>
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length}>No data.</TableCell>
+            </TableRow>
+          )}
+          {after > 0 && (
+            <tr>
+              <td colSpan={columns.length} style={{ height: after }} />
+            </tr>
+          )}
+          {loading &&
+            rows.length > 0 &&
+            [1, 2, 3, 4, 5].map((row) => (
+              <TableRow key={row}>
+                <TableCell colSpan={columns.length}>
+                  <Skeleton className="h-10 w-full" key={row} />
+                </TableCell>
+              </TableRow>
+            ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+function PivotedTable<TData extends object>({
+  table,
+  loading,
+  leftPad,
+  stickyFirstColumn,
+}: {
+  table: ReturnType<typeof useReactTable<TData>>;
+  loading: boolean;
+  leftPad: boolean;
+  stickyFirstColumn: boolean;
+}) {
+  const parentRef = useRef<HTMLDivElement>(null);
+  const { rows } = table.getRowModel();
+  const headers = table.getHeaderGroups()[0]?.headers || [];
+  const [expandedHeaders, setExpandedHeaders] = useState<Set<string>>(new Set());
+
+  const virtualizer = useVirtualizer({
+    count: headers.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => CELL_HEIGHT,
+  });
+
+  const items = virtualizer.getVirtualItems();
+  const [before, after] =
+    items.length > 0
+      ? [
+          notUndefined(items[0]).start - virtualizer.options.scrollMargin,
+          virtualizer.getTotalSize() - notUndefined(items[items.length - 1]).end,
+        ]
+      : [0, 0];
+
+  const toggleHeader = (id: string) => {
+    setExpandedHeaders((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const isExpanded = (id: string) => expandedHeaders.has(id);
+
+  return (
+    <div ref={parentRef} className="border-muted max-h-[500px] overflow-auto rounded-lg border">
+      <Table>
+        <TableBody>
+          {before > 0 && (
+            <tr>
+              <td colSpan={rows.length + 1} style={{ height: before }} />
+            </tr>
+          )}
+          {headers.length ? (
+            items.map((virtualRow) => {
+              const header = headers[virtualRow.index];
+              if (!header) return null;
+
+              const columnDef = header.column.columnDef;
+              const meta = columnDef.meta as { headerTooltip?: string } | undefined;
+              const headerTitle =
+                meta?.headerTooltip ??
+                (typeof columnDef.header === "string" ? columnDef.header : header.column.id);
+
+              return (
+                <TableRow key={header.id} style={{ height: CELL_HEIGHT }} className="group">
+                  <TableCell
+                    className={cn(
+                      "bg-muted group border-r font-medium",
+                      leftPad ? "pl-8" : "",
+                      stickyFirstColumn
+                        ? "sticky left-0 z-30 shadow-[4px_0_6px_-4px_rgba(0,0,0,0.2)]"
+                        : "",
+                      isExpanded(header.id) ? "whitespace-normal" : "max-w-[260px] truncate",
+                    )}
+                  >
+                    {header.isPlaceholder ? null : (
+                      <button
+                        type="button"
+                        className="text-left"
+                        title={headerTitle}
+                        onClick={() => toggleHeader(header.id)}
+                      >
+                        {flexRender(header.column.columnDef.header, header.getContext())}
+                      </button>
+                    )}
+                  </TableCell>
+                  {loading
+                    ? [1, 2, 3, 4, 5].map((row) => (
+                        <TableCell key={row}>
+                          <Skeleton className="h-full w-10" key={row} />
+                        </TableCell>
+                      ))
+                    : rows.map((row) => {
+                        const cell = row
+                          .getVisibleCells()
+                          .find((c) => c.column.id === header.column.id);
+                        return (
+                          <TableCell
+                            key={`${row.id}-${header.id}`}
+                            style={{ width: 200, minWidth: 200 }}
+                            className={leftPad ? "pl-8" : ""}
+                          >
+                            {cell
+                              ? flexRender(cell.column.columnDef.cell, cell.getContext())
+                              : null}
+                          </TableCell>
+                        );
+                      })}
+                </TableRow>
+              );
+            })
+          ) : (
+            <TableRow>
+              <TableCell colSpan={rows.length + 1}>No data.</TableCell>
+            </TableRow>
+          )}
+          {after > 0 && (
+            <tr>
+              <td colSpan={rows.length + 1} style={{ height: after }} />
+            </tr>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+function TRow<TData>({
+  row,
+  leftPad,
+  stickyFirstColumn,
+}: {
+  row: Row<TData> | undefined;
+  leftPad: boolean;
+  stickyFirstColumn: boolean;
+}) {
+  if (!row) return null;
+  const isValid = !((row.original as unknown as { isValid: boolean })?.isValid === false);
+
+  return (
+    <TableRow
+      key={row.id}
+      data-state={row.getIsSelected() && "selected"}
+      className="group"
+      style={{ height: CELL_HEIGHT }}
+    >
+      {row.getVisibleCells().map((cell, index) => {
+        const isStickyCell = isStickyColumn({
+          stickyFirstColumn,
+          meta: cell.column.columnDef.meta as { sticky?: boolean } | undefined,
+          index,
+        });
+
+        return (
+          <TableCell
+            key={cell.id}
+            style={{ minWidth: cell.column.columnDef.size }}
+            className={cn(
+              leftPad ? "pl-8" : "",
+              isStickyCell
+                ? "bg-background sticky left-0 z-20 shadow-[4px_0_6px_-4px_rgba(0,0,0,0.2)]"
+                : "",
+              isValid ? "" : "underline decoration-red-300 decoration-4",
+            )}
+          >
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </TableCell>
+        );
+      })}
+    </TableRow>
+  );
+}