@nexub/mcp 5.3.0 → 5.4.0

package/dist/skill/references/components/data-table.md

@@ -23,6 +23,13 @@ Feature-rich data table with sorting and row selection powered by TanStack Table
 | `columnVisibility / onColumnVisibilityChange` | `Record<string, boolean>` |  | Which columns show, keyed by column id (5.3). |
 | `viewOptions` | `boolean` | `false` | A "View" menu above the table for density and column visibility (5.3). |
 | `toolbar` | `ReactNode` |  | Content at the start of the row above the table, e.g. filters (5.3). |
+| `enableColumnResizing` | `boolean` | `false` | Drag a header edge to resize (5.4). The handle is focusable: Arrow keys resize by 16px, double-click resets. |
+| `columnSizing / onColumnSizingChange` | `Record<string, number>` |  | Column widths in px, keyed by column id (5.4). |
+| `enableColumnReordering` | `boolean` | `false` | Drag headers to reorder, or Alt+Arrow on a focused header; the move is announced (5.4). |
+| `columnOrder / onColumnOrderChange` | `string[]` |  | Column ids in display order (5.4). |
+| `columnPinning / onColumnPinningChange` | `{ left?: string[]; right?: string[] }` |  | Columns that stay in view while the rest scroll sideways (5.4). The selection column pins with them. |
+| `maxHeight` | `number \| string` |  | Caps the height: rows scroll and the header sticks (5.4). |
+| `DataTableVirtual` | `import from '@nexub/react/DataTableVirtual'` |  | Same props plus `maxHeight` (required), `estimateRowHeight` and `overscan`: renders only the rows in view, for thousands of rows. Needs `@tanstack/react-virtual` installed (5.4). No pagination. |
 | `pagination.pageSize` | `number` | `20` | Rows per page; pagination is on when `pagination` is set. |
 
 ## Example: Default
@@ -140,3 +147,97 @@ export default function Example() {
   );
 }
 ```
+
+## Example: Resize, reorder and pin
+
+Drag header edges to resize and headers to reorder (or Alt+Arrow). Invoice stays pinned while the rest scroll; the header sticks within `maxHeight`.
+
+```tsx
+'use client';
+
+import { DataTable, type DataTableColumn } from '@nexub/react';
+
+interface Invoice {
+  id: string;
+  customer: string;
+  region: string;
+  owner: string;
+  status: string;
+  amount: number;
+}
+
+const invoices: Invoice[] = Array.from({ length: 30 }, (_, i) => ({
+  id: `INV-${2041 + i}`,
+  customer: ['Acme', 'Globex', 'Initech', 'Umbrella', 'Hooli'][i % 5]!,
+  region: ['EMEA', 'APAC', 'Americas'][i % 3]!,
+  owner: ['Ana', 'Ben', 'Chen', 'Dev'][i % 4]!,
+  status: ['Paid', 'Overdue', 'Draft'][i % 3]!,
+  amount: 400 + ((i * 137) % 2000),
+}));
+
+const columns: DataTableColumn<Invoice>[] = [
+  { accessorKey: 'id', header: 'Invoice', size: 120 },
+  { accessorKey: 'customer', header: 'Customer', size: 160 },
+  { accessorKey: 'region', header: 'Region', size: 140 },
+  { accessorKey: 'owner', header: 'Owner', size: 140 },
+  { accessorKey: 'status', header: 'Status', size: 140 },
+  { accessorKey: 'amount', header: 'Amount', size: 120, meta: { align: 'end' } },
+];
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-[640px]">
+      <DataTable
+        caption="Invoices"
+        captionHidden
+        columns={columns}
+        data={invoices}
+        enableColumnResizing
+        enableColumnReordering
+        columnPinning={{ left: ['id'] }}
+        maxHeight={320}
+      />
+    </div>
+  );
+}
+```
+
+## Example: 10,000 rows (DataTableVirtual)
+
+`import { DataTableVirtual } from '@nexub/react/DataTableVirtual'` and install `@tanstack/react-virtual`. Only the rows in view are rendered.
+
+```tsx
+'use client';
+
+import type { DataTableColumn } from '@nexub/react';
+import { DataTableVirtual } from '@nexub/react/DataTableVirtual';
+
+interface Event {
+  id: number;
+  name: string;
+  user: string;
+  at: string;
+}
+
+const events: Event[] = Array.from({ length: 10_000 }, (_, i) => ({
+  id: i + 1,
+  name: ['sign_in', 'export', 'invite', 'upgrade'][i % 4]!,
+  user: `user${(i * 7919) % 997}@example.com`,
+  at: new Date(Date.UTC(2026, 10, 1) + i * 60_000).toISOString().slice(0, 16).replace('T', ' '),
+}));
+
+const columns: DataTableColumn<Event>[] = [
+  { accessorKey: 'id', header: '#', meta: { align: 'end' } },
+  { accessorKey: 'name', header: 'Event' },
+  { accessorKey: 'user', header: 'User' },
+  { accessorKey: 'at', header: 'Time (UTC)' },
+];
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-[640px]">
+      <DataTableVirtual caption="Audit log" captionHidden columns={columns} data={events} maxHeight={360} enableSorting />
+    </div>
+  );
+}
+```

package/dist/skill/references/components.md

@@ -1,6 +1,6 @@
 # Component index
 
-Nexub DS v5.3.0. Open `components/<slug>.md` for props, examples and accessibility notes.
+Nexub DS v5.4.0. Open `components/<slug>.md` for props, examples and accessibility notes.
 Never use a component marked deprecated.
 
 ## Components — Actions
@@ -225,5 +225,5 @@ Never use a component marked deprecated.
 
 These exist; read their TypeScript props in `node_modules/<package>/dist/index.d.ts`.
 
-- `@nexub/react`: AgentKit, AppShell, AspectRatio, Chart, CheckList, Code, CommandPalette, Container, ContextMenu, CountryBadge, DropdownMenu, FileUpload, Flag, FormError, KeyboardShortcut, Logo, Menubar, Motion, NavigationMenu, NexubProvider, PageHeader, Section, Sidebar, ThemeProvider, Toolbar, TopNav, VisuallyHidden
+- `@nexub/react`: AgentKit, AppShell, AspectRatio, Chart, CheckList, Code, CommandPalette, Container, ContextMenu, CountryBadge, DataTableVirtual, DropdownMenu, FileUpload, Flag, FormError, KeyboardShortcut, Logo, Menubar, Motion, NavigationMenu, NexubProvider, PageHeader, Section, Sidebar, ThemeProvider, Toolbar, TopNav, VisuallyHidden
 - `@nexub/patterns`: ActivityPage, AppHeader, AppLauncher, ChatPage, CheckoutPage, DashboardPage, PageFrame, PaywallPage, SettingsLayout, SettingsPage, SignInPage, TransactionDetailPage

package/dist/skill/references/tokens.md

@@ -1,6 +1,6 @@
 # Tokens
 
-Nexub DS v5.3.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
+Nexub DS v5.4.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
 The Tailwind preset (`@nexub/tokens/tailwind`) maps them to utilities. Never hardcode a hex, px spacing or shadow that a token covers.
 
 ## Color roles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/mcp",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "MCP server for Nexub Design System: gives Claude, Cursor and any MCP client the components, patterns, tokens and design rules of the installed release.",
   "type": "module",
   "license": "MIT",