@moontra/moonui 2.3.5 → 2.3.6

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

@@ -1,623 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  FilterFn,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-import { Input } from "./input";
-import { 
-  Table, 
-  TableBody, 
-  TableCell, 
-  TableHead, 
-  TableHeader, 
-  TableRow 
-} from "./table";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./select";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "./dropdown-menu";
-import { 
-  ChevronLeft, 
-  ChevronRight, 
-  ChevronsLeft, 
-  ChevronsRight,
-  ArrowUpDown,
-  ArrowUp,
-  ArrowDown,
-  Search,
-  Filter,
-  Columns,
-  Download,
-  RefreshCw,
-  Settings,
-  X
-} from "lucide-react";
-import { Badge } from "./badge";
-import { Skeleton } from "./skeleton";
-import { motion, AnimatePresence } from "framer-motion";
-
-/**
- * Premium DataTable Component
- * 
- * A powerful data table with sorting, filtering, pagination, and more.
- * Built on top of @tanstack/react-table v8.
- */
-
-const dataTableVariants = cva(
-  "w-full",
-  {
-    variants: {
-      variant: {
-        default: "",
-        bordered: "border rounded-lg",
-        striped: "[&_tbody_tr:nth-child(even)]:bg-muted/50",
-        cards: "gap-4 [&_tbody]:flex [&_tbody]:flex-col [&_tbody_tr]:rounded-lg [&_tbody_tr]:border [&_tbody_tr]:p-4",
-      },
-      size: {
-        default: "",
-        sm: "text-sm [&_th]:py-2 [&_td]:py-2",
-        lg: "text-base [&_th]:py-4 [&_td]:py-4",
-      },
-      density: {
-        default: "",
-        compact: "[&_th]:py-1 [&_td]:py-1",
-        comfortable: "[&_th]:py-6 [&_td]:py-6",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      density: "default",
-    },
-  }
-);
-
-interface DataTableProps<TData, TValue>
-  extends VariantProps<typeof dataTableVariants> {
-  /**
-   * The table columns definition
-   */
-  columns: ColumnDef<TData, TValue>[];
-  /**
-   * The data to display
-   */
-  data: TData[];
-  /**
-   * Enable/disable filtering
-   */
-  enableFiltering?: boolean;
-  /**
-   * Enable/disable sorting
-   */
-  enableSorting?: boolean;
-  /**
-   * Enable/disable column visibility toggle
-   */
-  enableColumnVisibility?: boolean;
-  /**
-   * Enable/disable row selection
-   */
-  enableRowSelection?: boolean;
-  /**
-   * Enable/disable pagination
-   */
-  enablePagination?: boolean;
-  /**
-   * Rows per page options
-   */
-  pageSizeOptions?: number[];
-  /**
-   * Default page size
-   */
-  defaultPageSize?: number;
-  /**
-   * Filter placeholder text
-   */
-  filterPlaceholder?: string;
-  /**
-   * Filter column key
-   */
-  filterColumn?: string;
-  /**
-   * Show loading state
-   */
-  isLoading?: boolean;
-  /**
-   * Empty state message
-   */
-  emptyMessage?: string;
-  /**
-   * Table title
-   */
-  title?: string;
-  /**
-   * Table description
-   */
-  description?: string;
-  /**
-   * Enable export functionality
-   */
-  enableExport?: boolean;
-  /**
-   * Export handler
-   */
-  onExport?: (data: TData[]) => void;
-  /**
-   * Enable refresh functionality
-   */
-  enableRefresh?: boolean;
-  /**
-   * Refresh handler
-   */
-  onRefresh?: () => void;
-  /**
-   * Additional toolbar actions
-   */
-  toolbarActions?: React.ReactNode;
-  /**
-   * Custom filter component
-   */
-  customFilter?: React.ReactNode;
-  /**
-   * Row click handler
-   */
-  onRowClick?: (row: TData) => void;
-  /**
-   * Class name
-   */
-  className?: string;
-}
-
-function DataTableLoading() {
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <Skeleton className="h-8 w-[250px]" />
-        <div className="flex gap-2">
-          <Skeleton className="h-8 w-8" />
-          <Skeleton className="h-8 w-8" />
-        </div>
-      </div>
-      <div className="rounded-lg border">
-        <div className="p-4">
-          <div className="flex gap-4">
-            {Array.from({ length: 4 }).map((_, i) => (
-              <Skeleton key={i} className="h-8 flex-1" />
-            ))}
-          </div>
-        </div>
-        <div className="p-4 space-y-2">
-          {Array.from({ length: 5 }).map((_, i) => (
-            <Skeleton key={i} className="h-12 w-full" />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function DataTable<TData, TValue>({
-  columns,
-  data,
-  enableFiltering = true,
-  enableSorting = true,
-  enableColumnVisibility = true,
-  enableRowSelection = false,
-  enablePagination = true,
-  pageSizeOptions = [10, 20, 30, 50, 100],
-  defaultPageSize = 10,
-  filterPlaceholder = "Filter...",
-  filterColumn,
-  isLoading = false,
-  emptyMessage = "No results found.",
-  title,
-  description,
-  enableExport = false,
-  onExport,
-  enableRefresh = false,
-  onRefresh,
-  toolbarActions,
-  customFilter,
-  onRowClick,
-  variant,
-  size,
-  density,
-  className,
-}: DataTableProps<TData, TValue>) {
-  const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
-  const [rowSelection, setRowSelection] = React.useState({});
-  const [globalFilter, setGlobalFilter] = React.useState("");
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: enableSorting ? setSorting : undefined,
-    onColumnFiltersChange: enableFiltering ? setColumnFilters : undefined,
-    onColumnVisibilityChange: enableColumnVisibility ? setColumnVisibility : undefined,
-    onRowSelectionChange: enableRowSelection ? setRowSelection : undefined,
-    onGlobalFilterChange: enableFiltering && !filterColumn ? setGlobalFilter : undefined,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined,
-    getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,
-    getFilteredRowModel: enableFiltering ? getFilteredRowModel() : undefined,
-    getFacetedRowModel: enableFiltering ? getFacetedRowModel() : undefined,
-    getFacetedUniqueValues: enableFiltering ? getFacetedUniqueValues() : undefined,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-      globalFilter,
-    },
-    initialState: {
-      pagination: {
-        pageSize: defaultPageSize,
-      },
-    },
-  });
-
-  if (isLoading) {
-    return <DataTableLoading />;
-  }
-
-  const selectedRows = table.getFilteredSelectedRowModel().rows;
-
-  return (
-    <div className={cn("moonui-theme", "space-y-4", className)}>
-      {/* Header */}
-      {(title || description) && (
-        <div className="space-y-1">
-          {title && <h3 className="text-lg font-semibold">{title}</h3>}
-          {description && <p className="text-sm text-muted-foreground">{description}</p>}
-        </div>
-      )}
-
-      {/* Toolbar */}
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex-1 max-w-sm">
-          {/* Search/Filter */}
-          {enableFiltering && (
-            <>
-              {customFilter || (
-                <div className="relative">
-                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                  <Input
-                    placeholder={filterPlaceholder}
-                    value={
-                      filterColumn
-                        ? (table.getColumn(filterColumn)?.getFilterValue() as string) ?? ""
-                        : globalFilter
-                    }
-                    onChange={(event) => {
-                      const value = event.target.value;
-                      if (filterColumn) {
-                        table.getColumn(filterColumn)?.setFilterValue(value);
-                      } else {
-                        setGlobalFilter(value);
-                      }
-                    }}
-                    className="pl-8"
-                  />
-                  {((filterColumn && table.getColumn(filterColumn)?.getFilterValue()) || 
-                    (!filterColumn && globalFilter)) && (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="absolute right-0 top-0 h-full px-2"
-                      onClick={() => {
-                        if (filterColumn) {
-                          table.getColumn(filterColumn)?.setFilterValue("");
-                        } else {
-                          setGlobalFilter("");
-                        }
-                      }}
-                    >
-                      <X className="h-4 w-4" />
-                    </Button>
-                  )}
-                </div>
-              )}
-            </>
-          )}
-        </div>
-
-        {/* Actions */}
-        <div className="flex items-center gap-2">
-          {/* Selection info */}
-          {enableRowSelection && selectedRows.length > 0 && (
-            <Badge variant="secondary" className="whitespace-nowrap">
-              {selectedRows.length} selected
-            </Badge>
-          )}
-          
-          {toolbarActions}
-          
-          {/* Export */}
-          {enableExport && onExport && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => onExport(table.getFilteredRowModel().rows.map(row => row.original))}
-            >
-              <Download className="mr-2 h-4 w-4" />
-              Export
-            </Button>
-          )}
-
-          {/* Refresh */}
-          {enableRefresh && onRefresh && (
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={onRefresh}
-            >
-              <RefreshCw className="h-4 w-4" />
-            </Button>
-          )}
-
-          {/* Column visibility */}
-          {enableColumnVisibility && (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="icon">
-                  <Columns className="h-4 w-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-[180px]">
-                <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                {table
-                  .getAllColumns()
-                  .filter((column) => column.getCanHide())
-                  .map((column) => {
-                    return (
-                      <DropdownMenuCheckboxItem
-                        key={column.id}
-                        className="capitalize"
-                        checked={column.getIsVisible()}
-                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
-                      >
-                        {column.id}
-                      </DropdownMenuCheckboxItem>
-                    );
-                  })}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
-        </div>
-      </div>
-
-      {/* Table */}
-      <div className={cn("rounded-lg", variant === "bordered" && "border")}>
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  return (
-                    <TableHead key={header.id}>
-                      {header.isPlaceholder ? null : (
-                        <div
-                          className={cn(
-                            "flex items-center gap-2",
-                            header.column.getCanSort() && "cursor-pointer select-none"
-                          )}
-                          onClick={header.column.getToggleSortingHandler()}
-                        >
-                          {flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                          {enableSorting && header.column.getCanSort() && (
-                            <div className="ml-auto">
-                              {header.column.getIsSorted() === "desc" ? (
-                                <ArrowDown className="h-4 w-4" />
-                              ) : header.column.getIsSorted() === "asc" ? (
-                                <ArrowUp className="h-4 w-4" />
-                              ) : (
-                                <ArrowUpDown className="h-4 w-4 opacity-50" />
-                              )}
-                            </div>
-                          )}
-                        </div>
-                      )}
-                    </TableHead>
-                  );
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              <AnimatePresence>
-                {table.getRowModel().rows.map((row) => (
-                  <motion.tr
-                    key={row.id}
-                    initial={{ opacity: 0, y: -10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: 10 }}
-                    transition={{ duration: 0.2 }}
-                    data-state={row.getIsSelected() && "selected"}
-                    className={cn(
-                      "border-b transition-colors",
-                      onRowClick && "cursor-pointer hover:bg-muted/50",
-                      row.getIsSelected() && "bg-muted"
-                    )}
-                    onClick={() => onRowClick?.(row.original)}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </TableCell>
-                    ))}
-                  </motion.tr>
-                ))}
-              </AnimatePresence>
-            ) : (
-              <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
-                  {emptyMessage}
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-
-      {/* Pagination */}
-      {enablePagination && (
-        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <span>
-              {table.getFilteredRowModel().rows.length} of{" "}
-              {table.getCoreRowModel().rows.length} row(s)
-            </span>
-            {enableRowSelection && selectedRows.length > 0 && (
-              <span>• {selectedRows.length} selected</span>
-            )}
-          </div>
-
-          <div className="flex items-center gap-2">
-            <div className="flex items-center gap-2">
-              <p className="text-sm">Rows per page</p>
-              <Select
-                value={`${table.getState().pagination.pageSize}`}
-                onValueChange={(value) => {
-                  table.setPageSize(Number(value));
-                }}
-              >
-                <SelectTrigger className="h-8 w-[70px]">
-                  <SelectValue placeholder={table.getState().pagination.pageSize} />
-                </SelectTrigger>
-                <SelectContent side="top">
-                  {pageSizeOptions.map((pageSize) => (
-                    <SelectItem key={pageSize} value={`${pageSize}`}>
-                      {pageSize}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="flex items-center gap-1">
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={() => table.setPageIndex(0)}
-                disabled={!table.getCanPreviousPage()}
-              >
-                <ChevronsLeft className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={() => table.previousPage()}
-                disabled={!table.getCanPreviousPage()}
-              >
-                <ChevronLeft className="h-4 w-4" />
-              </Button>
-              <div className="flex items-center gap-1 text-sm">
-                <span>Page</span>
-                <span className="font-medium">
-                  {table.getState().pagination.pageIndex + 1} of{" "}
-                  {table.getPageCount()}
-                </span>
-              </div>
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={() => table.nextPage()}
-                disabled={!table.getCanNextPage()}
-              >
-                <ChevronRight className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-                disabled={!table.getCanNextPage()}
-              >
-                <ChevronsRight className="h-4 w-4" />
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-/**
- * Column Helper Functions
- */
-
-// Create a sortable header
-export function createSortableHeader(label: string) {
-  return ({ column }: any) => (
-    <Button
-      variant="ghost"
-      className="-ml-3 h-8 data-[state=open]:bg-accent"
-      onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-    >
-      {label}
-      {column.getIsSorted() === "desc" ? (
-        <ArrowDown className="ml-2 h-4 w-4" />
-      ) : column.getIsSorted() === "asc" ? (
-        <ArrowUp className="ml-2 h-4 w-4" />
-      ) : (
-        <ArrowUpDown className="ml-2 h-4 w-4" />
-      )}
-    </Button>
-  );
-}
-
-// Create a filterable column
-export function createFilterableColumn<TData, TValue>(
-  accessorKey: string,
-  header: string,
-  filterFn?: FilterFn<TData>
-): ColumnDef<TData, TValue> {
-  return {
-    accessorKey,
-    header: createSortableHeader(header),
-    filterFn,
-  };
-}
-
-// Export utilities
-export { type ColumnDef } from "@tanstack/react-table";