@goplusvn/core 0.1.0 → 0.1.2

package/src/ui/data-display/data-table/data-table.tsx

@@ -0,0 +1,597 @@
+"use client";
+
+import { memo, useCallback, useEffect, useMemo } from "react";
+import type { ReactNode, ReactElement } from "react";
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import type {
+  ColumnDef,
+  SortingState as TanstackSortingState,
+  Table,
+  Row,
+} from "@tanstack/react-table";
+
+import { Checkbox } from "../../primitives/client";
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../primitives";
+import { DataTablePagination } from "../data-table-pagination";
+import { DataTableSkeleton } from "./data-table-skeleton";
+import { DataTableEmptyState } from "./data-table-empty-state";
+import type { SortingState, PaginationState } from "./data-table-context";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface DataTablePaginationConfig {
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+export interface DataTableProps<TData> {
+  /**
+   * Data to display in the table
+   */
+  data: TData[];
+
+  /**
+   * Column definitions for the table
+   */
+  columns: ColumnDef<TData>[];
+
+  /**
+   * Pagination configuration (controlled)
+   */
+  pagination?: DataTablePaginationConfig;
+
+  /**
+   * Callback when pagination changes
+   */
+  onPaginationChange?: (pagination: PaginationState) => void;
+
+  /**
+   * Current sorting state (controlled)
+   */
+  sorting?: SortingState | null;
+
+  /**
+   * Callback when sorting changes
+   */
+  onSortingChange?: (sorting: SortingState | null) => void;
+
+  /**
+   * Enable row selection with checkboxes
+   * @default false
+   */
+  enableRowSelection?: boolean;
+
+  /**
+   * Currently selected row IDs
+   */
+  selectedRows?: Set<string>;
+
+  /**
+   * Callback when selection changes
+   */
+  onSelectionChange?: (selectedRows: Set<string>) => void;
+
+  /**
+   * Function to get unique ID from row data
+   * @default (row) => row.id
+   */
+  getRowId?: (row: TData) => string;
+
+  /**
+   * Show row numbers (STT column)
+   * @default false
+   */
+  enableRowNumber?: boolean;
+
+  /**
+   * Whether data is loading
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Custom empty state component
+   */
+  emptyState?: ReactNode;
+
+  /**
+   * Empty state configuration
+   */
+  emptyStateConfig?: {
+    hasSearch?: boolean;
+    hasFilters?: boolean;
+    onClearSearch?: () => void;
+    onClearFilters?: () => void;
+    onCreate?: () => void;
+    createLabel?: string;
+  };
+
+  /**
+   * Callback when table instance is ready
+   */
+  onTableReady?: (table: Table<TData>) => void;
+
+  /**
+   * Custom row click handler
+   */
+  onRowClick?: (row: TData) => void;
+
+  /**
+   * Custom class name for the table container
+   */
+  className?: string;
+
+  /**
+   * Height configuration
+   * @default "auto"
+   */
+  height?: "auto" | "full" | string;
+}
+
+// ============================================================================
+// DataTable Component
+// ============================================================================
+
+export function DataTable<TData extends Record<string, unknown>>({
+  data,
+  columns: userColumns,
+  pagination,
+  onPaginationChange,
+  sorting,
+  onSortingChange,
+  enableRowSelection = false,
+  selectedRows = new Set(),
+  onSelectionChange,
+  getRowId = (row) => String((row as Record<string, unknown>).id),
+  enableRowNumber = false,
+  loading = false,
+  emptyState,
+  emptyStateConfig,
+  onTableReady,
+  onRowClick,
+  className,
+  height = "auto",
+}: DataTableProps<TData>) {
+  // Build final columns with selection and row number if enabled
+  const columns = useMemo<ColumnDef<TData>[]>(() => {
+    const cols: ColumnDef<TData>[] = [];
+
+    // Selection column
+    if (enableRowSelection) {
+      cols.push({
+        id: "select",
+        header: ({ table }) => (
+          <Checkbox
+            checked={
+              table.getIsAllPageRowsSelected() ||
+              (table.getIsSomePageRowsSelected() && "indeterminate")
+            }
+            onCheckedChange={(value) => {
+              const rowIds = table
+                .getRowModel()
+                .rows.map((row) => getRowId(row.original));
+
+              if (onSelectionChange) {
+                if (value) {
+                  onSelectionChange(new Set(rowIds));
+                } else {
+                  onSelectionChange(new Set());
+                }
+              }
+              table.toggleAllPageRowsSelected(!!value);
+            }}
+            aria-label="Select all"
+          />
+        ),
+        cell: ({ row }) => {
+          const rowId = getRowId(row.original);
+          return (
+            <Checkbox
+              checked={selectedRows.has(rowId)}
+              onCheckedChange={() => {
+                if (onSelectionChange) {
+                  const newSelection = new Set(selectedRows);
+                  if (newSelection.has(rowId)) {
+                    newSelection.delete(rowId);
+                  } else {
+                    newSelection.add(rowId);
+                  }
+                  onSelectionChange(newSelection);
+                }
+                row.toggleSelected(!row.getIsSelected());
+              }}
+              aria-label="Select row"
+            />
+          );
+        },
+        enableSorting: false,
+        enableHiding: false,
+        size: 50,
+      });
+    }
+
+    // Row number (STT) column
+    if (enableRowNumber) {
+      cols.push({
+        id: "stt",
+        header: () => (
+          <div className="font-semibold text-center text-sm">STT</div>
+        ),
+        cell: ({ row }) => {
+          const rowIndex = row.index;
+          const currentPage = pagination?.page ?? 1;
+          const pageSize = pagination?.pageSize ?? 10;
+          const stt = (currentPage - 1) * pageSize + rowIndex + 1;
+          return <div className="text-center font-medium">{stt}</div>;
+        },
+        enableSorting: false,
+        enableHiding: false,
+        size: 70,
+        minSize: 60,
+        maxSize: 80,
+      });
+    }
+
+    // Add user columns
+    cols.push(...userColumns);
+
+    return cols;
+  }, [
+    userColumns,
+    enableRowSelection,
+    enableRowNumber,
+    selectedRows,
+    onSelectionChange,
+    getRowId,
+    pagination?.page,
+    pagination?.pageSize,
+  ]);
+
+  // Convert our sorting format to tanstack's format
+  const tanstackSorting = useMemo<TanstackSortingState>(() => {
+    if (!sorting) return [];
+    return [
+      {
+        id: sorting.field,
+        desc: sorting.direction === "desc",
+      },
+    ];
+  }, [sorting]);
+
+  // Handle sorting change
+  const handleSortingChange = useCallback(
+    (updater: unknown) => {
+      const newSorting =
+        typeof updater === "function" ? updater(tanstackSorting) : updater;
+
+      if (onSortingChange) {
+        if (Array.isArray(newSorting) && newSorting.length > 0) {
+          const sort = newSorting[0];
+          onSortingChange({
+            field: sort.id,
+            direction: sort.desc ? "desc" : "asc",
+          });
+        } else {
+          onSortingChange(null);
+        }
+      }
+    },
+    [tanstackSorting, onSortingChange],
+  );
+
+  // Handle pagination change
+  const handlePaginationChange = useCallback(
+    (updater: unknown) => {
+      if (!onPaginationChange || !pagination) return;
+
+      const currentPagination = {
+        pageIndex: pagination.page - 1,
+        pageSize: pagination.pageSize,
+      };
+      const newPagination =
+        typeof updater === "function" ? updater(currentPagination) : updater;
+
+      onPaginationChange({
+        page: newPagination.pageIndex + 1,
+        pageSize: newPagination.pageSize,
+      });
+    },
+    [pagination, onPaginationChange],
+  );
+
+  // Calculate page count
+  const pageCount = useMemo(() => {
+    if (!pagination) return 1;
+    const count = Math.ceil(pagination.total / pagination.pageSize);
+    return count > 0 ? count : 1;
+  }, [pagination]);
+
+  // Create table instance
+  const table = useReactTable({
+    data: Array.isArray(data) ? data : [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: handleSortingChange,
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      sorting: tanstackSorting,
+      pagination: pagination
+        ? {
+            pageIndex: pagination.page - 1,
+            pageSize: pagination.pageSize,
+          }
+        : undefined,
+    },
+    onPaginationChange: handlePaginationChange,
+    manualPagination: !!pagination,
+    pageCount,
+  });
+
+  // Notify parent when table is ready
+  useEffect(() => {
+    if (onTableReady && table) {
+      onTableReady(table);
+    }
+  }, [table, onTableReady]);
+
+  // Get rows safely
+  let rows: Row<TData>[] = [];
+  try {
+    const rowModel = table.getRowModel();
+    if (rowModel && Array.isArray(rowModel.rows)) {
+      rows = rowModel.rows;
+    }
+  } catch (error) {
+    console.error("Error getting row model:", error);
+  }
+
+  // Height class
+  const heightClass =
+    height === "auto"
+      ? ""
+      : height === "full"
+        ? "min-h-[calc(100vh-16rem)]"
+        : height;
+
+  return (
+    <div
+      className={`flex flex-col border border-border dark:border-slate-800 rounded-md overflow-hidden bg-card ${heightClass} ${className || ""}`}
+    >
+      {/* Table Container - Scrollable */}
+      <div className="flex-1 overflow-auto relative">
+        <table className="w-max min-w-full caption-bottom text-xs relative">
+          <TableHeader className="sticky top-0 z-20 bg-card">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow
+                key={headerGroup.id}
+                className="border-b-2 border-border dark:border-slate-700 hover:bg-transparent"
+              >
+                {headerGroup.headers.map((header) => (
+                  <TableHead
+                    key={header.id}
+                    className="text-xs font-semibold text-foreground py-2.5"
+                    style={{
+                      width: header.getSize(),
+                      minWidth: header.column.columnDef.minSize,
+                      maxWidth: header.column.columnDef.maxSize,
+                    }}
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <>
+                <tr aria-live="polite" aria-busy="true" className="sr-only">
+                  <td colSpan={columns.length} className="sr-only">
+                    Loading table data...
+                  </td>
+                </tr>
+                <DataTableSkeleton
+                  columns={userColumns.length}
+                  rows={pagination?.pageSize ?? 10}
+                  showCheckbox={enableRowSelection}
+                  showRowNumber={enableRowNumber}
+                />
+              </>
+            ) : rows.length > 0 ? (
+              rows.map((row) => (
+                <MemoizedTableRow
+                  key={row.id}
+                  row={row}
+                  isSelected={row.getIsSelected()}
+                  visibleCellsCount={row.getVisibleCells().length}
+                  onRowClick={onRowClick}
+                />
+              ))
+            ) : null}
+          </TableBody>
+        </table>
+        {/* Empty state - rendered outside table for proper viewport centering */}
+        {!loading && rows.length === 0 && (
+          <div className="flex items-center justify-center min-h-[300px]">
+            {emptyState || (
+              <DataTableEmptyState
+                hasSearch={emptyStateConfig?.hasSearch}
+                hasFilters={emptyStateConfig?.hasFilters}
+                onClearSearch={emptyStateConfig?.onClearSearch}
+                onClearFilters={emptyStateConfig?.onClearFilters}
+                primaryAction={
+                  emptyStateConfig?.onCreate
+                    ? {
+                        label: emptyStateConfig.createLabel || "Thêm mới",
+                        onClick: emptyStateConfig.onCreate,
+                      }
+                    : undefined
+                }
+              />
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Pagination Section */}
+      {pagination && (
+        <div className="border-t border-border dark:border-slate-800 bg-card px-4 sm:px-6 py-2 shrink-0">
+          <MemoizedPagination
+            table={table}
+            currentPage={pagination.page}
+            pageCount={pageCount}
+            pageSize={pagination.pageSize}
+            totalItems={pagination.total}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// Memoized TableRow
+// ============================================================================
+
+interface MemoizedTableRowProps<TData> {
+  row: Row<TData>;
+  isSelected: boolean;
+  visibleCellsCount: number;
+  onRowClick?: (row: TData) => void;
+}
+
+// Ensure TData is maintained by making it a generic memo component, or casting it
+const MemoizedTableRow = memo(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ({ row, isSelected, onRowClick }: MemoizedTableRowProps<any>) => {
+    return (
+      <TableRow
+        data-state={isSelected && "selected"}
+        className={`transition-colors duration-100 even:bg-muted/30 hover:bg-accent/50 dark:hover:bg-slate-800/40 data-[state=selected]:bg-primary/5 border-b border-border/40 dark:border-slate-800 relative hover:border-l-[3px] hover:border-l-primary ${
+          onRowClick ? "cursor-pointer" : ""
+        }`}
+        onClick={onRowClick ? () => onRowClick(row.original) : undefined}
+      >
+        {row.getVisibleCells().map((cell) => (
+          <TableCell
+            key={cell.id}
+            className=""
+            style={{
+              width: cell.column.getSize(),
+              minWidth: cell.column.columnDef.minSize,
+              maxWidth: cell.column.columnDef.maxSize,
+            }}
+          >
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </TableCell>
+        ))}
+      </TableRow>
+    );
+  },
+  (prevProps, nextProps) => {
+    // Basic checks
+    if (
+      prevProps.row.id !== nextProps.row.id ||
+      prevProps.isSelected !== nextProps.isSelected ||
+      prevProps.onRowClick !== nextProps.onRowClick ||
+      prevProps.visibleCellsCount !== nextProps.visibleCellsCount ||
+      prevProps.row.original !== nextProps.row.original
+    ) {
+      return false;
+    }
+
+    // Since sizing could change without cells count changing
+    // We check if cell sizes changed
+    const prevCells = prevProps.row.getVisibleCells();
+    const nextCells = nextProps.row.getVisibleCells();
+
+    for (let i = 0; i < prevCells.length; i++) {
+      if (
+        prevCells[i]?.column.getSize() !== nextCells[i]?.column.getSize() ||
+        prevCells[i]?.id !== nextCells[i]?.id ||
+        prevCells[i]?.column.id !== nextCells[i]?.column.id
+      ) {
+        return false;
+      }
+    }
+
+    return true;
+  },
+) as <TData>(props: MemoizedTableRowProps<TData>) => ReactElement;
+// The type cast ensures the component retains the generic type TData
+// Without this, the component type would default to `any` or `unknown`.
+// Adding displayName to a typecast component can cause a ts error, so we cast it as any to add the display name.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(MemoizedTableRow as any).displayName = "MemoizedTableRow";
+
+// ============================================================================
+// Memoized Pagination
+// ============================================================================
+
+const MemoizedPagination = memo(
+  ({
+    table,
+    currentPage,
+    pageSize,
+    totalItems,
+  }: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    table: Table<any>;
+    currentPage: number;
+    pageCount: number;
+    pageSize: number;
+    totalItems?: number;
+  }) => {
+    return (
+      <DataTablePagination
+        table={table}
+        totalItems={totalItems}
+        currentPage={currentPage}
+        pageSize={pageSize}
+      />
+    );
+  },
+  (prevProps, nextProps) => {
+    const prevState = prevProps.table.getState().pagination;
+    const nextState = nextProps.table.getState().pagination;
+
+    return (
+      prevProps.currentPage === nextProps.currentPage &&
+      prevProps.pageCount === nextProps.pageCount &&
+      prevProps.pageSize === nextProps.pageSize &&
+      prevProps.totalItems === nextProps.totalItems &&
+      prevState.pageIndex === nextState.pageIndex &&
+      prevState.pageSize === nextState.pageSize
+    );
+  },
+);
+MemoizedPagination.displayName = "MemoizedPagination";
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+export type { ColumnDef, Table, Row };

package/src/ui/data-display/data-table/index.ts

@@ -0,0 +1,44 @@
+// @goerp/core/ui/data-display/data-table
+// Reusable DataTable components for standalone table usage
+
+// Context and hooks
+export {
+  DataTableProvider,
+  useDataTable,
+  useDataTableOptional,
+  type DataTableContextValue,
+  type DataTableProviderProps,
+  type SortingState,
+  type ActiveFilter,
+  type PaginationState,
+} from "./data-table-context";
+
+// Main DataTable component
+export {
+  DataTable,
+  type DataTableProps,
+  type DataTablePaginationConfig,
+  type ColumnDef,
+  type Table,
+  type Row,
+} from "./data-table";
+
+// Skeleton loading states
+export {
+  DataTableSkeleton,
+  DataTableFullSkeleton,
+  type DataTableSkeletonProps,
+} from "./data-table-skeleton";
+
+// Empty state
+export {
+  DataTableEmptyState,
+  type DataTableEmptyStateProps,
+} from "./data-table-empty-state";
+
+// Toolbar
+export {
+  DataTableToolbar,
+  type DataTableToolbarProps,
+  type FilterConfig,
+} from "./data-table-toolbar";

package/src/ui/data-display/data-table-column-header.tsx

@@ -0,0 +1,75 @@
+// @goerp/core/ui/data-display
+// DataTableColumnHeader component for table column headers with sorting
+
+"use client";
+
+import { ArrowDown, ArrowDownUp, ArrowUp, EyeOff, X } from "lucide-react";
+
+import type { Column } from "@tanstack/react-table";
+import type { ComponentProps } from "react";
+
+import { cn } from "../../utils";
+
+import { Button } from "../primitives";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../primitives/client";
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends ComponentProps<"div"> {
+  column: Column<TData, TValue>;
+  title: string;
+  className?: string;
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>;
+  }
+
+  return (
+    <div className={cn("flex items-center space-x-2", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="-ml-3 h-8 data-[state=open]:bg-accent"
+          >
+            <span>{title}</span>
+            {column.getIsSorted() === "desc" ? (
+              <ArrowDown className="ml-2 h-4 w-4" />
+            ) : column.getIsSorted() === "asc" ? (
+              <ArrowUp className="ml-2 h-4 w-4" />
+            ) : (
+              <ArrowDownUp className="ml-2 h-4 w-4" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUp className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDown className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Desc
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+            <EyeOff className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Hide
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}