@suphark/ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,399 @@
+"use client";
+
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Table as UiTable,
+} from "@suphark/ui/components/ui/table";
+import { cn } from "@suphark/ui/lib/utils";
+import { flexRender, type Row } from "@tanstack/react-table";
+import type { CSSProperties } from "react";
+import * as React from "react";
+import { toast } from "sonner";
+import { DataTablePagination } from "./data-table-pagination";
+import { DataTableToolbar } from "./data-table-toolbar";
+import type { DataTableProps } from "./types";
+import { useDataTable } from "./use-data-table";
+
+interface DraggableRowProps<TData> {
+  row: Row<TData>;
+  enableColumnResizing?: boolean;
+  getRowClassName?: (row: Row<TData>) => string;
+  stickyEdgeColumns?: boolean;
+}
+
+function DraggableRow<TData>({
+  row,
+  enableColumnResizing,
+  getRowClassName,
+  stickyEdgeColumns,
+}: DraggableRowProps<TData>) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: row.id,
+  });
+
+  const style: CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.8 : 1,
+    zIndex: isDragging ? 1 : 0,
+    position: "relative",
+  };
+
+  return (
+    <TableRow
+      ref={setNodeRef}
+      style={style}
+      data-state={row.getIsSelected() && "selected"}
+      className={cn(stickyEdgeColumns && "group/row", getRowClassName?.(row))}
+    >
+      {row.getVisibleCells().map((cell) => {
+        const isDndColumn = cell.column.id === "dnd-handle";
+        return (
+          <TableCell
+            key={cell.id}
+            {...(isDndColumn ? { ...attributes, ...listeners } : {})}
+            style={{
+              width: enableColumnResizing ? cell.column.getSize() : undefined,
+            }}
+            className={cn(
+              stickyEdgeColumns &&
+                cell.column.id === "select" &&
+                "sticky left-0 z-10 bg-card group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted",
+              stickyEdgeColumns &&
+                cell.column.id === "actions" &&
+                "sticky right-0 z-10 bg-card group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted",
+            )}
+          >
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </TableCell>
+        );
+      })}
+    </TableRow>
+  );
+}
+
+/**
+ * DataTable
+ * @initialState {{ expanded: true }}  -> (ขยายทั้งหมด)
+ * @initialState {{ expanded: {} }}    -> (หุบทั้งหมด)
+ */
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  className,
+  containerClassName,
+  tableContainerClassName,
+  stickyHeader,
+  stickyPagination,
+  stickyEdgeColumns,
+  emptyStateComponent,
+  facetedFilters,
+  actionsComponent,
+  globalFilterPlaceholder,
+  initialVisibility = {},
+  globalFilterFn,
+  globalFilterKeys,
+  getRowClassName,
+  getFacetedUniqueValues: getFacetedUniqueValuesProp,
+  initialColumnFilters = [],
+  columnFilters,
+  getSubRows,
+  getRowId,
+  initialPageSize = 10,
+  meta,
+  initialState,
+  pageCount,
+  rowCount,
+  pagination,
+  sorting,
+  globalFilter,
+  onGlobalFilterChange,
+  manualPagination,
+  manualSorting,
+  manualFiltering,
+  onPaginationChange,
+  onPageSizeChange,
+  onSortingChange,
+  onColumnFiltersChange,
+  enableColumnResizing = false,
+  enableRowSelection = true,
+  isLoading,
+  pageSizeOptions,
+  toolbarFilters,
+  preservedFilterIds,
+  onReorder,
+  renderCustomView,
+}: DataTableProps<TData, TValue>) {
+  const { table } = useDataTable({
+    columns,
+    data,
+    className,
+    containerClassName,
+    stickyHeader,
+    emptyStateComponent,
+    initialVisibility,
+    globalFilterFn,
+    globalFilterKeys,
+    getFacetedUniqueValues: getFacetedUniqueValuesProp,
+    initialColumnFilters,
+    columnFilters,
+    getSubRows,
+    getRowId,
+    initialPageSize,
+    meta,
+    initialState,
+    pageCount,
+    rowCount,
+    pagination,
+    sorting,
+    globalFilter,
+    onGlobalFilterChange,
+    manualPagination,
+    manualSorting,
+    manualFiltering,
+    onPaginationChange,
+    onSortingChange,
+    onColumnFiltersChange,
+    enableColumnResizing,
+    enableRowSelection,
+  });
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  function handleDragEnd(event: DragEndEvent) {
+    if (!onReorder) return;
+
+    const state = table.getState();
+    const isFiltered = state.columnFilters.length > 0 || state.globalFilter;
+    const isSorted = state.sorting.length > 0;
+
+    if (isFiltered || isSorted) {
+      toast.warning("Cannot reorder while filtering or sorting is active.");
+      return;
+    }
+
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = data.findIndex((item) => {
+        const id = getRowId ? getRowId(item) : (item as { id?: string | number }).id;
+        return id === active.id;
+      });
+      const newIndex = data.findIndex((item) => {
+        const id = getRowId ? getRowId(item) : (item as { id?: string | number }).id;
+        return id === over.id;
+      });
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const newData = arrayMove(data, oldIndex, newIndex);
+        onReorder(newData);
+      }
+    }
+  }
+
+  const tableRows = table.getRowModel().rows;
+  const rowIds = React.useMemo(() => tableRows.map((row) => row.id), [tableRows]);
+
+  const tableContent = (
+    <UiTable
+      className={cn(
+        "w-full border-collapse",
+        enableColumnResizing ? "table-fixed" : "table-auto",
+        className,
+      )}
+      // กล่องชั้นในสุดคือ scroll container ที่ sticky header ยึด จึงต้องกำหนดความสูง
+      // ที่กล่องนี้ ไม่ใช่กล่องชั้นนอก
+      containerClassName={tableContainerClassName}
+      style={enableColumnResizing ? { width: table.getTotalSize() } : {}}
+    >
+      <TableHeader
+        className={stickyHeader ? "sticky top-0 z-10 bg-background shadow-sm" : undefined}
+      >
+        {table.getHeaderGroups().map((headerGroup) => (
+          <TableRow key={headerGroup.id}>
+            {headerGroup.headers.map((header) => {
+              return (
+                <TableHead
+                  key={header.id}
+                  colSpan={header.colSpan}
+                  style={{
+                    width: enableColumnResizing ? header.getSize() : undefined,
+                  }}
+                  className={cn(
+                    "group relative whitespace-nowrap",
+                    stickyEdgeColumns &&
+                      header.column.id === "select" &&
+                      "sticky left-0 z-20 bg-background",
+                    stickyEdgeColumns &&
+                      header.column.id === "actions" &&
+                      "sticky right-0 z-20 bg-background",
+                  )}
+                >
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext())}
+                  {header.column.getCanResize() && (
+                    <div
+                      onMouseDown={header.getResizeHandler()}
+                      onTouchStart={header.getResizeHandler()}
+                      className={`absolute top-0 right-0 h-full w-1 cursor-col-resize touch-none select-none bg-border opacity-0 hover:bg-primary group-hover:opacity-100 ${
+                        header.column.getIsResizing() ? "bg-primary opacity-100" : ""
+                      }`}
+                    />
+                  )}
+                </TableHead>
+              );
+            })}
+          </TableRow>
+        ))}
+      </TableHeader>
+      <TableBody>
+        {isLoading ? (
+          Array.from({ length: initialPageSize }).map((_, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: แถว skeleton ไม่มีตัวตน ใช้ตำแหน่งเป็น key ได้
+            <TableRow key={i}>
+              {columns.map((_col, j) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: เซลล์ skeleton เช่นกัน
+                <TableCell key={j}>
+                  <div className="h-4 w-full animate-pulse rounded bg-muted" />
+                </TableCell>
+              ))}
+            </TableRow>
+          ))
+        ) : table.getRowModel().rows?.length ? (
+          onReorder ? (
+            <SortableContext items={rowIds} strategy={verticalListSortingStrategy}>
+              {table.getRowModel().rows.map((row) => (
+                <DraggableRow
+                  key={row.id}
+                  row={row}
+                  enableColumnResizing={enableColumnResizing}
+                  getRowClassName={getRowClassName}
+                  stickyEdgeColumns={stickyEdgeColumns}
+                />
+              ))}
+            </SortableContext>
+          ) : (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className={cn(stickyEdgeColumns && "group/row", getRowClassName?.(row))}
+              >
+                {row.getVisibleCells().map((cell) => {
+                  return (
+                    <TableCell
+                      key={cell.id}
+                      style={{
+                        width: enableColumnResizing ? cell.column.getSize() : undefined,
+                      }}
+                      className={cn(
+                        stickyEdgeColumns &&
+                          cell.column.id === "select" &&
+                          "sticky left-0 z-10 bg-card group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted",
+                        stickyEdgeColumns &&
+                          cell.column.id === "actions" &&
+                          "sticky right-0 z-10 bg-card group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted",
+                      )}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  );
+                })}
+              </TableRow>
+            ))
+          )
+        ) : (
+          <TableRow>
+            <TableCell colSpan={table.getVisibleLeafColumns().length} className="h-24 text-center">
+              {emptyStateComponent || "No results."}
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </UiTable>
+  );
+
+  const customView = renderCustomView?.(table);
+
+  return (
+    <div className={cn("flex flex-col gap-4", containerClassName)}>
+      <DataTableToolbar
+        table={table}
+        facetedFilters={facetedFilters}
+        actionsComponent={actionsComponent?.(table)}
+        globalFilterPlaceholder={globalFilterPlaceholder}
+        toolbarFilters={toolbarFilters?.(table)}
+        preservedFilterIds={preservedFilterIds}
+      />
+      {customView ? (
+        <>
+          {customView}
+          <DataTablePagination
+            table={table}
+            pageSizeOptions={pageSizeOptions}
+            onPageSizeChange={onPageSizeChange}
+          />
+        </>
+      ) : (
+        <>
+          <div className="overflow-x-auto rounded-lg border bg-card shadow-sm max-sm:-mx-2 max-sm:rounded-none max-sm:border-x-0">
+            {onReorder ? (
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleDragEnd}
+              >
+                {tableContent}
+              </DndContext>
+            ) : (
+              tableContent
+            )}
+          </div>
+          <div
+            className={
+              stickyPagination
+                ? "sticky bottom-0 z-20 border-t bg-background py-2 max-sm:-mx-2"
+                : undefined
+            }
+          >
+            <DataTablePagination
+              table={table}
+              pageSizeOptions={pageSizeOptions}
+              onPageSizeChange={onPageSizeChange}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/data-table/index.ts

@@ -0,0 +1,9 @@
+export * from "./data-table";
+export * from "./data-table-column-header";
+export * from "./data-table-date-range-filter";
+export * from "./data-table-faceted-filter";
+export * from "./data-table-pagination";
+export * from "./data-table-toolbar";
+export * from "./data-table-view-option";
+export * from "./types";
+export * from "./use-data-table";

package/src/components/data-table/types.ts

@@ -0,0 +1,106 @@
+import type {
+  ColumnDef,
+  ColumnFiltersState,
+  FilterFn,
+  OnChangeFn,
+  PaginationState,
+  Row,
+  SortingState,
+  Table,
+  TableState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import type React from "react";
+
+export type FacetedFilterConfig = {
+  columnId: string;
+  title: string;
+  compact?: boolean;
+  options: {
+    label: string;
+    value: string | number | boolean;
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+};
+
+export interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+
+  // Styling Hooks
+  className?: string; // Appended to table wrap
+  containerClassName?: string; // Appended to outer wrapper
+  /**
+   * Appended to the scrollable box that wraps the table itself.
+   *
+   * Needed for `stickyHeader`: the box already scrolls horizontally, and CSS
+   * forces the vertical axis to `auto` alongside it, so it — not the page — is
+   * what a sticky header anchors to. Give it a height (e.g. `max-h-[70vh]`) or
+   * the header has nothing to stick within and scrolls away with the page.
+   */
+  tableContainerClassName?: string;
+  /** ตรึงแถบเปลี่ยนหน้าไว้ล่างสุดของจอเสมอ ใช้คู่กับ `stickyHeader` */
+  stickyPagination?: boolean;
+
+  // Accessibility & UI
+  stickyHeader?: boolean;
+  stickyEdgeColumns?: boolean;
+  emptyStateComponent?: React.ReactNode;
+
+  // Filters & Toolbar
+  facetedFilters?: FacetedFilterConfig[];
+  actionsComponent?: (table: Table<TData>) => React.ReactNode;
+  globalFilterKeys?: string[];
+  globalFilterFn?: FilterFn<TData>;
+  globalFilterPlaceholder?: string;
+  toolbarFilters?: (table: Table<TData>) => React.ReactNode;
+  preservedFilterIds?: string[];
+
+  // State & Visibility
+  initialVisibility?: VisibilityState;
+  initialColumnFilters?: ColumnFiltersState;
+  columnFilters?: ColumnFiltersState;
+  initialState?: Partial<TableState>;
+
+  // Pagination & Sorting (Server-side support)
+  pageCount?: number;
+  rowCount?: number;
+  /**
+   * ควบคุม pagination จากภายนอก (ใช้คู่กับ manualPagination)
+   * จำเป็นเมื่อ state จริงอยู่ที่อื่น เช่นใน URL — ไม่งั้นเลขหน้าใน UI จะไม่ตรงกับข้อมูลที่ server ส่งมา
+   */
+  pagination?: PaginationState;
+  /** ควบคุม sorting จากภายนอก (ใช้คู่กับ manualSorting) */
+  sorting?: SortingState;
+  /** ควบคุมคำค้นจากภายนอก (ใช้คู่กับ manualFiltering) */
+  globalFilter?: string;
+  /**
+   * เรียกเมื่อผู้ใช้พิมพ์ในช่องค้นหา
+   * ต้องส่งมาด้วยเมื่อเปิด manualFiltering ไม่งั้นช่องค้นหาจะไม่ทำอะไรเลย
+   * เพราะ TanStack ถูกสั่งไม่ให้กรองเองแล้ว
+   */
+  onGlobalFilterChange?: (value: string) => void;
+  manualPagination?: boolean;
+  manualSorting?: boolean;
+  manualFiltering?: boolean;
+  onPaginationChange?: OnChangeFn<PaginationState>;
+  onPageSizeChange?: (pageSize: number) => void;
+  onSortingChange?: OnChangeFn<SortingState>;
+  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+
+  // Customization
+  getRowClassName?: (row: Row<TData>) => string;
+  getSubRows?: (originalRow: TData) => TData[] | undefined;
+  getRowId?: (originalRow: TData) => string;
+  initialPageSize?: number;
+  meta?: Record<string, unknown>;
+  isLoading?: boolean;
+
+  // Advanced
+  enableColumnResizing?: boolean;
+  enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+  getFacetedUniqueValues?: (table: Table<TData>, columnId: string) => () => Map<unknown, number>;
+  pageSizeOptions?: number[];
+  onReorder?: (newData: TData[]) => void;
+  renderCustomView?: (table: Table<TData>) => React.ReactNode;
+}