@suphark/ui 0.59.1 → 0.61.0

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { SelectionBar } from "@suphark/ui/components/shared/selection-bar";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
@@ -14,6 +15,7 @@ import { cn } from "@suphark/ui/lib/utils";
 import { flexRender } from "@tanstack/react-table";
 import * as React from "react";
 import { DataTablePagination } from "./data-table-pagination";
+import { DataTableEmptyState, DataTableErrorState, QuietMobileSkeleton } from "./data-table-states";
 import { DataTableToolbar } from "./data-table-toolbar";
 import type { DataTableMobileSlot, DataTableProps } from "./types";
 import { useDataTable } from "./use-data-table";
@@ -84,10 +86,30 @@ export function DataTable<TData, TValue>({
   variant = "default",
   defaultDensity = "comfortable",
   selectionActions,
+  densityStorageKey,
+  resourceName,
+  emptyAction,
+  error,
+  onRetry,
 }: DataTableProps<TData, TValue>) {
   const text = useUiText();
   const quiet = variant === "quiet";
-  const [density, setDensity] = React.useState<"comfortable" | "compact">(defaultDensity);
+  const [density, setDensityState] = React.useState<"comfortable" | "compact">(defaultDensity);
+  // จำความหนาแน่น: อ่านหลัง mount (กัน hydration mismatch) — localStorage ใช้ไม่ได้ก็ข้าม
+  React.useEffect(() => {
+    if (!densityStorageKey) return;
+    try {
+      const saved = localStorage.getItem(densityStorageKey);
+      if (saved === "compact" || saved === "comfortable") setDensityState(saved);
+    } catch {}
+  }, [densityStorageKey]);
+  const setDensity = (next: "comfortable" | "compact") => {
+    setDensityState(next);
+    if (!densityStorageKey) return;
+    try {
+      localStorage.setItem(densityStorageKey, next);
+    } catch {}
+  };
   const { table } = useDataTable({
     columns,
     data,
@@ -176,7 +198,13 @@ export function DataTable<TData, TValue>({
         ))}
       </TableHeader>
       <TableBody>
-        {isLoading ? (
+        {error ? (
+          <TableRow>
+            <TableCell colSpan={table.getVisibleLeafColumns().length}>
+              <DataTableErrorState onRetry={onRetry} />
+            </TableCell>
+          </TableRow>
+        ) : isLoading ? (
           Array.from({ length: initialPageSize }).map((_, i) => (
             // biome-ignore lint/suspicious/noArrayIndexKey: แถว skeleton ไม่มีตัวตน ใช้ตำแหน่งเป็น key ได้
             <TableRow key={i}>
@@ -229,7 +257,17 @@ export function DataTable<TData, TValue>({
         ) : (
           <TableRow>
             <TableCell colSpan={table.getVisibleLeafColumns().length} className="h-24 text-center">
-              {emptyStateComponent || (text.table?.noResults ?? "ไม่พบข้อมูล")}
+              {emptyStateComponent ||
+                (quiet ? (
+                  <DataTableEmptyState
+                    table={table}
+                    preservedFilterIds={preservedFilterIds}
+                    resourceName={resourceName}
+                    emptyAction={emptyAction}
+                  />
+                ) : (
+                  (text.table?.noResults ?? "ไม่พบข้อมูล")
+                ))}
             </TableCell>
           </TableRow>
         )}
@@ -241,8 +279,10 @@ export function DataTable<TData, TValue>({
     .getAllLeafColumns()
     .some((column) => (column.columnDef.meta as { mobile?: string } | undefined)?.mobile);
   const mobileList =
-    quiet && hasMobileSlots && !isLoading && table.getRowModel().rows.length > 0 ? (
+    quiet && hasMobileSlots && !isLoading && !error && table.getRowModel().rows.length > 0 ? (
       <QuietMobileList table={table} />
+    ) : quiet && hasMobileSlots && isLoading && !error ? (
+      <QuietMobileSkeleton rows={initialPageSize} />
     ) : null;
 
   const customView = renderCustomView?.(table);
@@ -263,6 +303,7 @@ export function DataTable<TData, TValue>({
           variant={variant}
           density={density}
           onDensityChange={setDensity}
+          isLoading={isLoading}
         />
       )}
       {customView ? (
@@ -304,7 +345,7 @@ export function DataTable<TData, TValue>({
               renderTable(false)
             )}
           </div>
-          {showPagination && (
+          {showPagination && !error && (
             <div
               className={
                 stickyPagination
@@ -327,6 +368,7 @@ export function DataTable<TData, TValue>({
         table.getFilteredSelectedRowModel().rows.length > 0 && (
           <SelectionBar
             variant="pill"
+            label={text.table?.selectedPill ?? "{count} รายการ"}
             count={table.getFilteredSelectedRowModel().rows.length}
             onClear={() => table.resetRowSelection()}
           >
@@ -356,92 +398,233 @@ const QUIET_TABLE = [
 
 const SLOT_ORDER: DataTableMobileSlot[] = ["title", "end", "sub", "status", "meta"];
 
-/** `variant="quiet"` บนมือถือ: รายการแถวละ 3 บรรทัดจากคอลัมน์ที่ใส่ `meta.mobile` */
+const LONG_PRESS_MS = 500;
+const HINT_KEY = "ui:data-table:long-press-hint";
+
+/** กดค้าง (≥ 500 ms โดยไม่ขยับเกิน 8 px) → เรียก `onLongPress`; `fired` บอกว่า click ถัดไปคือแรงที่ตามหลังการกดค้าง */
+function useLongPress(onLongPress: () => void, enabled: boolean) {
+  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const origin = React.useRef<{ x: number; y: number } | null>(null);
+  const fired = React.useRef(false);
+  const cancel = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+  React.useEffect(() => cancel, []);
+  const handlers = {
+    onPointerDown: (event: React.PointerEvent) => {
+      // ล้างธงของการกดค้างรอบก่อนทุกครั้งที่เริ่มแตะใหม่ (แม้ปิดการกดค้างอยู่)
+      fired.current = false;
+      cancel();
+      if (!enabled) return;
+      origin.current = { x: event.clientX, y: event.clientY };
+      timer.current = setTimeout(() => {
+        timer.current = null;
+        fired.current = true;
+        onLongPress();
+      }, LONG_PRESS_MS);
+    },
+    onPointerMove: (event: React.PointerEvent) => {
+      const start = origin.current;
+      if (start && Math.hypot(event.clientX - start.x, event.clientY - start.y) > 8) cancel();
+    },
+    onPointerUp: cancel,
+    onPointerCancel: cancel,
+    onPointerLeave: cancel,
+    // เมนูบริบทของเบราว์เซอร์มือถือเด้งตอนกดค้าง — กันไว้เฉพาะช่วงที่เพิ่งกดค้างสำเร็จ
+    onContextMenu: (event: React.MouseEvent) => {
+      if (fired.current) event.preventDefault();
+    },
+  };
+  return { fired, handlers };
+}
+
+/**
+ * `variant="quiet"` บนมือถือ: รายการแถวละ 3 บรรทัดจากคอลัมน์ที่ใส่ `meta.mobile`
+ * ช่องเลือก (คอลัมน์ `select`) ซ่อนจากสายตาจนกว่าจะเลือก — กดค้างที่แถวเพื่อเข้าโหมดเลือกหมู่,
+ * แตะแถวเพื่อสลับ · คีย์บอร์ด/โปรแกรมอ่านจอยังเข้าถึงช่องเลือกได้ตลอด
+ */
 function QuietMobileList<TData>({
   table,
 }: {
   table: import("@tanstack/react-table").Table<TData>;
 }) {
+  const text = useUiText();
   const slotOf = (column: { columnDef: { meta?: unknown } }) =>
     (column.columnDef.meta as { mobile?: DataTableMobileSlot } | undefined)?.mobile;
   const rows = table.getRowModel().rows;
+  const selectedCount = table.getFilteredSelectedRowModel().rows.length;
+  const selecting = selectedCount > 0;
+  const hasSelect = table.getAllLeafColumns().some((column) => column.id === "select");
+
+  // บรรทัดบอกใบ้: แสดงครั้งแรกครั้งเดียว (หายเองใน 6 วินาที หรือเมื่อกดค้างสำเร็จ) แล้วจำไว้
+  const [hint, setHint] = React.useState(false);
+  const markHintSeen = React.useCallback(() => {
+    setHint(false);
+    try {
+      localStorage.setItem(HINT_KEY, "1");
+    } catch {}
+  }, []);
+  React.useEffect(() => {
+    if (!hasSelect) return;
+    try {
+      if (localStorage.getItem(HINT_KEY)) return;
+    } catch {}
+    setHint(true);
+    const id = setTimeout(markHintSeen, 6000);
+    return () => clearTimeout(id);
+  }, [hasSelect, markHintSeen]);
+
   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)]"
+    <div className="flex flex-col gap-2 sm:hidden">
+      {selecting && (
+        <div
+          role="status"
+          aria-live="polite"
+          className="flex h-11 items-center justify-between px-1 text-sm"
+        >
+          <span className="font-semibold">
+            {(text.table?.selectedCount ?? "เลือก {count} รายการ").replace(
+              "{count}",
+              String(selectedCount),
+            )}
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-primary pointer-coarse:h-11"
+            onClick={() => table.toggleAllPageRowsSelected(true)}
           >
-            {select && (
-              // ขยายพื้นที่แตะเป็น 44px (ช่องติ๊กจริงเล็ก 16px); แตะส่วนที่เกินช่องก็สลับการเลือก
-              // biome-ignore lint/a11y/useKeyWithClickEvents: คีย์บอร์ดใช้ช่องติ๊กข้างใน
-              // biome-ignore lint/a11y/noStaticElementInteractions: เป็นแค่พื้นที่แตะเสริม
+            {text.table?.selectAll ?? "เลือกทั้งหมด"}
+          </Button>
+        </div>
+      )}
+      <ul className="divide-y overflow-hidden rounded-xl border bg-card">
+        {rows.map((row) => (
+          <QuietMobileRow
+            key={row.id}
+            row={row}
+            selecting={selecting}
+            canLongPress={hasSelect && row.getCanSelect()}
+            slotOf={slotOf}
+            onLongPress={() => {
+              row.toggleSelected(true);
+              markHintSeen();
+              try {
+                navigator.vibrate?.(10);
+              } catch {}
+            }}
+          />
+        ))}
+      </ul>
+      {!selecting && hint && (
+        <p className="text-center text-muted-foreground text-xs">
+          {text.table?.longPressHint ?? "กดค้างที่แถวเพื่อเลือกหมู่"}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function QuietMobileRow<TData>({
+  row,
+  selecting,
+  canLongPress,
+  slotOf,
+  onLongPress,
+}: {
+  row: import("@tanstack/react-table").Row<TData>;
+  selecting: boolean;
+  canLongPress: boolean;
+  slotOf: (column: { columnDef: { meta?: unknown } }) => DataTableMobileSlot | undefined;
+  onLongPress: () => void;
+}) {
+  const { fired, handlers } = useLongPress(onLongPress, canLongPress && !selecting);
+  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
+      data-state={row.getIsSelected() ? "selected" : undefined}
+      {...handlers}
+      onClick={(event) => {
+        // click ที่ตามหลังการกดค้างสำเร็จ ไม่นับเป็นการแตะ (ไม่งั้นเลือกแล้วถูกยกเลิกทันที)
+        if (fired.current) {
+          fired.current = false;
+          return;
+        }
+        if (!selecting || !canLongPress) return;
+        if ((event.target as HTMLElement).closest("a,button,input,[role=checkbox]")) return;
+        row.toggleSelected();
+      }}
+      className={cn(
+        "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)]",
+        selecting && "cursor-pointer",
+      )}
+    >
+      {select && (
+        // ขยายพื้นที่แตะเป็น 44px (ช่องติ๊กจริงเล็ก 16px); แตะส่วนที่เกินช่องก็สลับการเลือก
+        // ยังไม่เลือก = ซ่อนจากสายตาแต่ยังโฟกัสด้วยคีย์บอร์ดได้ (sr-only + แสดงตอนโฟกัส)
+        // biome-ignore lint/a11y/useKeyWithClickEvents: คีย์บอร์ดใช้ช่องติ๊กข้างใน
+        // biome-ignore lint/a11y/noStaticElementInteractions: เป็นแค่พื้นที่แตะเสริม
+        <div
+          className={cn(
+            "-m-3.5 -mt-3 shrink-0 p-3.5",
+            !selecting && "sr-only focus-within:not-sr-only",
+          )}
+          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
-                className="-m-3.5 -mt-3 shrink-0 p-3.5"
-                onClick={(event) => {
-                  if (event.target === event.currentTarget) row.toggleSelected();
-                }}
+                key={slot}
+                className="flex items-baseline justify-between gap-2 font-semibold text-sm"
               >
-                {flexRender(select.column.columnDef.cell, select.getContext())}
+                <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>
-            )}
-            <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>
-                );
-              })}
+            );
+          }
+          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>
-          </li>
-        );
-      })}
-    </ul>
+          );
+        })}
+      </div>
+    </li>
   );
 }

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

@@ -117,6 +117,19 @@ export interface DataTableProps<TData, TValue> {
   variant?: "default" | "quiet";
   /** `quiet`: ความหนาแน่นเริ่มต้น (ผู้ใช้สลับได้ที่แถบเครื่องมือ) — ค่าเริ่มต้น comfortable */
   defaultDensity?: "comfortable" | "compact";
+  /**
+   * `quiet`: จำความหนาแน่นที่ผู้ใช้เลือกไว้ใน localStorage ด้วยคีย์นี้ (เช่น `"po-table-density"`) —
+   * ไม่ส่ง = ไม่จำ (กลับเป็น `defaultDensity` ทุกครั้ง) · localStorage ใช้ไม่ได้ก็ทำงานต่อโดยไม่จำ
+   */
+  densityStorageKey?: string;
+  /** ชื่อชนิดข้อมูลสำหรับสถานะว่าง เช่น "ใบสั่งซื้อ" → "ยังไม่มีใบสั่งซื้อ" (`quiet`) */
+  resourceName?: string;
+  /** `quiet`: ปุ่ม/ลิงก์ในสถานะ "ว่างจริง" (ไม่มีข้อมูลและไม่มีตัวกรอง) เช่น ปุ่ม "สร้างใบสั่งซื้อ" — ไม่ส่ง = ไม่มีปุ่ม */
+  emptyAction?: React.ReactNode;
+  /** โหลดไม่สำเร็จ: แสดงสถานะผิดพลาดแทนตาราง (ทั้งสอง variant) — ข้อความกลาง ๆ ไม่แสดง error ดิบ */
+  error?: boolean;
+  /** ปุ่ม "ลองใหม่" ของสถานะผิดพลาด — ไม่ส่ง = ไม่มีปุ่ม */
+  onRetry?: () => void;
   /** `quiet`: ปุ่มคำสั่งในแคปซูลเลือกหมู่ (ส่งออก/ลบ …) — ไม่ส่ง = แคปซูลมีแค่จำนวนที่เลือกและปุ่มล้าง */
   selectionActions?: (table: Table<TData>) => React.ReactNode;
 }

package/src/components/shared/selection-bar.tsx

@@ -67,12 +67,20 @@ export function SelectionBar({
           ? "h-11 rounded-full bg-primary py-0 ps-4 pe-2 text-primary-foreground"
           : "rounded-xl border bg-card",
         variant !== "inline" &&
-          "-translate-x-1/2 fixed bottom-[calc(1rem+env(safe-area-inset-bottom))] left-1/2 z-40 max-w-[calc(100vw-2rem)]",
+          "-translate-x-1/2 fixed bottom-[calc(1rem+env(safe-area-inset-bottom))] left-1/2 z-40 w-max max-w-[calc(100vw-2rem)]",
         className,
       )}
     >
       <span className="shrink-0 font-medium text-sm tabular-nums">{message}</span>
-      <div className="flex min-w-0 flex-wrap items-center gap-1.5">
+      <div
+        className={cn(
+          "flex min-w-0 items-center gap-1.5",
+          // pill: บรรทัดเดียวเสมอ ปุ่มไม่ตัดคำ และปุ่มที่แอปส่งมาใช้สีตัวอักษรบนพื้นสีหลัก
+          pill
+            ? "[&_button]:whitespace-nowrap [&_button]:text-primary-foreground [&_button]:hover:bg-primary-foreground/15 pointer-coarse:[&_button]:h-11"
+            : "flex-wrap",
+        )}
+      >
         {actions?.map((action) => (
           <Button
             key={action.label}
@@ -98,6 +106,7 @@ export function SelectionBar({
         onClick={onClear}
         className={cn(
           "ml-auto shrink-0",
+          pill && "pointer-coarse:h-11 pointer-coarse:w-11",
           pill && "rounded-full hover:bg-primary-foreground/15 hover:text-primary-foreground",
         )}
       >

package/src/components/shared/ui-text.tsx

@@ -85,6 +85,27 @@ export interface UiText {
     rangeOf: string;
     shownOf: string;
     density: string;
+    /** `variant="quiet"` มือถือ — `{count}` */
+    selectedCount: string;
+    /** สถานะตาราง: `emptyTitleOf` ใช้ `{resource}`, `noMatchQuery` ใช้ `{query}` */
+    loading: string;
+    emptyTitle: string;
+    emptyTitleOf: string;
+    emptyHint: string;
+    noMatch: string;
+    noMatchQuery: string;
+    noMatchHint: string;
+    clearAllFilters: string;
+    clearQuery: string;
+    errorTitle: string;
+    errorHint: string;
+    retry: string;
+    /** ข้อความในแคปซูลเลือกหมู่ (สั้นกว่า `selectedCount` เพราะหัวรายการมือถือบอก "เลือก N รายการ" อยู่แล้ว) */
+    selectedPill: string;
+    selectAll: string;
+    longPressHint: string;
+    clearFilters: string;
+    showResults: string;
     rowsSelected: string;
     noResults: string;
     deleteTitle: string;
@@ -323,6 +344,24 @@ export const UI_TEXT_TH: UiText = {
     rangeOf: "{from}–{to} จาก {total}",
     shownOf: "{shown} จาก {total} รายการ",
     density: "ความหนาแน่นของแถว",
+    selectedCount: "เลือก {count} รายการ",
+    loading: "กำลังโหลด…",
+    emptyTitle: "ยังไม่มีรายการ",
+    emptyTitleOf: "ยังไม่มี{resource}",
+    emptyHint: "เมื่อสร้างแล้วจะแสดงที่นี่",
+    noMatch: "ไม่พบรายการที่ตรงกัน",
+    noMatchQuery: 'ไม่พบรายการที่ตรงกับ "{query}"',
+    noMatchHint: "ลองคำค้นอื่น หรือเอาตัวกรองออกบางตัว",
+    clearAllFilters: "ล้างตัวกรองทั้งหมด",
+    clearQuery: "ล้างคำค้น",
+    errorTitle: "โหลดรายการไม่สำเร็จ",
+    errorHint: "การเชื่อมต่อขัดข้อง ลองใหม่อีกครั้ง",
+    retry: "ลองใหม่",
+    selectedPill: "{count} รายการ",
+    selectAll: "เลือกทั้งหมด",
+    longPressHint: "กดค้างที่แถวเพื่อเลือกหมู่",
+    clearFilters: "ล้าง",
+    showResults: "ดู {count} รายการ",
     rowsSelected: "เลือก {selected} จาก {total} แถว",
     noResults: "ไม่พบข้อมูล",
     deleteTitle: "ยืนยันการลบ",
@@ -540,6 +579,24 @@ export const UI_TEXT_EN: UiText = {
     rangeOf: "{from}–{to} of {total}",
     shownOf: "{shown} of {total} items",
     density: "Row density",
+    selectedCount: "{count} selected",
+    loading: "Loading…",
+    emptyTitle: "Nothing here yet",
+    emptyTitleOf: "No {resource} yet",
+    emptyHint: "Items will show up here once created.",
+    noMatch: "No matching items",
+    noMatchQuery: 'No items match "{query}"',
+    noMatchHint: "Try another search, or remove some filters.",
+    clearAllFilters: "Clear all filters",
+    clearQuery: "Clear search",
+    errorTitle: "Couldn't load the list",
+    errorHint: "The connection dropped. Try again.",
+    retry: "Try again",
+    selectedPill: "{count} items",
+    selectAll: "Select all",
+    longPressHint: "Press and hold a row to select several",
+    clearFilters: "Clear",
+    showResults: "Show {count} items",
     rowsSelected: "{selected} of {total} row(s) selected",
     noResults: "No results",
     deleteTitle: "Are you sure?",