@viliha/vui-ui 1.8.0 → 1.9.0

package/AGENT.md

@@ -334,6 +334,8 @@ Build forms with VUI and shadcn/ui together, reaching for shadcn Form, React Hoo
 
 Never hand-build an HTML table; always use `RecordView`. Configure columns through its field props (`editable`, `required`, `copyable`, `options`, `render`), and let `RecordView` own the rest: sorting, filtering, pagination, bulk actions, and import/export.
 
+Sorting follows column visibility by default; use `sortable` to decouple them — `sortable: true` sorts a field with no column (e.g. a `hideInTable` name shown via `getPrimary`), `sortable: false` locks a visible column. Set the flag; don't rewire the Sort dropdown or headers.
+
 ## Filtering
 
 The Filter panel is a single keyword box by default (built in, matches all fields). For a labeled control per field, set `filterable` on the relevant fields and never hand-roll a filter form: `filterable: true` (text) or `filterable: { control, label, placeholder, options }` where `control` is `"text" | "number" | "date" | "select" | "combobox" | "checkbox"`. When any field is filterable the panel shows a control per field plus Search / Clear. It only **collects** values — handle `onFilter(values)` on `RecordView` to run a query or client filter (Search and Clear both call it). Types: `FilterControl`, `FieldFilter`, `FilterValues<T>`. Need a control kind that isn't listed? Extend the `FilterControl` union in the component.

package/CHANGELOG.md

@@ -7,6 +7,25 @@ backward-compatible features, **major** for breaking changes.
 
 To upgrade, see [Upgrading](./AGENT.md#upgrading) in the agent guide.
 
+## 1.9.0 — 2026-07-26
+
+### Added
+
+- **`sortable` field flag in `RecordView`** — decouples sorting from column
+  visibility. By default a field is sortable iff it's a visible column
+  (`!hideInTable`), unchanged. Now:
+  - `sortable: true` sorts a field with **no column** (e.g. a `hideInTable` name
+    shown via `getPrimary`) — it appears in the Sort dropdown.
+  - `sortable: false` keeps a **visible column unsortable** (its header stops
+    being a sort toggle).
+
+  Affects both the Sort dropdown and the column-header click. Fully backward
+  compatible — omit the flag for today's behavior.
+
+  **For agents:** to make a non-column field sortable (or lock a column), set
+  `sortable` on the `RecordField`; don't rewire the Sort dropdown or headers.
+  Demo: `system/regions` sorts by Name (which has no column).
+
 ## 1.8.0 — 2026-07-26
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viliha/vui-ui",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Vui UI — a clean, token-driven React admin/CRM component library built on Tailwind CSS v4, shadcn-style patterns, and Radix Icons. Ships as TypeScript source (Just-in-Time), compiled by the consuming app.",
   "license": "MIT",
   "author": "Suman Bonakurthi",

package/src/record-view.tsx

@@ -226,6 +226,12 @@ export interface RecordField<T> {
   copyable?: boolean;
   /** Show in the detail panel only, not as a table column (e.g. first/last name). */
   hideInTable?: boolean;
+  /** Whether this field can be sorted — decoupled from column visibility.
+   *  Default: sortable iff it's a visible column (`!hideInTable`), the historic
+   *  behavior. Set `true` to sort a field with no column (e.g. a `hideInTable`
+   *  name shown via `getPrimary`); set `false` to keep a visible column
+   *  unsortable. Controls both the Sort dropdown and the column-header toggle. */
+  sortable?: boolean;
   /** Custom, non-editable cell/value renderer. */
   render?: (row: T) => React.ReactNode;
   /** If set, the field becomes a choice field: the Add/Edit form renders a
@@ -460,6 +466,12 @@ export function RecordView<T extends { id: RowId }>({
 
   const tableFields = fields.filter((f) => !f.hideInTable);
   const visibleFields = tableFields.filter((f) => !hidden.has(f.key));
+  // Sorting is decoupled from column visibility: a field is sortable when its
+  // `sortable` flag says so, else it falls back to "is a visible column".
+  const canSort = (f: RecordField<T>) => f.sortable ?? !f.hideInTable;
+  // Fields offered in the Sort dropdown (may include hidden-but-sortable fields
+  // and exclude visible-but-unsortable ones).
+  const sortFields = fields.filter(canSort);
   // Fields opted into per-field filtering. Non-empty → the Filter panel renders
   // a control per field instead of the single keyword box.
   const filterFields = fields.filter((f) => f.filterable);
@@ -1182,7 +1194,7 @@ export function RecordView<T extends { id: RowId }>({
 
           <Dropdown label="Sort" icon={<ArrowUpDown className="size-3.5 text-blue-500" />}>
             <DropdownLabel>Sort by</DropdownLabel>
-            {tableFields.map((f) => (
+            {sortFields.map((f) => (
               <DropdownItem
                 key={f.key}
                 onSelect={() => toggleSort(f.key)}
@@ -1300,32 +1312,44 @@ export function RecordView<T extends { id: RowId }>({
               </TableHead>
               {visibleFields.map((f) => {
                 const HeadIcon = f.icon ?? DEFAULT_FIELD_ICON;
+                const sortable = canSort(f);
+                const headInner = (
+                  <>
+                    <HeadIcon className="size-3.5 shrink-0 text-foreground" />
+                    <span className="flex items-center gap-1 whitespace-nowrap">
+                      {f.label}
+                      {f.required && <RequiredMark />}
+                    </span>
+                    {sort?.key === f.key &&
+                      (sort.dir === "asc" ? (
+                        <ArrowUp className="size-3 shrink-0" />
+                      ) : (
+                        <ArrowDown className="size-3 shrink-0" />
+                      ))}
+                  </>
+                );
+                const headClass = cn(
+                  "flex h-8 w-full items-center gap-1.5 whitespace-nowrap",
+                  ALIGN_BOX[alignOf(f.key)],
+                );
                 return (
                   <TableHead
                     key={f.key}
                     className="relative w-max"
                     style={{ width: colWidths[f.key] }}
                   >
-                    <button
-                      type="button"
-                      onClick={() => toggleSort(f.key)}
-                      className={cn(
-                        "flex h-8 w-full items-center gap-1.5 whitespace-nowrap hover:text-foreground",
-                        ALIGN_BOX[alignOf(f.key)],
-                      )}
-                    >
-                      <HeadIcon className="size-3.5 shrink-0 text-foreground" />
-                      <span className="flex items-center gap-1 whitespace-nowrap">
-                        {f.label}
-                        {f.required && <RequiredMark />}
-                      </span>
-                      {sort?.key === f.key &&
-                        (sort.dir === "asc" ? (
-                          <ArrowUp className="size-3 shrink-0" />
-                        ) : (
-                          <ArrowDown className="size-3 shrink-0" />
-                        ))}
-                    </button>
+                    {sortable ? (
+                      <button
+                        type="button"
+                        onClick={() => toggleSort(f.key)}
+                        className={cn(headClass, "hover:text-foreground")}
+                      >
+                        {headInner}
+                      </button>
+                    ) : (
+                      // Not sortable: a static label, no toggle / hover affordance.
+                      <span className={headClass}>{headInner}</span>
+                    )}
                     {resizeHandle(f.key, f.label)}
                   </TableHead>
                 );

package/template/app/(app)/system/regions/regions-table.tsx

@@ -21,6 +21,9 @@ const fields: RecordField<Region>[] = [
     required: true,
     group: "General",
     hideInTable: true,
+    // No Name column (shown in the identity cell via getPrimary), but still
+    // sortable from the Sort dropdown — `sortable` decouples it from visibility.
+    sortable: true,
     filterable: true,
   },
   {