@suphark/ui 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.2.0] — 2026-09-18
+
+### Added
+
+- entry **`@suphark/ui/data-table`** (ยกจาก supplychain `components/data-table`): `DataTable`, `DataTableColumnHeader`, `DataTableToolbar`, `DataTablePagination`, `DataTableFacetedFilter`, `DataTableDateRangeFilter`, `DataTableViewOptions`, `DataTableRowActions`, `useDataTable`, types (`DataTableProps`, `FacetedFilterConfig`) + `DeleteManyButton`, `ResourcePropertyFilter` (+helpers) — ต้องมี peer `@tanstack/react-table` (optional; แอปที่ไม่ใช้ตารางไม่ต้องติดตั้ง); ลากเรียงแถวใช้ `@dnd-kit/*` เป็น dependency ของแพ็กเกจ
+- `useTableSearchParams` / `TABLE_PARAM` (state ตารางใน URL) ที่ `@suphark/ui/next`
+- tests: data-table, data-table-faceted-filter, resource-property-filter (รวม 34)
+- exports `./package.json`, `./components/data-table`
+- showcase: การ์ด DataTable จริงในแท็บ Data Display; code recipe ใช้ import path ของแพ็กเกจ
+- `apps/showcase/vercel.json` + `docs/ops/deploy-vercel.md`
+
+## [0.1.1] — 2026-09-18
+
+### Added
+
+- `NativeSelect` / `NativeSelectOption` (shadcn `native-select` — `<select>` ธรรมดาสำหรับฟอร์ม server action/FormData) ตามที่ Pi Auth ใช้ 17 ไฟล์
+- dependency `cn` (^0.3.0) — shadcn CLI รุ่นใหม่สร้างไฟล์ที่ `import { cn } from "cn"` แทน `lib/utils`; ทั้งสองทางใช้ได้ ไฟล์เดิม 59 ตัวยังใช้ `@suphark/ui/lib/utils`
+
+### Changed
+
+- ตัด `__tests__`/`*.test.*` ออกจาก tarball (`files` ใน package.json) — test ยังอยู่ใน repo
+
+### Notes
+
+- `ThemeToggle` props `persistedTheme` / `onThemeChange` เป็น optional อยู่แล้ว — ไม่ส่ง = ใช้ next-themes อย่างเดียว (ใช้แทน ThemeToggle ของ @pi/ui ได้โดยไม่ต้องเปลี่ยน call site)
+
 ## [0.1.0] — 2026-09-18
 
 รุ่นแรก — ยกจาก `supplychainnextjs-1` (source of truth) + ชุด generic จาก Pi Auth `@pi/ui`

package/README.md

@@ -10,7 +10,7 @@ Design system กลางของ Suphark apps (Pi Auth, DueBell, Pi PDF, supp
 pnpm add @suphark/ui @base-ui/react lucide-react react-hook-form
 ```
 
-peer ที่ต้องมีอยู่แล้ว: `react`/`react-dom` ≥19, `tailwindcss` ^4, `next` ≥15 (เฉพาะ `@suphark/ui/next`), `recharts` (เฉพาะ `components/ui/chart`)
+peer ที่ต้องมีอยู่แล้ว: `react`/`react-dom` ≥19, `tailwindcss` ^4, `next` ≥15 (เฉพาะ `@suphark/ui/next`), `@tanstack/react-table` (เฉพาะ `@suphark/ui/data-table`), `recharts` (เฉพาะ `components/ui/chart`)
 
 ### 1. next.config.ts
 
@@ -58,6 +58,9 @@ import { Button, Card, FormFieldInput, StatusBadge, ThemeToggle, cn } from "@sup
 // ของที่ใช้ next/navigation หรือ next/link
 import { FormDialog, RowActions, LinkButton, RefreshButton, PageShell } from "@suphark/ui/next";
 
+// ตารางข้อมูล (ต้องติดตั้ง @tanstack/react-table เอง)
+import { DataTable, DataTableColumnHeader, useDataTable } from "@suphark/ui/data-table";
+
 // import ตรงรายไฟล์ก็ได้ (เช่น chart ที่ต้องมี recharts)
 import { ChartContainer } from "@suphark/ui/components/ui/chart";
 ```
@@ -68,6 +71,7 @@ import { ChartContainer } from "@suphark/ui/components/ui/chart";
 |---|---|---|
 | `src/components/ui/*` | shadcn/ui ต้นฉบับ 59 ตัว (+ `__tests__`) | **ห้ามแก้มือ** — เพิ่ม/อัปเดตด้วย `pnpm dlx shadcn@latest add <name>` ใน `packages/ui` (`components.json` ตั้ง alias ไว้แล้ว) |
 | `src/components/shared/*` | ของที่เราประกอบเอง: ปุ่มมาตรฐาน (`button/`), form-field บน react-hook-form (`form/`), layout, theme, combobox, และชุดจาก Pi Auth (FormDialog, NameIdFields, StatusBadge, RowMenu, …) | แก้ได้ แต่คง props เดิมให้มากที่สุด (minor = เพิ่ม, major = เปลี่ยน) |
+| `src/components/data-table/*` | DataTable บน tanstack (toolbar, faceted filter, pagination, view options, row actions, ลากเรียงแถว) | entry `@suphark/ui/data-table` |
 | `src/components/design-system/*` | หน้า showcase (render ใน `apps/showcase`) | ไม่อยู่ใน barrel |
 | `src/lib/*`, `src/hooks/*` | `cn`, formatter วันที่ไทย, สีสถานะ, permission context, `useIsMobile`, `useCopyToClipboard` | |
 | `src/styles.css` | token (slate + success/warning/sidebar/chart), radius, ฟอนต์, scrollbar, dark variant | |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",
@@ -24,6 +24,8 @@
   ],
   "files": [
     "src",
+    "!src/**/__tests__",
+    "!src/**/*.test.*",
     "scripts",
     "components.json",
     "README.md",
@@ -36,18 +38,25 @@
   "exports": {
     ".": "./src/index.ts",
     "./next": "./src/next.ts",
+    "./data-table": "./src/data-table.ts",
     "./styles.css": "./src/styles.css",
     "./components/shared/button": "./src/components/shared/button/index.ts",
     "./components/shared/theme": "./src/components/shared/theme/index.ts",
+    "./components/data-table": "./src/components/data-table/index.ts",
     "./components/*": "./src/components/*.tsx",
     "./lib/*": "./src/lib/*.ts",
-    "./hooks/*": "./src/hooks/*.ts"
+    "./hooks/*": "./src/hooks/*.ts",
+    "./package.json": "./package.json"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fontsource/noto-sans-thai-looped": "^5.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "cn": "^0.3.0",
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.5.0",
@@ -61,6 +70,7 @@
   },
   "peerDependencies": {
     "@base-ui/react": ">=1.7.0",
+    "@tanstack/react-table": ">=8.20.0",
     "lucide-react": ">=1.30.0",
     "next": ">=15",
     "react": ">=19",
@@ -75,10 +85,14 @@
     },
     "recharts": {
       "optional": true
+    },
+    "@tanstack/react-table": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@base-ui/react": "^1.8.0",
+    "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import { cn } from "@suphark/ui/lib/utils";
+import type { Column } from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff, Filter } from "lucide-react";
+
+interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title: 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 gap-2", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <Button variant="ghost" size="sm" className="-ml-3 h-8 data-[state=open]:bg-accent" />
+          }
+        >
+          <span>{title}</span>
+          {column.getIsSorted() === "desc" ? (
+            <ArrowDown />
+          ) : column.getIsSorted() === "asc" ? (
+            <ArrowUp />
+          ) : (
+            <ChevronsUpDown />
+          )}
+          {column.getIsFiltered() && (
+            <Filter className="ml-1 size-3 fill-primary/10 text-primary" />
+          )}
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUp />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDown />
+            Desc
+          </DropdownMenuItem>
+          {column.getCanHide() && column.columnDef.enableHiding !== false && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+                <EyeOff />
+                Hide
+              </DropdownMenuItem>
+            </>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/components/data-table/data-table-date-range-filter.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { DateRangePicker } from "@suphark/ui/components/shared/date/date-range-picker";
+import type { Column } from "@tanstack/react-table";
+import type { DateRange } from "react-day-picker";
+
+interface DataTableDateRangeFilterProps<TData> {
+  column?: Column<TData, unknown>;
+  title?: string;
+}
+
+export function DataTableDateRangeFilter<TData>({
+  column,
+  title,
+}: DataTableDateRangeFilterProps<TData>) {
+  const filterValue = column?.getFilterValue() as DateRange | undefined;
+
+  return (
+    <DateRangePicker
+      value={filterValue}
+      onValueChange={(range) => column?.setFilterValue(range)}
+      title={title}
+    />
+  );
+}

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

@@ -0,0 +1,181 @@
+"use client";
+
+import { Badge } from "@suphark/ui/components/ui/badge";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@suphark/ui/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
+import { Separator } from "@suphark/ui/components/ui/separator";
+import { cn } from "@suphark/ui/lib/utils";
+import type { Column } from "@tanstack/react-table";
+import { Check, CirclePlus } from "lucide-react";
+import * as React from "react";
+
+interface DataTableFacetedFilterProps<TData, TValue> {
+  column?: Column<TData, TValue>;
+  title?: string;
+  options: {
+    label: string;
+    value: string | number | boolean;
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+  compact?: boolean;
+  fullWidth?: boolean;
+}
+
+export function DataTableFacetedFilter<TData, TValue>({
+  column,
+  title,
+  options,
+  compact = false,
+  fullWidth = false,
+}: DataTableFacetedFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues();
+  const filterValue = column?.getFilterValue();
+  const selectedValues = new Set(Array.isArray(filterValue) ? filterValue.map(String) : []);
+
+  const areAllSelected = options.length > 0 && selectedValues.size === options.length;
+
+  const sortedOptions = React.useMemo(() => {
+    return [...options].sort((a, b) => {
+      const aSelected = selectedValues.has(String(a.value));
+      const bSelected = selectedValues.has(String(b.value));
+      if (aSelected && !bSelected) return -1;
+      if (!aSelected && bSelected) return 1;
+      return 0;
+    });
+  }, [options, selectedValues]);
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button
+            variant="outline"
+            size="sm"
+            className={cn(
+              "h-8 border-dashed",
+              compact && "h-7 px-2 text-xs",
+              fullWidth && "w-full justify-start",
+            )}
+          />
+        }
+      >
+        <CirclePlus />
+        {title}
+        {selectedValues?.size > 0 && (
+          <>
+            <Separator orientation="vertical" className="mx-2 h-4" />
+            <Badge
+              variant="secondary"
+              className={cn("rounded-sm px-1 font-normal", !compact && "lg:hidden")}
+            >
+              {selectedValues.size}
+            </Badge>
+            <div className={cn("hidden gap-1 lg:flex", compact && "lg:hidden")}>
+              {selectedValues.size > 2 ? (
+                <Badge variant="secondary" className="rounded-sm px-1 font-normal">
+                  เลือก {selectedValues.size} รายการ
+                </Badge>
+              ) : (
+                options.reduce((acc: React.ReactNode[], option) => {
+                  if (selectedValues.has(String(option.value))) {
+                    acc.push(
+                      <Badge
+                        variant="secondary"
+                        key={String(option.value)}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option.label}
+                      </Badge>,
+                    );
+                  }
+                  return acc;
+                }, [])
+              )}
+            </div>
+          </>
+        )}
+      </PopoverTrigger>
+      <PopoverContent className={cn("w-[200px] p-0", compact && "w-44")} align="start">
+        <Command>
+          {!compact ? <CommandInput placeholder={title} /> : null}
+          <CommandList>
+            <CommandEmpty>ไม่พบข้อมูล</CommandEmpty>
+            <CommandGroup>
+              {sortedOptions.map((option) => {
+                const valueAsString = String(option.value);
+                const isSelected = selectedValues.has(valueAsString);
+                return (
+                  <CommandItem
+                    key={valueAsString}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(valueAsString);
+                      } else {
+                        selectedValues.add(valueAsString);
+                      }
+                      const filterValues = Array.from(selectedValues);
+                      column?.setFilterValue(filterValues.length ? filterValues : undefined);
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "flex size-4 items-center justify-center rounded-[4px] border",
+                        isSelected
+                          ? "border-primary bg-primary text-primary-foreground"
+                          : "border-input [&_svg]:invisible",
+                      )}
+                    >
+                      <Check className="size-3.5 text-primary-foreground" />
+                    </div>
+                    {option.icon && <option.icon className="size-4 text-muted-foreground" />}
+                    <span>{option.label}</span>
+                    {facets?.get(valueAsString) && (
+                      <span className="ml-auto flex size-4 items-center justify-center font-mono text-muted-foreground text-xs">
+                        {facets.get(valueAsString)}
+                      </span>
+                    )}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {!compact && (selectedValues.size > 0 || !areAllSelected) && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  {areAllSelected ? (
+                    <CommandItem
+                      onSelect={() => column?.setFilterValue(undefined)}
+                      className="justify-center text-center"
+                    >
+                      ล้างตัวกรอง
+                    </CommandItem>
+                  ) : (
+                    <CommandItem
+                      key="select-all"
+                      onSelect={() => {
+                        const allValues = options.map((option) => String(option.value));
+                        column?.setFilterValue(allValues);
+                      }}
+                      className="justify-center text-center"
+                    >
+                      เลือกทั้งหมด
+                    </CommandItem>
+                  )}
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,114 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@suphark/ui/components/ui/select";
+import { cn } from "@suphark/ui/lib/utils";
+import type { Table } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>;
+  pageSizeOptions?: number[];
+  onPageSizeChange?: (pageSize: number) => void;
+}
+
+export function DataTablePagination<TData>({
+  table,
+  pageSizeOptions = [10, 20, 30, 40, 50],
+  onPageSizeChange,
+}: DataTablePaginationProps<TData>) {
+  const isRowSelectionEnabled = table.options.enableRowSelection !== false;
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-between gap-4 px-2 sm:flex-row sm:gap-0",
+        !isRowSelectionEnabled && "sm:justify-end",
+      )}
+    >
+      {isRowSelectionEnabled && (
+        <div className="flex-1 text-muted-foreground text-sm max-sm:text-center">
+          {table.getFilteredSelectedRowModel().rows.length} of{" "}
+          {table.getFilteredRowModel().rows.length} row(s) selected.
+        </div>
+      )}
+      <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8">
+        <div className="flex items-center gap-2">
+          <p className="font-medium text-sm max-sm:hidden">Rows per page</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              const newSize = Number(value);
+              table.setPageSize(newSize);
+              if (onPageSizeChange) {
+                onPageSizeChange(newSize);
+              }
+            }}
+          >
+            <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 w-[100px] items-center justify-center font-medium text-sm">
+          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="hidden size-8 lg:flex"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to first page</span>
+            <ChevronsLeft />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeft />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to next page</span>
+            <ChevronRight />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="hidden size-8 lg:flex"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to last page</span>
+            <ChevronsRight />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}