@suphark/ui 0.53.0 → 0.59.1

package/package.json

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

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

@@ -40,7 +40,7 @@ export function DataTableColumnHeader<TData, TValue>({
           ) : column.getIsSorted() === "asc" ? (
             <ArrowUp />
           ) : (
-            <ChevronsUpDown />
+            <ChevronsUpDown data-sort-idle="" />
           )}
           {column.getIsFiltered() && (
             <Filter className="ml-1 size-3 fill-primary/10 text-primary" />

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

@@ -17,14 +17,84 @@ interface DataTablePaginationProps<TData> {
   table: Table<TData>;
   pageSizeOptions?: number[];
   onPageSizeChange?: (pageSize: number) => void;
+  /** `quiet` = "1–10 จาก 128 · แถวต่อหน้า · ‹ 1 / 13 ›" (ตัดปุ่มหน้าแรก/สุดท้ายและข้อความจำนวนที่เลือก) */
+  variant?: "default" | "quiet";
 }
 
 export function DataTablePagination<TData>({
   table,
   pageSizeOptions = [10, 20, 30, 40, 50],
   onPageSizeChange,
+  variant = "default",
 }: DataTablePaginationProps<TData>) {
   const text = useUiText();
+  if (variant === "quiet") {
+    const { pageIndex, pageSize } = table.getState().pagination;
+    const total = table.options.manualPagination
+      ? (table.options.rowCount ?? table.getRowModel().rows.length)
+      : table.getFilteredRowModel().rows.length;
+    const from = total === 0 ? 0 : pageIndex * pageSize + 1;
+    const to = Math.min(total, (pageIndex + 1) * pageSize);
+    return (
+      <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-1 text-muted-foreground text-xs">
+        <span className="tabular-nums">
+          {(text.table?.rangeOf ?? "{from}–{to} จาก {total}")
+            .replace("{from}", String(from))
+            .replace("{to}", String(to))
+            .replace("{total}", String(total))}
+        </span>
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5 max-sm:hidden">
+            <span>{text.table?.rowsPerPage ?? "แถวต่อหน้า"}</span>
+            <Select
+              value={`${pageSize}`}
+              onValueChange={(value) => {
+                const newSize = Number(value);
+                table.setPageSize(newSize);
+                onPageSizeChange?.(newSize);
+              }}
+            >
+              <SelectTrigger size="sm" className="h-7 w-16 border-transparent bg-muted shadow-none">
+                <SelectValue placeholder={pageSize} />
+              </SelectTrigger>
+              <SelectContent side="top">
+                {pageSizeOptions.map((size) => (
+                  <SelectItem key={size} value={`${size}`}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-0.5">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label={text.pagination?.previous ?? "ก่อนหน้า"}
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              className="pointer-coarse:h-11 pointer-coarse:w-11"
+            >
+              <ChevronLeft />
+            </Button>
+            <span className="px-1.5 font-semibold text-foreground tabular-nums">
+              {pageIndex + 1} / {Math.max(1, table.getPageCount())}
+            </span>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label={text.pagination?.next ?? "ถัดไป"}
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              className="pointer-coarse:h-11 pointer-coarse:w-11"
+            >
+              <ChevronRight />
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
   const isRowSelectionEnabled = table.options.enableRowSelection !== false;
 
   return (

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

@@ -108,7 +108,7 @@ export function DataTableRowActions<TData>({
   };
 
   return (
-    <div className="flex justify-end">
+    <div data-slot="data-table-row-actions" className="flex justify-end">
       <DropdownMenu>
         <DropdownMenuTrigger
           render={

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

@@ -19,8 +19,9 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@suphark/ui/components/ui/sheet";
+import { useIsMobile } from "@suphark/ui/hooks/use-mobile";
 import type { Table } from "@tanstack/react-table";
-import { Search, SlidersHorizontal, X } from "lucide-react";
+import { Rows3, Rows4, Search, SlidersHorizontal, X } from "lucide-react";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
 import type { FacetedFilterConfig } from ".";
@@ -34,6 +35,10 @@ interface DataTableToolbarProps<TData> {
   globalFilterPlaceholder?: string;
   toolbarFilters?: React.ReactNode;
   preservedFilterIds?: string[];
+  /** `quiet`: ตัวกรองปุ่มเดียว + ชิป + ตัวนับ + สลับความหนาแน่นในบรรทัดเดียว (ดู `DataTableProps.variant`) */
+  variant?: "default" | "quiet";
+  density?: "comfortable" | "compact";
+  onDensityChange?: (density: "comfortable" | "compact") => void;
 }
 
 export function DataTableToolbar<TData>({
@@ -43,8 +48,12 @@ export function DataTableToolbar<TData>({
   globalFilterPlaceholder,
   toolbarFilters,
   preservedFilterIds = [],
+  variant = "default",
+  density = "comfortable",
+  onDensityChange,
 }: DataTableToolbarProps<TData>) {
   const text = useUiText();
+  const isMobile = useIsMobile();
   const globalFilter = table.getState().globalFilter;
   // ค้นหา: เก็บข้อความในช่องเอง แล้วส่งให้ตารางเมื่อหยุดพิมพ์ 250 ms — เดิมกรอง/เรียง/render ทุกแถวทุกตัวอักษร
   // (และถ้าแอปผูก globalFilter กับ URL = router.replace ทุกตัวอักษร)
@@ -114,6 +123,161 @@ export function DataTableToolbar<TData>({
       );
     });
 
+  const renderSheet = ({
+    side,
+    triggerVariant,
+    triggerClassName,
+  }: {
+    side: "right" | "bottom";
+    triggerVariant: "outline" | "ghost";
+    triggerClassName?: string;
+  }) => (
+    <Sheet>
+      <SheetTrigger
+        render={<Button variant={triggerVariant} size="sm" className={triggerClassName} />}
+      >
+        <SlidersHorizontal />
+        ตัวกรอง
+        {activeFilterCount > 0 && (
+          <Badge variant="secondary" className="ml-1 px-1.5 tabular-nums">
+            {activeFilterCount}
+          </Badge>
+        )}
+      </SheetTrigger>
+      <SheetContent
+        side={side}
+        showCloseButton={false}
+        className={
+          side === "bottom"
+            ? "max-h-[85dvh] rounded-t-2xl"
+            : "w-[min(24rem,calc(100vw-1rem))] sm:max-w-md"
+        }
+      >
+        <SheetHeader className="border-b pr-12">
+          <SheetTitle>{text.table?.filters ?? "ตัวกรองข้อมูล"}</SheetTitle>
+          <SheetDescription>
+            {text.table?.filtersDescription ?? "เลือกได้หลายเงื่อนไข ผลลัพธ์จะอัปเดตทันที"}
+          </SheetDescription>
+          <SheetClose
+            render={<Button variant="ghost" size="icon-sm" className="absolute top-3 right-3" />}
+          >
+            <X />
+            <span className="sr-only">{text.table?.closeFilters ?? "ปิดตัวกรอง"}</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>
+  );
+
+  if (variant === "quiet") {
+    const total = table.getCoreRowModel().rows.length;
+    const shown = table.getFilteredRowModel().rows.length;
+    return (
+      <div className="flex flex-wrap items-center gap-2">
+        {globalFilterPlaceholder && (
+          <InputGroup className="h-8 w-full pointer-coarse:h-11 sm:w-[220px]">
+            <InputGroupAddon align="inline-start">
+              <Search aria-hidden="true" className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput
+              aria-label={text.table?.search ?? "ค้นหาข้อมูลในตาราง"}
+              name="table-search"
+              autoComplete="off"
+              placeholder={globalFilterPlaceholder}
+              value={searchDraft}
+              onChange={(event) => setSearchDraft(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") commitSearch(searchDraft);
+              }}
+            />
+            {!!searchDraft && (
+              <InputGroupAddon align="inline-end">
+                <InputGroupButton
+                  variant="ghost"
+                  aria-label={text.table?.clearSearch ?? "ล้างคำค้นหา"}
+                  onClick={() => commitSearch("")}
+                >
+                  <X aria-hidden="true" className="size-4" />
+                </InputGroupButton>
+              </InputGroupAddon>
+            )}
+          </InputGroup>
+        )}
+        {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 displayed =
+            config.compact && values.length > 1 ? `${values.length} รายการ` : labels;
+          return (
+            <span
+              key={filter.id}
+              className="inline-flex h-7 items-center gap-1.5 rounded-full border bg-muted ps-2.5 pe-1 text-xs"
+            >
+              <span className="text-muted-foreground">{config.title}</span>
+              <b className="font-semibold">{displayed}</b>
+              <button
+                type="button"
+                aria-label={`${(text.table?.clearFilter ?? "ล้างตัวกรอง {name}").replace(
+                  "{name}",
+                  config.title,
+                )}: ${displayed}`}
+                onClick={() => table.getColumn(filter.id)?.setFilterValue(undefined)}
+                className="relative flex size-5 items-center justify-center rounded-full text-muted-foreground outline-none after:absolute after:-inset-3 after:content-[''] hover:bg-foreground/10 focus-visible:ring-3 focus-visible:ring-ring/50"
+              >
+                <X className="size-3" aria-hidden="true" />
+              </button>
+            </span>
+          );
+        })}
+        {renderSheet({
+          side: isMobile ? "bottom" : "right",
+          triggerVariant: "ghost",
+          triggerClassName: "text-muted-foreground pointer-coarse:h-11",
+        })}
+        <div className="ml-auto flex items-center gap-1">
+          <span className="me-1 text-muted-foreground text-xs tabular-nums">
+            {(text.table?.shownOf ?? "{shown} จาก {total} รายการ")
+              .replace("{shown}", String(shown))
+              .replace("{total}", String(total))}
+          </span>
+          {actionsComponent}
+          {onDensityChange && (
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label={text.table?.density ?? "ความหนาแน่นของแถว"}
+              aria-pressed={density === "compact"}
+              onClick={() => onDensityChange(density === "compact" ? "comfortable" : "compact")}
+              className="max-sm:hidden"
+            >
+              {density === "compact" ? <Rows4 /> : <Rows3 />}
+            </Button>
+          )}
+          <DataTableViewOptions table={table} iconOnly />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-wrap items-center gap-2">
       <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
@@ -152,49 +316,7 @@ export function DataTableToolbar<TData>({
           {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>{text.table?.filters ?? "ตัวกรองข้อมูล"}</SheetTitle>
-              <SheetDescription>
-                {text.table?.filtersDescription ?? "เลือกได้หลายเงื่อนไข ผลลัพธ์จะอัปเดตทันที"}
-              </SheetDescription>
-              <SheetClose
-                render={
-                  <Button variant="ghost" size="icon-sm" className="absolute top-3 right-3" />
-                }
-              >
-                <X />
-                <span className="sr-only">{text.table?.closeFilters ?? "ปิดตัวกรอง"}</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>
+        {renderSheet({ side: "right", triggerVariant: "outline", triggerClassName: "xl:hidden" })}
 
         {isFiltered && (
           <Button variant="secondary" size="sm" onClick={resetUserFilters}>

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

@@ -15,16 +15,27 @@ import { Settings2 } from "lucide-react";
 
 interface DataTableViewOptionsProps<TData> {
   table: Table<TData>;
+  /** ปุ่มไอคอนล้วน (`variant="quiet"`) */
+  iconOnly?: boolean;
 }
 
-export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
+export function DataTableViewOptions<TData>({
+  table,
+  iconOnly = false,
+}: DataTableViewOptionsProps<TData>) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
-        render={<Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex" />}
+        render={
+          iconOnly ? (
+            <Button variant="ghost" size="icon-sm" aria-label="View" className="hidden lg:flex" />
+          ) : (
+            <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex" />
+          )
+        }
       >
-        <Settings2 className="mr-2 h-4 w-4" />
-        View
+        <Settings2 className={iconOnly ? undefined : "mr-2 h-4 w-4"} />
+        {!iconOnly && "View"}
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[150px]">
         <DropdownMenuGroup>

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { SelectionBar } from "@suphark/ui/components/shared/selection-bar";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
   TableBody,
@@ -14,7 +15,7 @@ import { flexRender } from "@tanstack/react-table";
 import * as React from "react";
 import { DataTablePagination } from "./data-table-pagination";
 import { DataTableToolbar } from "./data-table-toolbar";
-import type { DataTableProps } from "./types";
+import type { DataTableMobileSlot, DataTableProps } from "./types";
 import { useDataTable } from "./use-data-table";
 
 // ส่วนลากเรียง (dnd-kit) โหลดเฉพาะตารางที่ส่ง onReorder
@@ -80,8 +81,13 @@ export function DataTable<TData, TValue>({
   preservedFilterIds,
   onReorder,
   renderCustomView,
+  variant = "default",
+  defaultDensity = "comfortable",
+  selectionActions,
 }: DataTableProps<TData, TValue>) {
   const text = useUiText();
+  const quiet = variant === "quiet";
+  const [density, setDensity] = React.useState<"comfortable" | "compact">(defaultDensity);
   const { table } = useDataTable({
     columns,
     data,
@@ -231,10 +237,21 @@ export function DataTable<TData, TValue>({
     </UiTable>
   );
 
+  const hasMobileSlots = table
+    .getAllLeafColumns()
+    .some((column) => (column.columnDef.meta as { mobile?: string } | undefined)?.mobile);
+  const mobileList =
+    quiet && hasMobileSlots && !isLoading && table.getRowModel().rows.length > 0 ? (
+      <QuietMobileList table={table} />
+    ) : null;
+
   const customView = renderCustomView?.(table);
 
   return (
-    <div className={cn("flex flex-col gap-4", containerClassName)}>
+    <div
+      data-variant={quiet ? "quiet" : undefined}
+      className={cn("flex flex-col gap-4", containerClassName)}
+    >
       {showToolbar && (
         <DataTableToolbar
           table={table}
@@ -243,6 +260,9 @@ export function DataTable<TData, TValue>({
           globalFilterPlaceholder={globalFilterPlaceholder}
           toolbarFilters={toolbarFilters?.(table)}
           preservedFilterIds={preservedFilterIds}
+          variant={variant}
+          density={density}
+          onDensityChange={setDensity}
         />
       )}
       {customView ? (
@@ -253,12 +273,21 @@ export function DataTable<TData, TValue>({
               table={table}
               pageSizeOptions={pageSizeOptions}
               onPageSizeChange={onPageSizeChange}
+              variant={variant}
             />
           )}
         </>
       ) : (
         <>
-          <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">
+          {quiet && mobileList}
+          <div
+            data-density={quiet ? density : undefined}
+            className={cn(
+              "overflow-x-auto rounded-lg border bg-card shadow-sm max-sm:-mx-2 max-sm:rounded-none max-sm:border-x-0",
+              quiet && QUIET_TABLE,
+              quiet && mobileList && "max-sm:hidden",
+            )}
+          >
             {onReorder ? (
               // ระหว่างโหลดส่วนลากเรียง แสดงตารางปกติไปก่อน (ลากไม่ได้ชั่วคราว)
               <React.Suspense fallback={renderTable(false)}>
@@ -287,11 +316,132 @@ export function DataTable<TData, TValue>({
                 table={table}
                 pageSizeOptions={pageSizeOptions}
                 onPageSizeChange={onPageSizeChange}
+                variant={variant}
               />
             </div>
           )}
         </>
       )}
+      {quiet &&
+        enableRowSelection !== false &&
+        table.getFilteredSelectedRowModel().rows.length > 0 && (
+          <SelectionBar
+            variant="pill"
+            count={table.getFilteredSelectedRowModel().rows.length}
+            onClear={() => table.resetRowSelection()}
+          >
+            {selectionActions?.(table)}
+          </SelectionBar>
+        )}
     </div>
   );
 }
+
+/** `variant="quiet"`: สไตล์ตารางทั้งก้อนผ่านตัวเลือก CSS (ไม่แตะ markup ของแถว/เซลล์ของแอป) */
+const QUIET_TABLE = [
+  "rounded-xl shadow-none",
+  // หัวตาราง: เรียบ ลูกศรเรียงโผล่เมื่อชี้ (คอลัมน์ที่เรียงอยู่แสดงตลอด)
+  "[&_thead]:bg-muted/40 [&_th]:h-9 [&_th]:font-semibold [&_th]:text-label [&_th]:text-muted-foreground",
+  "[&_[data-sort-idle]]:opacity-0 [&_th:hover_[data-sort-idle]]:opacity-60",
+  // แถว: พื้นตอนชี้ · แถวที่เลือกมีแถบสีซ้าย
+  "[&_tbody_tr]:hover:bg-muted/40",
+  "[&_tbody_tr[data-state=selected]]:bg-primary/[0.07] [&_tbody_tr[data-state=selected]]:shadow-[inset_3px_0_0_var(--primary)]",
+  // ช่องเลือก/ปุ่มท้ายแถว: ซ่อนจนกว่าจะชี้/โฟกัส/เลือก (อุปกรณ์ที่ชี้ไม่ได้เห็นตลอด)
+  "[@media(hover:hover)]:[&_tbody_tr:not(:hover):not(:focus-within):not([data-state=selected])_[role=checkbox]]:opacity-0",
+  "[@media(hover:hover)]:[&_tbody_tr:not(:hover):not(:focus-within)_[data-slot=data-table-row-actions]]:opacity-0",
+  "[&_[role=checkbox]]:transition-opacity [&_[data-slot=data-table-row-actions]]:transition-opacity",
+  // ความหนาแน่น
+  "data-[density=comfortable]:[&_td]:py-2.5 data-[density=compact]:[&_td]:py-1",
+].join(" ");
+
+const SLOT_ORDER: DataTableMobileSlot[] = ["title", "end", "sub", "status", "meta"];
+
+/** `variant="quiet"` บนมือถือ: รายการแถวละ 3 บรรทัดจากคอลัมน์ที่ใส่ `meta.mobile` */
+function QuietMobileList<TData>({
+  table,
+}: {
+  table: import("@tanstack/react-table").Table<TData>;
+}) {
+  const slotOf = (column: { columnDef: { meta?: unknown } }) =>
+    (column.columnDef.meta as { mobile?: DataTableMobileSlot } | undefined)?.mobile;
+  const rows = table.getRowModel().rows;
+  return (
+    <ul className="divide-y overflow-hidden rounded-xl border bg-card sm:hidden">
+      {rows.map((row) => {
+        const cells = row.getVisibleCells();
+        const pick = (slot: DataTableMobileSlot) =>
+          cells.filter((cell) => slotOf(cell.column) === slot);
+        const select = cells.find((cell) => cell.column.id === "select");
+        return (
+          <li
+            key={row.id}
+            data-state={row.getIsSelected() ? "selected" : undefined}
+            className="flex items-start gap-3 px-4 py-2.5 data-[state=selected]:bg-primary/[0.07] data-[state=selected]:shadow-[inset_3px_0_0_var(--primary)]"
+          >
+            {select && (
+              // ขยายพื้นที่แตะเป็น 44px (ช่องติ๊กจริงเล็ก 16px); แตะส่วนที่เกินช่องก็สลับการเลือก
+              // biome-ignore lint/a11y/useKeyWithClickEvents: คีย์บอร์ดใช้ช่องติ๊กข้างใน
+              // biome-ignore lint/a11y/noStaticElementInteractions: เป็นแค่พื้นที่แตะเสริม
+              <div
+                className="-m-3.5 -mt-3 shrink-0 p-3.5"
+                onClick={(event) => {
+                  if (event.target === event.currentTarget) row.toggleSelected();
+                }}
+              >
+                {flexRender(select.column.columnDef.cell, select.getContext())}
+              </div>
+            )}
+            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+              {SLOT_ORDER.map((slot) => {
+                const found = pick(slot);
+                if (slot === "meta" || found.length === 0) return null;
+                const content = found.map((cell) => (
+                  <span key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </span>
+                ));
+                if (slot === "title") {
+                  const end = pick("end");
+                  return (
+                    <div
+                      key={slot}
+                      className="flex items-baseline justify-between gap-2 font-semibold text-sm"
+                    >
+                      <span className="min-w-0 truncate">{content}</span>
+                      <span className="shrink-0 tabular-nums">
+                        {end.map((cell) => (
+                          <span key={cell.id}>
+                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                          </span>
+                        ))}
+                      </span>
+                    </div>
+                  );
+                }
+                if (slot === "end") return null;
+                if (slot === "sub") {
+                  return (
+                    <div key={slot} className="truncate text-muted-foreground text-sm">
+                      {content}
+                    </div>
+                  );
+                }
+                const meta = pick("meta");
+                return (
+                  <div key={slot} className="flex items-center gap-1.5 text-xs">
+                    {content}
+                    {meta.map((cell) => (
+                      <span key={cell.id} className="text-muted-foreground">
+                        · {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </span>
+                    ))}
+                  </div>
+                );
+              })}
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

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

@@ -5,5 +5,5 @@ export { DataTableFacetedFilter } from "./data-table-faceted-filter";
 export { DataTablePagination } from "./data-table-pagination";
 export { DataTableToolbar } from "./data-table-toolbar";
 export { DataTableViewOptions } from "./data-table-view-option";
-export type { DataTableProps, FacetedFilterConfig } from "./types";
+export type { DataTableMobileSlot, DataTableProps, FacetedFilterConfig } from "./types";
 export { useDataTable } from "./use-data-table";

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

@@ -107,4 +107,23 @@ export interface DataTableProps<TData, TValue> {
   pageSizeOptions?: number[];
   onReorder?: (newData: TData[]) => void;
   renderCustomView?: (table: Table<TData>) => React.ReactNode;
+
+  /**
+   * `default` = เหมือนเดิม · `quiet` = "Calm toolbar, dense rows": ตัวกรองรวมเป็นปุ่มเดียว + ชิปที่ลบได้ในบรรทัดเดียวกับช่องค้นหา,
+   * ตัวนับ "N จาก M รายการ" + สลับความหนาแน่น, หัวตารางเรียบ (ลูกศรเรียงโผล่เมื่อชี้), ช่องเลือก/ปุ่มท้ายแถวโผล่เมื่อชี้,
+   * `StatusBadge` ในตารางเป็นจุดสี, แถวที่เลือกมีแถบสีซ้าย, แถบเลือกหมู่เป็นแคปซูล, เลขหน้าย่อ ·
+   * จอ < sm: ถ้ามีคอลัมน์ที่ใส่ `meta.mobile` จะแสดงเป็นรายการแถวละ 3 บรรทัดแทนตาราง (ดู `DataTableMobileSlot`)
+   */
+  variant?: "default" | "quiet";
+  /** `quiet`: ความหนาแน่นเริ่มต้น (ผู้ใช้สลับได้ที่แถบเครื่องมือ) — ค่าเริ่มต้น comfortable */
+  defaultDensity?: "comfortable" | "compact";
+  /** `quiet`: ปุ่มคำสั่งในแคปซูลเลือกหมู่ (ส่งออก/ลบ …) — ไม่ส่ง = แคปซูลมีแค่จำนวนที่เลือกและปุ่มล้าง */
+  selectionActions?: (table: Table<TData>) => React.ReactNode;
 }
+
+/**
+ * `variant="quiet"` บนจอ < sm: วางที่ `columnDef.meta = { mobile: "title" }` — ชื่อบรรทัดแรกซ้าย · `end` ยอด/ตัวเลข บรรทัดแรกขวา ·
+ * `sub` บรรทัดรอง · `status` บรรทัดสถานะ (ต่อท้ายด้วย `meta`) · `meta` ข้อความเล็กต่อท้ายสถานะ · `hidden` ไม่แสดงบนมือถือ
+ * ไม่ประกาศ slot ใดเลย = แสดงตารางเลื่อนแนวนอนเหมือนเดิม
+ */
+export type DataTableMobileSlot = "title" | "end" | "sub" | "status" | "meta" | "hidden";