@suphark/ui 0.25.0 → 0.26.0

package/CHANGELOG.md

@@ -2,6 +2,66 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.26.0] — 2026-10-03
+
+ปิดงานค้างจากผลรีวิว + prop ที่ DueBell ขอ — เพิ่มอย่างเดียว
+
+### Added
+
+- `NumberInput`: `inputRef` (ref ของช่องที่พิมพ์ — focus เองได้) และ `autoFocus` (คำขอจาก DueBell)
+- `TimePicker`: `roundToStep` — ปัดนาทีที่พิมพ์ลงตาม `minuteStep` (เช่น step 60 + พิมพ์ 14:30 → 14:00); ค่าเริ่มต้นเก็บตามที่พิมพ์เหมือนเดิม (คำขอจาก DueBell)
+
+### Changed
+
+- **ช่องกรอกใช้ขนาดตัวอักษรตามบทบาท `text-body`** (16px มือถือ / 15px จอกว้าง) — `Input`, `Textarea`, `SelectTrigger`, `NativeSelect` (+ `NumberInput`, `TagsInput`): เดิม `text-base md:text-sm` = 14px บนจอกว้าง เล็กกว่าข้อความรอบข้าง 1px และ `text-body` ที่แอปใส่ให้ช่องได้ผลแค่มือถือ (pi-done ต้องเติม `md:text-body` เอง 19 จุด — ลบได้แล้ว); `SelectTrigger`/`NativeSelect` เดิม 14px แม้บนมือถือ (iOS ซูมเมื่อโฟกัส) — แก้ไฟล์ shadcn 4 ไฟล์เป็นข้อยกเว้น (เพิ่มในรายการคืนไฟล์หลัง `shadcn add --overwrite` ใน CLAUDE.md); `className` ของแอปยังแทนได้ (`cn` รู้จักคลาสตามบทบาท)
+- ปุ่ม `ActionButton`/`LinkButton` ที่มี tooltip ไม่สร้าง `TooltipProvider` ต่อปุ่มแล้ว (ตาราง 50 แถว = 100+ provider) — ใช้ `delay={0}` ที่ trigger แทน หน้าตา/จังหวะเหมือนเดิม
+- `DesignSystemShowcase`: แท็บอื่นนอกจาก "ภาพรวม" โหลดแบบ lazy เมื่อเปิดแท็บ (เดิม import ทุกแท็บ ~1 MB) — ลิงก์ข้ามแท็บไปหัวข้อรอแท็บโหลดเสร็จก่อนเลื่อน
+- ลบ dependency `cn` ที่ไม่ได้ใช้ (แอปไม่ต้องติดตั้งเพิ่ม)
+- docs: agent-rules — barrel ที่ client import ห้าม re-export schema ของ zod (ค่า) ให้ export แค่ type (DueBell −18% ต่อหน้า); `ChartConfig` ใช้เฉพาะค่าที่แอปกำหนดเอง (ค่าถูกเขียนลง `<style>` ตรง ๆ)
+- CI: `permissions: contents: read` (+ `pull-requests: read` ให้ gitleaks) — GITHUB_TOKEN อ่านได้อย่างเดียว; pin action ด้วย commit SHA (checkout v4.4.0, gitleaks-action v2.3.9, pnpm/action-setup v4.3.0, setup-node v4.4.0)
+- showcase: `/components/[slug]` โหลด demo แบบ `next/dynamic` ต่อ slug (`src/docs/demos.tsx` + `DemoView`) — เดิมทุกหน้าโหลด demo ทั้ง 129 ตัว (~409 kB gzip ต่อหน้า เช่น `/components/badge` พก recharts)
+- showcase: demo `code-block`/`secret-reveal` ใช้ค่า `example_…` แทน `sk_live_…` (ไม่ให้ secret scanner แจ้งเตือนผิด)
+- showcase: `@suphark/auth-client` ^0.1.7 → **^0.6.1** (แก้ open redirect ใน `safeNextPath` ของ handler `/auth/login|callback|logout` — ทดสอบ `/auth/logout?next=/%09/evil.com` แล้วไม่ออกนอกโดเมน); breaking ระหว่างทาง (ลบ Prisma adapter, เปลี่ยนชื่อ `ACCESS_DENIED`) ไม่กระทบ showcase
+
+## [0.25.1] — 2026-10-02
+
+แก้ตามผลรีวิว codebase (bug / security / performance) — ไม่เปลี่ยน props
+
+### Fixed
+
+- **`NumberInput`**: input ซ่อนของ Base UI (ที่ส่งค่าใน FormData) ได้ `step` ไปด้วย → browser ปฏิเสธค่าทศนิยม/ค่าที่ไม่ลง step นับจาก `min` แล้ว **บล็อก submit เงียบ ๆ** (เช่น 1500.5 เมื่อ step=1, 150 เมื่อ min=0 step=100 — DueBell เจอ) → input ซ่อนใช้ `step="any"` (ปุ่ม −/+ ยังเลื่อนตาม `step`; min/max ยังตรวจ)
+- **`TimePicker`**: พิมพ์ผิดรูปแบบแล้วกดส่ง ฟอร์มเคยส่งค่าเดิมไปเงียบ ๆ → ช่องเป็น invalid จริง (`setCustomValidity`, ข้อความ `UiText.time.invalid`) ฟอร์มไม่ส่งจนแก้
+- **`DateTimePicker`**: แยกไฟล์ (`form/date-time-picker.tsx`); ข้อความวัน/เวลาและค่าใน input ซ่อนคำนวณหลัง hydrate (เดิม server UTC กับ browser ต่างกัน 7 ชม. = hydration mismatch เมื่อมีค่าเริ่มต้น); **`name` ส่ง `"YYYY-MM-DDTHH:mm+07:00"` (มี offset)** แทนค่าที่ไม่มีโซนเวลา → `new Date(formData.get(name))` บน server ได้เวลาที่ถูก (เดิมคลาด 7 ชม.)
+- `TimeColumns`: เลื่อนเฉพาะในคอลัมน์ (เดิม `scrollIntoView` เลื่อนทั้งหน้าทุกครั้งที่เลือก)
+- **`MonthStepper` / `useMonthCursor`**: "เดือนนี้" คิดตามเวลาไทย (`Asia/Bangkok`) ให้ server กับ browser ตรงกัน — เดิมช่วง 00:00–06:59 ของวันที่ 1 ทุกเดือน server (UTC) เห็นเดือนก่อน = hydration mismatch; `currentMonthKey(now?, timeZone?)` รับโซนเวลาได้ (ไม่ส่ง = เครื่องเหมือนเดิม)
+- **`StepForm`**: ดับเบิลคลิกปุ่มส่ง/ถัดไปเคยเรียก `onSubmit` 2 ครั้ง หรือข้ามหน้าตรวจทาน (คลิกที่สองตกที่ปุ่ม "ส่ง" ตำแหน่งเดิม) → กันซ้ำแบบ synchronous + ไม่นับคลิกภายใน 500 ms หลังเปลี่ยนขั้น; input ซ่อนของ Base UI ผิด → โฟกัสช่องที่มองเห็นของมันเอง (เดิมโฟกัสช่องแรกของขั้น)
+- **`RowActions` / `ConfirmActionButton`**: action ที่คืน `FormState` `{ ok: false, error }` (ไม่ได้ throw) เคยถูกถือว่าสำเร็จ (ปิด dialog + refresh ไม่มีข้อความ) → toast error + คง dialog ไว้ (`failedResult`)
+- **`ActionMenu`**: รายการที่มี `href` + `confirm` เคยไปเลยโดยไม่ถาม → ถามก่อนแล้วค่อยไป; `onClick` ที่ throw/reject แสดง toast และคง dialog ไว้ (เดิม unhandled rejection เงียบ)
+- `ChatThread`: `onSend` ล้มเหลว = toast + คงข้อความในช่องไว้ให้ลองใหม่
+- `CommandPalette`: คีย์ลัดเทียบ `e.code` — แป้นภาษาไทย Ctrl+K ใช้ได้แล้ว (เดิม `e.key` = "า")
+- `SettingsLayout`: มือถือกด "กลับ" แล้วคืนโฟกัสไปหัวข้อเดิม (เดิมหลุดไป body); จอกว้างไม่ย้ายโฟกัสไปหัวข้อ (เดิมย้ายแค่ครั้งแรก)
+- `TagsInput`: วางหลายค่าแทรกที่ cursor ของข้อความที่พิมพ์ค้าง (เดิมทิ้งข้อความนั้น)
+- `ProviderButtons`: ปุ่มที่ `pendingId` ตรงแสดง spinner และกดซ้ำไม่ได้ (รวมแบบ `href`)
+- `useTicker`: subscribe คงที่ข้าม render — เดิมสมัครใหม่ทุก render ทำให้ "x นาทีที่แล้ว" ไม่อัปเดตถ้า parent render บ่อยกว่า interval
+- `useTableSearchParams`: setter หลายตัวติดกัน (เช่น setFilter แล้ว setSort) ต่อจากค่าที่เพิ่งตั้ง (เดิมตัวหลังทับตัวแรก)
+- `useDataTable`: sync `columnFilters` ตามค่า (เดิมตามตัวอ้างอิง → array literal ทำให้ render ซ้ำ + ทับตัวกรองที่ผู้ใช้เพิ่งเลือก)
+
+### Security
+
+- `ClientRedirect`: รับเฉพาะ http(s)/path — ปฏิเสธ `javascript:`/`data:` (`location.replace` ไม่มีตัวกันแบบ `<a href>`/router)
+- showcase: `/login` ใช้ `safeNextPath` (`src/lib/safe-next.ts`) กัน open redirect `next=/%09/evil.com` (WHATWG URL ตัด tab → `//evil.com`); production (`VERCEL_ENV=production`) ที่ไม่มี env ของ Pi Auth หรือตั้ง `PI_AUTH_DISABLED` = build ล้ม แทนเปิดเว็บสาธารณะเงียบ ๆ — ตัว `safeNextPath` ของ `@suphark/auth-client` แก้ใน repo auth แล้ว (0.6.1 รอ publish)
+
+### Performance
+
+- **`DataTable`**: ส่วนลากเรียง (dnd-kit ~16 kB gzip) แยกเป็น `data-table-sortable.tsx` โหลดแบบ lazy เฉพาะเมื่อส่ง `onReorder` — เดิมทุกตารางพกไปด้วย
+- **`FormFieldInput`**: variant `autocomplete` (cmdk + Radix Dialog ที่ cmdk พ่วงมา) แยกเป็น `form-field-autocomplete.tsx` โหลดแบบ lazy — เดิมทุกฟอร์มที่ใช้ช่องข้อความธรรมดาพก cmdk
+- `DataTable` ช่องค้นหา: ส่งให้ตารางเมื่อหยุดพิมพ์ 250 ms (Enter = ทันที) — เดิมกรอง/เรียง/render ทุกแถว (และ `router.replace` ถ้าผูก URL) ทุกตัวอักษร
+- `TimePicker` ไม่พา react-day-picker มาด้วยแล้ว (แยก `DateTimePicker`); import locale ตรงไฟล์ (`date-fns/locale/th`, `date-fns/locale/en-US`, `react-day-picker/locale/th`) — dev server ไม่ต้อง compile locale ทั้ง ~700 ไฟล์
+- `PullToRefresh`: ติดตั้ง `touchmove` แบบ non-passive เฉพาะตอนจอมือถือ + หน้าอยู่บนสุด (เดิมติดตลอด → browser ต้องรอ JS ก่อนเลื่อนทุกครั้ง)
+- `TreeView`: `expandedIds` แบบ controlled ไม่ทำให้ memo ของแถวคำนวณใหม่ทุก render
+- showcase: หน้า number-input อธิบาย step ตามพฤติกรรมใหม่
+- tests 12 กรณี (`fixes-0-25-1.test.tsx`, `lazy-parts.test.tsx` + StepForm/NumberInput ใน `inputs-0-25.test.tsx`)
+
 ## [0.25.0] — 2026-10-02
 
 input ใหม่ตามแผนจาก shadcnstudio.com — เพิ่มอย่างเดียว

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.25.0",
+  "version": "0.26.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 เอง",
@@ -72,7 +72,6 @@
     "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",

package/src/components/app-shell/command-palette.tsx

@@ -148,8 +148,15 @@ export function CommandPalette({
   useEffect(() => {
     if (!shortcut) return;
     const key = shortcut.toLowerCase();
+    // เทียบตำแหน่งปุ่ม (e.code) สำหรับตัวอักษร/ตัวเลข — แป้นไทย Ctrl+K ให้ e.key = "า" แต่ e.code ยังเป็น "KeyK"
+    const code = /^[a-z]$/.test(key)
+      ? `Key${key.toUpperCase()}`
+      : /^\d$/.test(key)
+        ? `Digit${key}`
+        : null;
     const onKey = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === key) {
+      const matches = e.key.toLowerCase() === key || (code !== null && e.code === code);
+      if ((e.metaKey || e.ctrlKey) && matches) {
         e.preventDefault();
         setOpenRef.current(!openRef.current);
       }

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

@@ -0,0 +1,154 @@
+"use client";
+
+/**
+ * ส่วนลากเรียงแถวของ DataTable (dnd-kit) — แยกไฟล์และโหลดแบบ lazy เฉพาะเมื่อส่ง `onReorder`
+ * เดิม import ที่ data-table.tsx ทำให้ทุกตารางพก dnd-kit (~16 kB gzip) แม้แทบไม่มีตารางไหนลากเรียง
+ */
+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 { TableCell, TableRow } from "@suphark/ui/components/ui/table";
+import { cn } from "@suphark/ui/lib/utils";
+import { flexRender, type Row, type Table } from "@tanstack/react-table";
+import type { CSSProperties, ReactNode } from "react";
+import { toast } from "sonner";
+
+interface RowStyleProps<TData> {
+  enableColumnResizing?: boolean;
+  getRowClassName?: (row: Row<TData>) => string;
+  stickyEdgeColumns?: boolean;
+}
+
+function DraggableRow<TData>({
+  row,
+  enableColumnResizing,
+  getRowClassName,
+  stickyEdgeColumns,
+}: RowStyleProps<TData> & { row: Row<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>
+  );
+}
+
+/** แถวที่ลากได้ (อยู่ใน TableBody) */
+export function SortableTableRows<TData>({
+  rows,
+  ...rowProps
+}: RowStyleProps<TData> & { rows: Row<TData>[] }) {
+  return (
+    <SortableContext items={rows.map((row) => row.id)} strategy={verticalListSortingStrategy}>
+      {rows.map((row) => (
+        <DraggableRow key={row.id} row={row} {...rowProps} />
+      ))}
+    </SortableContext>
+  );
+}
+
+/** DndContext + sensor + คำนวณลำดับใหม่ (ครอบตารางทั้งตัว) */
+export function SortableTableProvider<TData>({
+  table,
+  data,
+  getRowId,
+  onReorder,
+  children,
+}: {
+  table: Table<TData>;
+  data: TData[];
+  getRowId?: (row: TData) => string;
+  onReorder: (data: TData[]) => void;
+  children: ReactNode;
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  function handleDragEnd(event: DragEndEvent) {
+    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 idOf = (item: TData) =>
+        getRowId ? getRowId(item) : (item as { id?: string | number }).id;
+      const oldIndex = data.findIndex((item) => idOf(item) === active.id);
+      const newIndex = data.findIndex((item) => idOf(item) === over.id);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        onReorder(arrayMove(data, oldIndex, newIndex));
+      }
+    }
+  }
+
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      {children}
+    </DndContext>
+  );
+}

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

@@ -21,6 +21,7 @@ import {
 import type { Table } from "@tanstack/react-table";
 import { Search, SlidersHorizontal, X } from "lucide-react";
 import type React from "react";
+import { useEffect, useRef, useState } from "react";
 import type { FacetedFilterConfig } from ".";
 import { DataTableFacetedFilter } from "./data-table-faceted-filter";
 import { DataTableViewOptions } from "./data-table-view-option";
@@ -43,6 +44,31 @@ export function DataTableToolbar<TData>({
   preservedFilterIds = [],
 }: DataTableToolbarProps<TData>) {
   const globalFilter = table.getState().globalFilter;
+  // ค้นหา: เก็บข้อความในช่องเอง แล้วส่งให้ตารางเมื่อหยุดพิมพ์ 250 ms — เดิมกรอง/เรียง/render ทุกแถวทุกตัวอักษร
+  // (และถ้าแอปผูก globalFilter กับ URL = router.replace ทุกตัวอักษร)
+  const [searchDraft, setSearchDraft] = useState<string>((globalFilter as string) ?? "");
+  const committed = useRef<string>((globalFilter as string) ?? "");
+  useEffect(() => {
+    // ค่าเปลี่ยนจากข้างนอก (ล้างตัวกรอง / URL) → ตามให้ตรง
+    const external = (globalFilter as string) ?? "";
+    if (external !== committed.current) {
+      committed.current = external;
+      setSearchDraft(external);
+    }
+  }, [globalFilter]);
+  useEffect(() => {
+    if (searchDraft === committed.current) return;
+    const timer = setTimeout(() => {
+      committed.current = searchDraft;
+      table.setGlobalFilter(searchDraft);
+    }, 250);
+    return () => clearTimeout(timer);
+  }, [searchDraft, table]);
+  const commitSearch = (value: string) => {
+    setSearchDraft(value);
+    committed.current = value;
+    table.setGlobalFilter(value);
+  };
   const preservedFilterIdSet = new Set(preservedFilterIds);
   const userColumnFilters = table
     .getState()
@@ -88,15 +114,18 @@ export function DataTableToolbar<TData>({
               name="table-search"
               autoComplete="off"
               placeholder={globalFilterPlaceholder}
-              value={(globalFilter as string) ?? ""}
-              onChange={(event) => table.setGlobalFilter(String(event.target.value))}
+              value={searchDraft}
+              onChange={(event) => setSearchDraft(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") commitSearch(searchDraft);
+              }}
             />
-            {!!globalFilter && (
+            {!!searchDraft && (
               <InputGroupAddon align="inline-end">
                 <InputGroupButton
                   variant="ghost"
                   aria-label="ล้างคำค้นหา"
-                  onClick={() => table.setGlobalFilter("")}
+                  onClick={() => commitSearch("")}
                 >
                   <X aria-hidden="true" className="size-4" />
                 </InputGroupButton>

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

@@ -1,22 +1,5 @@
 "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,
@@ -26,72 +9,22 @@ import {
   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 { flexRender } from "@tanstack/react-table";
 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>
-  );
-}
+// ส่วนลากเรียง (dnd-kit) โหลดเฉพาะตารางที่ส่ง onReorder
+// (React.lazy ทิ้ง generic ของ TData — cast กลับเป็นชนิดของต้นฉบับ)
+type SortableModule = typeof import("./data-table-sortable");
+const SortableTableProvider = React.lazy(() =>
+  import("./data-table-sortable").then((m) => ({ default: m.SortableTableProvider })),
+) as unknown as SortableModule["SortableTableProvider"];
+const SortableTableRows = React.lazy(() =>
+  import("./data-table-sortable").then((m) => ({ default: m.SortableTableRows })),
+) as unknown as SortableModule["SortableTableRows"];
 
 /**
  * DataTable
@@ -181,51 +114,7 @@ export function DataTable<TData, TValue>({
     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 = (
+  const renderTable = (sortable: boolean) => (
     <UiTable
       className={cn(
         "w-full border-collapse",
@@ -292,18 +181,13 @@ export function DataTable<TData, TValue>({
             </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>
+          sortable ? (
+            <SortableTableRows
+              rows={table.getRowModel().rows}
+              enableColumnResizing={enableColumnResizing}
+              getRowClassName={getRowClassName}
+              stickyEdgeColumns={stickyEdgeColumns}
+            />
           ) : (
             table.getRowModel().rows.map((row) => (
               <TableRow
@@ -374,15 +258,19 @@ export function DataTable<TData, TValue>({
         <>
           <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>
+              // ระหว่างโหลดส่วนลากเรียง แสดงตารางปกติไปก่อน (ลากไม่ได้ชั่วคราว)
+              <React.Suspense fallback={renderTable(false)}>
+                <SortableTableProvider
+                  table={table}
+                  data={data}
+                  getRowId={getRowId}
+                  onReorder={onReorder}
+                >
+                  {renderTable(true)}
+                </SortableTableProvider>
+              </React.Suspense>
             ) : (
-              tableContent
+              renderTable(false)
             )}
           </div>
           {showPagination && (

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

@@ -66,12 +66,15 @@ export function useDataTable<TData, TValue>({
     columnFiltersProp ?? initialColumnFilters,
   );
 
-  // Sync with prop if provided
+  // Sync with prop if provided — เทียบด้วยค่าเหมือน sorting/pagination: ผู้เรียกมักส่ง array literal ใหม่ทุก render
+  // ถ้าผูกกับตัวอ้างอิง effect จะรันทุก render → render ซ้ำ + ล้าง memo ของ row model + ทับตัวกรองที่ผู้ใช้เพิ่งเลือก
+  const columnFiltersKey = columnFiltersProp ? JSON.stringify(columnFiltersProp) : undefined;
   React.useEffect(() => {
-    if (columnFiltersProp !== undefined) {
-      setColumnFilters(columnFiltersProp);
-    }
-  }, [columnFiltersProp]);
+    if (columnFiltersKey === undefined) return;
+    setColumnFilters((current) =>
+      JSON.stringify(current) === columnFiltersKey ? current : JSON.parse(columnFiltersKey),
+    );
+  }, [columnFiltersKey]);
   const [sorting, setSorting] = React.useState<SortingState>(
     () => sortingProp ?? (initialState?.sorting as SortingState | undefined) ?? [],
   );