@suphark/ui 0.1.1 → 0.2.0

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

@@ -0,0 +1,207 @@
+"use client";
+
+import { Badge } from "@suphark/ui/components/ui/badge";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@suphark/ui/components/ui/sheet";
+import type { Table } from "@tanstack/react-table";
+import { Search, SlidersHorizontal, X } from "lucide-react";
+import type React from "react";
+import type { FacetedFilterConfig } from ".";
+import { DataTableFacetedFilter } from "./data-table-faceted-filter";
+import { DataTableViewOptions } from "./data-table-view-option";
+
+interface DataTableToolbarProps<TData> {
+  table: Table<TData>;
+  facetedFilters?: FacetedFilterConfig[];
+  actionsComponent?: React.ReactNode;
+  globalFilterPlaceholder?: string;
+  toolbarFilters?: React.ReactNode;
+  preservedFilterIds?: string[];
+}
+
+export function DataTableToolbar<TData>({
+  table,
+  facetedFilters,
+  actionsComponent,
+  globalFilterPlaceholder,
+  toolbarFilters,
+  preservedFilterIds = [],
+}: DataTableToolbarProps<TData>) {
+  const globalFilter = table.getState().globalFilter;
+  const preservedFilterIdSet = new Set(preservedFilterIds);
+  const userColumnFilters = table
+    .getState()
+    .columnFilters.filter((filter) => !preservedFilterIdSet.has(filter.id));
+  const activeFilterCount = userColumnFilters.length + (globalFilter ? 1 : 0);
+
+  const isFiltered = activeFilterCount > 0;
+
+  const resetUserFilters = () => {
+    table.setColumnFilters((filters) =>
+      filters.filter((filter) => preservedFilterIdSet.has(filter.id)),
+    );
+    table.setGlobalFilter("");
+  };
+
+  const renderFilterControls = (fullWidth = false) =>
+    facetedFilters?.map((filter: FacetedFilterConfig) => {
+      const column = table.getColumn(filter.columnId);
+      if (!column) return null;
+
+      return (
+        <DataTableFacetedFilter
+          key={filter.columnId}
+          column={column}
+          title={filter.title}
+          options={filter.options}
+          compact={filter.compact}
+          fullWidth={fullWidth}
+        />
+      );
+    });
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+        {globalFilterPlaceholder && (
+          <InputGroup className="h-8 w-full sm:w-[240px] lg:w-[320px]">
+            <InputGroupAddon align="inline-start">
+              <Search aria-hidden="true" className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput
+              aria-label="ค้นหาข้อมูลในตาราง"
+              name="table-search"
+              autoComplete="off"
+              placeholder={globalFilterPlaceholder}
+              value={(globalFilter as string) ?? ""}
+              onChange={(event) => table.setGlobalFilter(String(event.target.value))}
+            />
+            {!!globalFilter && (
+              <InputGroupAddon align="inline-end">
+                <InputGroupButton
+                  variant="ghost"
+                  aria-label="ล้างคำค้นหา"
+                  onClick={() => table.setGlobalFilter("")}
+                >
+                  <X aria-hidden="true" className="size-4" />
+                </InputGroupButton>
+              </InputGroupAddon>
+            )}
+          </InputGroup>
+        )}
+
+        <div className="hidden xl:contents">
+          {renderFilterControls()}
+          {toolbarFilters}
+        </div>
+
+        <Sheet>
+          <SheetTrigger render={<Button variant="outline" size="sm" className="xl:hidden" />}>
+            <SlidersHorizontal />
+            ตัวกรอง
+            {activeFilterCount > 0 && (
+              <Badge variant="secondary" className="ml-1 px-1.5 tabular-nums">
+                {activeFilterCount}
+              </Badge>
+            )}
+          </SheetTrigger>
+          <SheetContent
+            side="right"
+            showCloseButton={false}
+            className="w-[min(24rem,calc(100vw-1rem))] sm:max-w-md"
+          >
+            <SheetHeader className="border-b pr-12">
+              <SheetTitle>ตัวกรองข้อมูล</SheetTitle>
+              <SheetDescription>เลือกได้หลายเงื่อนไข ผลลัพธ์จะอัปเดตทันที</SheetDescription>
+              <SheetClose
+                render={
+                  <Button variant="ghost" size="icon-sm" className="absolute top-3 right-3" />
+                }
+              >
+                <X />
+                <span className="sr-only">ปิดตัวกรอง</span>
+              </SheetClose>
+            </SheetHeader>
+            <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-4">
+              {renderFilterControls(true)}
+              {toolbarFilters}
+            </div>
+            {isFiltered && (
+              <SheetFooter className="border-t">
+                <Button variant="secondary" onClick={resetUserFilters}>
+                  <X />
+                  ล้างตัวกรองทั้งหมด
+                </Button>
+              </SheetFooter>
+            )}
+          </SheetContent>
+        </Sheet>
+
+        {isFiltered && (
+          <Button variant="secondary" size="sm" onClick={resetUserFilters}>
+            ล้างตัวกรอง
+            <X />
+          </Button>
+        )}
+      </div>
+
+      <div className="ml-auto flex flex-wrap items-center justify-end gap-2 self-start">
+        {actionsComponent}
+        <DataTableViewOptions table={table} />
+      </div>
+
+      {isFiltered && (
+        <div className="flex w-full flex-wrap gap-2 pt-1">
+          {userColumnFilters.map((filter) => {
+            const config = facetedFilters?.find((f) => f.columnId === filter.id);
+            if (!config) return null;
+
+            const values = Array.isArray(filter.value) ? filter.value : [filter.value];
+            const labels = values
+              .map((val) => {
+                const option = config.options.find((opt) => String(opt.value) === String(val));
+                return option ? option.label : String(val);
+              })
+              .join(", ");
+            const displayedLabels =
+              config.compact && values.length > 1 ? `${values.length} รายการ` : labels;
+
+            return (
+              <Badge
+                key={filter.id}
+                variant="secondary"
+                className="flex items-center gap-1.5 rounded-md px-2 py-1 font-normal"
+              >
+                <span className="text-muted-foreground">{config.title}:</span>
+                <span className="font-medium">{displayedLabels}</span>
+                <button
+                  type="button"
+                  aria-label={`ล้างตัวกรอง ${config.title}: ${displayedLabels}`}
+                  onClick={() => table.getColumn(filter.id)?.setFilterValue(undefined)}
+                  className="ml-1 rounded-full outline-none hover:bg-muted-foreground/20"
+                >
+                  <X className="size-3" />
+                </button>
+              </Badge>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,59 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import type { Table } from "@tanstack/react-table";
+import { Settings2 } from "lucide-react";
+
+interface DataTableViewOptionsProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={<Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex" />}
+      >
+        <Settings2 className="mr-2 h-4 w-4" />
+        View
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[150px]">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter(
+            (column) =>
+              typeof column.accessorFn !== "undefined" &&
+              column.getCanHide() &&
+              column.columnDef.enableHiding !== false,
+          )
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                // Base UI ปิดเมนูหลังคลิกเป็นค่าเริ่มต้น — ติ๊กเลือกคอลัมน์ต้องเปิดค้างไว้
+                closeOnClick={false}
+              >
+                {column.id.replace(/([A-Z])/g, " $1")}
+              </DropdownMenuCheckboxItem>
+            );
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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";