next-data-kit 1.0.1 → 3.0.0

package/README.md

@@ -4,14 +4,14 @@ A powerful table utility for server-side pagination, filtering, and sorting with
 
 ## Features
 
--    🚀 **Server-side pagination** - Efficient data fetching with page-based navigation
--    🔍 **Flexible filtering** - Support for regex, exact match, and custom filters
--    📊 **Multi-column sorting** - Sort by multiple columns with customizable order
--    ⚛️ **React hooks** - `useDataKit`, `useSelection`, `usePagination` for state management
--    🎨 **Components** - `DataKitTable` for tables, `DataKit` for custom layouts
--    📝 **TypeScript** - Fully typed with generics support
--    🔌 **Framework agnostic** - Works with any database ORM/ODM (Mongoose, Prisma, etc.)
--    📦 **Tree-shakeable** - Import only what you need
+- 🚀 **Server-side pagination** - Efficient data fetching with page-based navigation
+- 🔍 **Flexible filtering** - Support for regex, exact match, and custom filters
+- 📊 **Multi-column sorting** - Sort by multiple columns with customizable order
+- ⚛️ **React hooks** - `useDataKit`, `useSelection`, `usePagination` for state management
+- 🎨 **Components** - `DataKitTable` for tables, `DataKit` for custom layouts
+- 📝 **TypeScript** - Fully typed with generics support
+- 🔌 **Framework agnostic** - Works with any database ORM/ODM (Mongoose, Prisma, etc.)
+- 📦 **Tree-shakeable** - Import only what you need
 
 ## Installation
 
@@ -28,17 +28,17 @@ pnpm add next-data-kit
 ### Server-side (Next.js Server Action)
 
 ```typescript
-"use server";
+'use server';
 
-import { dataKitServerAction, createSearchFilter } from "next-data-kit/server";
-import type { TDataKitInput } from "next-data-kit/types";
-import UserModel from "@/models/User";
+import { dataKitServerAction, createSearchFilter } from 'next-data-kit/server';
+import type { TDataKitInput } from 'next-data-kit/types';
+import UserModel from '@/models/User';
 
 export async function fetchUsers(input: TDataKitInput) {
 	return dataKitServerAction({
 		model: UserModel,
 		input,
-		item: async (user) => ({
+		item: async user => ({
 			id: user._id.toString(),
 			name: user.name,
 			email: user.email,
@@ -47,36 +47,41 @@ export async function fetchUsers(input: TDataKitInput) {
 			active: true,
 		}),
 		filterCustom: {
-			search: createSearchFilter(["name", "email"]),
-            age: (value) => ({
-                age: {
-                    $gte: value,
-                }
-            })
+			search: createSearchFilter(['name', 'email']),
+			age: value => ({
+				age: {
+					$gte: value,
+				},
+			}),
 		},
+		// Only 'search' and 'age' filters are allowed (auto-extracted from filterCustom keys)
 	});
 }
 ```
 
-
 ### Input Validation (Optional)
 
 You can use the built-in Zod schema to validate inputs before processing:
 
 ```typescript
-"use server";
+'use server';
 
-import { dataKitServerAction, dataKitSchemaZod } from "next-data-kit/server";
+import { dataKitServerAction, dataKitSchemaZod } from 'next-data-kit/server';
 
 export async function fetchUsers(input: unknown) {
-    // Validate input
-    const parsedInput = dataKitSchemaZod.parse(input);
-
-    return dataKitServerAction({
-        model: UserModel,
-        input: parsedInput,
-        // ...
-    });
+	// Validate input
+	const parsedInput = dataKitSchemaZod.parse(input);
+
+	return dataKitServerAction({
+		model: UserModel,
+		input: parsedInput,
+		item: user => ({ id: user._id.toString(), name: user.name }),
+		filterCustom: {
+			search: value => ({ name: { $regex: value, $options: 'i' } }),
+			role: value => ({ role: value }),
+		},
+		// Only 'search' and 'role' filters are allowed
+	});
 }
 ```
 
@@ -85,10 +90,10 @@ export async function fetchUsers(input: unknown) {
 Ready-to-use table with built-in filtering, sorting, and selection:
 
 ```tsx
-"use client";
+'use client';
 
-import { DataKitTable } from "next-data-kit/client";
-import { fetchUsers } from "@/actions/users";
+import { DataKitTable } from 'next-data-kit/client';
+import { fetchUsers } from '@/actions/users';
 
 export function UsersTable() {
 	return (
@@ -96,14 +101,14 @@ export function UsersTable() {
 			action={fetchUsers}
 			limit={{ default: 10 }}
 			filters={[
-				{ id: "search", label: "Search", type: "TEXT", placeholder: "Search..." },
+				{ id: 'search', label: 'Search', type: 'TEXT', placeholder: 'Search...' },
 				{
-					id: "role",
-					label: "Role",
-					type: "SELECT",
+					id: 'role',
+					label: 'Role',
+					type: 'SELECT',
 					dataset: [
-						{ id: "admin", name: "admin", label: "Admin" },
-						{ id: "user", name: "user", label: "User" },
+						{ id: 'admin', name: 'admin', label: 'Admin' },
+						{ id: 'user', name: 'user', label: 'User' },
 					],
 				},
 			]}
@@ -111,9 +116,9 @@ export function UsersTable() {
 				enabled: true,
 				actions: {
 					delete: {
-						name: "Delete Selected",
-						function: async (items) => {
-							await deleteUsers(items.map((i) => i.id));
+						name: 'Delete Selected',
+						function: async items => {
+							await deleteUsers(items.map(i => i.id));
 							return [true, { deselectAll: true }];
 						},
 					},
@@ -123,7 +128,7 @@ export function UsersTable() {
 				{
 					head: <DataKitTable.Head>Name</DataKitTable.Head>,
 					body: ({ item }) => <DataKitTable.Cell>{item.name}</DataKitTable.Cell>,
-					sortable: { path: "name", default: 0 },
+					sortable: { path: 'name', default: 0 },
 				},
 				{
 					head: <DataKitTable.Head>Email</DataKitTable.Head>,
@@ -140,22 +145,18 @@ export function UsersTable() {
 Use `DataKit` for grids, cards, or any custom layout. It provides toolbar/pagination but lets you render content:
 
 ```tsx
-"use client";
+'use client';
 
-import { DataKit } from "next-data-kit/client";
-import { fetchUsers } from "@/actions/users";
+import { DataKit } from 'next-data-kit/client';
+import { fetchUsers } from '@/actions/users';
 
 export function UsersGrid() {
 	return (
-		<DataKit
-			action={fetchUsers}
-			limit={{ default: 12 }}
-			filters={[{ id: "search", label: "Search", type: "TEXT" }]}
-		>
-			{(dataKit) => (
-				<div className="grid grid-cols-4 gap-4">
-					{dataKit.items.map((user) => (
-						<div key={user.id} className="rounded-lg border p-4">
+		<DataKit action={fetchUsers} limit={{ default: 12 }} filters={[{ id: 'search', label: 'Search', type: 'TEXT' }]}>
+			{dataKit => (
+				<div className='grid grid-cols-4 gap-4'>
+					{dataKit.items.map(user => (
+						<div key={user.id} className='rounded-lg border p-4'>
 							<h3>{user.name}</h3>
 							<p>{user.email}</p>
 						</div>
@@ -171,10 +172,12 @@ export function UsersGrid() {
 
 ```tsx
 <DataKit action={fetchUsers} manual>
-	{(dataKit) => (
+	{dataKit => (
 		<>
 			{dataKit.state.isLoading && <Spinner />}
-			{dataKit.items.map((user) => <Card key={user.id} user={user} />)}
+			{dataKit.items.map(user => (
+				<Card key={user.id} user={user} />
+			))}
 		</>
 	)}
 </DataKit>
@@ -185,10 +188,10 @@ export function UsersGrid() {
 For fully custom implementations:
 
 ```tsx
-"use client";
+'use client';
 
-import { useDataKit } from "next-data-kit/client";
-import { fetchUsers } from "@/actions/users";
+import { useDataKit } from 'next-data-kit/client';
+import { fetchUsers } from '@/actions/users';
 
 export function UsersTable() {
 	const {
@@ -206,7 +209,7 @@ export function UsersTable() {
 
 	return (
 		<div>
-			<input placeholder="Search..." onChange={(e) => setFilter("search", e.target.value)} />
+			<input placeholder='Search...' onChange={e => setFilter('search', e.target.value)} />
 
 			{isLoading ? (
 				<p>Loading...</p>
@@ -214,12 +217,12 @@ export function UsersTable() {
 				<table>
 					<thead>
 						<tr>
-							<th onClick={() => setSort("name", 1)}>Name</th>
-							<th onClick={() => setSort("email", 1)}>Email</th>
+							<th onClick={() => setSort('name', 1)}>Name</th>
+							<th onClick={() => setSort('email', 1)}>Email</th>
 						</tr>
 					</thead>
 					<tbody>
-						{items.map((user) => (
+						{items.map(user => (
 							<tr key={user.id}>
 								<td>{user.name}</td>
 								<td>{user.email}</td>
@@ -253,18 +256,101 @@ type TDataKitServerActionOptions<T, R> = {
 	model: TMongoModel<T>;
 	item: (item: T) => Promise<R> | R;
 	filter?: (filterInput?: Record<string, unknown>) => TMongoFilterQuery<T>;
+	// ** Custom filter configuration (defines allowed filter keys)
 	filterCustom?: TFilterCustomConfigWithFilter<T, TMongoFilterQuery<T>>;
 	defaultSort?: TSortOptions<T>;
+	// ** Maximum limit per page (default: 100)
+	maxLimit?: number;
+	// ** Whitelist of allowed query fields
+	queryAllowed?: string[];
 };
 ```
 
+```
+
+// ... inside dataKitServerAction options
+	});
+}
+```
+
+### Understanding `filter` vs `query`
+
+There are two ways data reaches your database:
+
+1. **`filter` (via `filterCustom`)** - For user-facing filters with transformations
+   - Client-side `filters` prop → sends values to `filter` parameter
+   - Server validates against `filterCustom` keys
+   - You define how values transform into database queries
+   - **Use for**: search boxes, dropdowns, date ranges, etc.
+
+2. **`query` (via `queryAllowed`)** - For direct field matching
+   - Direct database field equality checks
+   - Must explicitly whitelist with `queryAllowed`
+   - **Use for**: fixed filters like `{ active: true }`, user-specific queries
+
+```typescript
+dataKitServerAction({
+	model: UserModel,
+	input,
+	item: u => u,
+	// Client filters go through filterCustom
+	filterCustom: {
+		search: createSearchFilter(['name', 'email']),
+		role: value => ({ role: value }),
+	},
+	// Direct queries need explicit whitelist
+	queryAllowed: ['organizationId', 'active'],
+});
+```
+
+### Security Note: Strict Mode by Default
+
+**Filter Security**: When you define `filterCustom`, ONLY those keys are allowed. Any other filter key from the client will **THROW AN ERROR**.
+
+**Query Security**: When you provide `queryAllowed`, only those query fields are accepted. Any other query field will throw an error.
+
+````typescript
+// Strict Security Example
+dataKitServerAction({
+	model: UserModel,
+	input,
+	item: u => ({ id: u._id.toString(), name: u.name }),
+	filterCustom: {
+		name: value => ({ name: { $regex: value, $options: 'i' } }),
+		email: value => ({ email: { $regex: value, $options: 'i' } }),
+		role: value => ({ role: value }),
+	},
+	// ONLY 'name', 'email', and 'role' filters are allowed
+	// If client sends { filter: { secret: "true" } }, this WILL THROW an Error!
+
+	// Query params need explicit whitelist
+	queryAllowed: ['status'],
+});
+```
+
+### Error Handling on Client
+
+When the server action throws an error (e.g., security violation), the client automatically handles it:
+
+**`DataKitTable`**: Displays error in red within the table body
+
+**`useDataKit`**: Error available in `state.error`
+
+```tsx
+const { state: { error } } = useDataKit({ action: fetchUsers });
+
+if (error) {
+	return <div className="text-red-500">Error: {error.message}</div>;
+}
+```
+
 #### `createSearchFilter(fields)`
 
-Create a search filter for multiple fields.
+Create a search filter for multiple fields. Use this in `filterCustom`.
 
 ```typescript
 filterCustom: {
-	search: createSearchFilter(["name", "email", "phone"]);
+	search: createSearchFilter(['name', 'email', 'phone']),
 }
 ```
 
@@ -296,38 +382,39 @@ filterCustom: {
   priceRange: (value: { min: number; max: number }) => ({
     price: { $gte: value.min, $lte: value.max },
   }),
-}
+},
+// Only 'search' and 'priceRange' filters are allowed from client
 ```
 
 #### Understanding `filterCustom` Flow
 
 To use custom filters effectively, you must match the **Key** on the client with the **Key** on the server.
 
-1.  **Client-side**: Define a filter with a specific `id` (e.g., `'priceRange'`).
-    ```tsx
-    // Client Component
-    <DataKitTable
-      filters={[
-        { id: 'priceRange', label: 'Price Range', type: 'TEXT' } 
-      ]}
-      // ...
-    />
-    ```
-
-    _Note: When use interact with this filter, `DataKit` sends `{ filter: { priceRange: "value" } }` to the server._
-
-2.  **Server-side**: Handle that key in `filterCustom`.
-    ```typescript
-    // Server Action
-    filterCustom: {
-        // MATCHES 'priceRange' FROM CLIENT
-        priceRange: (value) => ({
-             price: { $lte: Number(value) }
-        })
-    }
-    ```
-
-    The `filterCustom` function intercepts the value sent from the client before it hits the database query builder, allowing you to transform simple values into complex queries.
+1.   **Client-side**: Define a filter with a specific `id` (e.g., `'priceRange'`).
+
+     ```tsx
+     // Client Component
+     <DataKitTable
+     	filters={[{ id: 'priceRange', label: 'Price Range', type: 'TEXT' }]}
+     	// ...
+     />
+     ```
+
+     _Note: When use interact with this filter, `DataKit` sends `{ filter: { priceRange: "value" } }` to the server._
+
+2.   **Server-side**: Handle that key in `filterCustom`.
+
+     ```typescript
+     // Server Action
+     filterCustom: {
+     	// MATCHES 'priceRange' FROM CLIENT
+     	priceRange: value => ({
+     		price: { $lte: Number(value) },
+     	});
+     }
+     ```
+
+     The `filterCustom` function intercepts the value sent from the client before it hits the database query builder, allowing you to transform simple values into complex queries.
 
 **Client Usage:**
 
@@ -339,10 +426,10 @@ const {
 });
 
 // Trigger the manual search
-setFilter("search", "query string");
+setFilter('search', 'query string');
 
 // Trigger the range filter
-setFilter("priceRange", { min: 10, max: 100 });
+setFilter('priceRange', { min: 10, max: 100 });
 ```
 
 ### Client
@@ -351,29 +438,29 @@ setFilter("priceRange", { min: 10, max: 100 });
 
 Full-featured table component with built-in UI.
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `action` | `(input) => Promise<Result>` | Server action function |
-| `table` | `Column[]` | Column definitions |
-| `filters` | `FilterItem[]` | Filter configurations |
-| `selectable` | `{ enabled, actions? }` | Selection & bulk actions |
-| `limit` | `{ default: number }` | Items per page |
-| `controller` | `Ref<Controller>` | External control ref |
-| `className` | `string` | Container class |
-| `bordered` | `boolean \| 'rounded'` | Border style |
-| `refetchInterval` | `number` | Auto-refresh interval (ms) |
+| Prop              | Type                         | Description                |
+| ----------------- | ---------------------------- | -------------------------- |
+| `action`          | `(input) => Promise<Result>` | Server action function     |
+| `table`           | `Column[]`                   | Column definitions         |
+| `filters`         | `FilterItem[]`               | Filter configurations      |
+| `selectable`      | `{ enabled, actions? }`      | Selection & bulk actions   |
+| `limit`           | `{ default: number }`        | Items per page             |
+| `controller`      | `Ref<Controller>`            | External control ref       |
+| `className`       | `string`                     | Container class            |
+| `bordered`        | `boolean \| 'rounded'`       | Border style               |
+| `refetchInterval` | `number`                     | Auto-refresh interval (ms) |
 
 #### `<DataKit>` Component
 
 Headless component for custom layouts (grids, cards, etc).
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `action` | `(input) => Promise<Result>` | Server action function |
-| `filters` | `FilterItem[]` | Filter configurations |
-| `limit` | `{ default: number }` | Items per page |
-| `manual` | `boolean` | Skip loading/empty state handling |
-| `children` | `(dataKit) => ReactNode` | Render function |
+| Prop       | Type                         | Description                       |
+| ---------- | ---------------------------- | --------------------------------- |
+| `action`   | `(input) => Promise<Result>` | Server action function            |
+| `filters`  | `FilterItem[]`               | Filter configurations             |
+| `limit`    | `{ default: number }`        | Items per page                    |
+| `manual`   | `boolean`                    | Skip loading/empty state handling |
+| `children` | `(dataKit) => ReactNode`     | Render function                   |
 
 #### `useDataKit(options)`
 
@@ -398,23 +485,23 @@ interface TDataKitControllerOptions<T, R> {
 
 Returns:
 
--    `items` - Current page items
--    `page` - Current page number
--    `limit` - Items per page
--    `total` - Total document count
--    `sorts` - Current sort configuration
--    `filter` - Current filter values
--    `state`
-     -    `isLoading` - Loading state
-     -    `error` - Error state
--    `actions`
-     -    `setPage(page)` - Go to a specific page
-     -    `setLimit(limit)` - Set items per page
-     -    `setSort(path, value)` - Set sort for a column
-     -    `setFilter(key, value)` - Set a filter value
-     -    `clearFilters()` - Clear all filters
-     -    `refresh()` - Refresh the table data
-     -    `reset()` - Reset to initial state
+- `items` - Current page items
+- `page` - Current page number
+- `limit` - Items per page
+- `total` - Total document count
+- `sorts` - Current sort configuration
+- `filter` - Current filter values
+- `state`
+     - `isLoading` - Loading state
+     - `error` - Error state
+- `actions`
+     - `setPage(page)` - Go to a specific page
+     - `setLimit(limit)` - Set items per page
+     - `setSort(path, value)` - Set sort for a column
+     - `setFilter(key, value)` - Set a filter value
+     - `clearFilters()` - Clear all filters
+     - `refresh()` - Refresh the table data
+     - `reset()` - Reset to initial state
 
 #### `useSelection<T>()`
 
@@ -455,7 +542,7 @@ const { pages, hasNextPage, hasPrevPage, totalPages } = usePagination({
 
 ```typescript
 interface TDataKitInput<T = unknown> {
-	action?: "FETCH";
+	action?: 'FETCH';
 	page?: number;
 	limit?: number;
 	sort?: TSortOptions<T>;
@@ -470,7 +557,7 @@ interface TDataKitInput<T = unknown> {
 
 ```typescript
 interface TDataKitResult<R> {
-	type: "ITEMS";
+	type: 'ITEMS';
 	items: R[];
 	documentTotal: number;
 }
@@ -481,7 +568,7 @@ interface TDataKitResult<R> {
 ```typescript
 interface TFilterConfig {
 	[key: string]: {
-		type: "regex" | "exact";
+		type: 'REGEX' | 'EXACT';
 		field?: string;
 	};
 }
@@ -492,7 +579,7 @@ interface TFilterConfig {
 The package provides generic database types that work with any ORM/ODM:
 
 ```typescript
-import type { TModel, TMongoFilterQuery, TQueryBuilder } from "next-data-kit/types";
+import type { TModel, TMongoFilterQuery, TQueryBuilder } from 'next-data-kit/types';
 
 // Your model just needs to implement the Model interface
 interface MyModel extends TModel<MyDocument> {
@@ -509,8 +596,8 @@ MIT © muhgholy
 
 This repo includes a **dev-only** playground you can open in the browser to preview components and validate end-to-end behavior against a **temporary in-memory MongoDB**.
 
--    It is **not exported** in `package.json#exports`.
--    It is **not published** to npm because `package.json#files` only includes `dist`.
+- It is **not exported** in `package.json#exports`.
+- It is **not published** to npm because `package.json#files` only includes `dist`.
 
 ### Run
 
@@ -520,8 +607,8 @@ npm run playground:dev
 
 Then open:
 
--    Web UI: http://localhost:5173
--    API health: http://127.0.0.1:8787/api/health
+- Web UI: http://localhost:5173
+- API health: http://127.0.0.1:8787/api/health
 
 ### Reset seed data
 

package/dist/client/components/data-kit-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-kit-table.d.ts","sourceRoot":"","sources":["../../../src/client/components/data-kit-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,EAkBH,SAAS,EACT,SAAS,EAGZ,MAAM,MAAM,CAAC;AACd,OAAO,KAAK,EACR,aAAa,EACb,cAAc,EACd,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,2BAA2B,EAC3B,sBAAsB,EACtB,iBAAiB,EACjB,uBAAuB,EACvB,aAAa,EAChB,MAAM,aAAa,CAAC;AAsXrB,eAAO,MAAM,YAAY,IA/WrB,OAAO,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,OAAO,CAAC,cAAc,CAAC,sBAAsB,CAAC,CAAC,EAClG,SAAS,mBACJ,QAAQ,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,uBAAuB,CAAC,uBAAuB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,EAAE,CAAC;IAC9E,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE;QACT,OAAO,EAAE,OAAO,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;KAClF,CAAC;IACF,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;CAC7G,CAAC;;;CA6VA,CAAC"}
+{"version":3,"file":"data-kit-table.d.ts","sourceRoot":"","sources":["../../../src/client/components/data-kit-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,EAkBH,SAAS,EACT,SAAS,EAGZ,MAAM,MAAM,CAAC;AACd,OAAO,KAAK,EACR,aAAa,EACb,cAAc,EACd,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,2BAA2B,EAC3B,sBAAsB,EACtB,iBAAiB,EACjB,uBAAuB,EACvB,aAAa,EAChB,MAAM,aAAa,CAAC;AA4XrB,eAAO,MAAM,YAAY,IArXrB,OAAO,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,OAAO,CAAC,cAAc,CAAC,sBAAsB,CAAC,CAAC,EAClG,SAAS,mBACJ,QAAQ,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,uBAAuB,CAAC,uBAAuB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,EAAE,CAAC;IAC9E,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE;QACT,OAAO,EAAE,OAAO,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;KAClF,CAAC;IACF,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;CAC7G,CAAC;;;CAmWA,CAAC"}

package/dist/client/components/data-kit-table.js

@@ -118,7 +118,7 @@ const DataKitRoot = (props) => {
     }, [refetchInterval, isVisible, dataKit.actions]);
     useEffect(() => { selection.deselectAll(); }, [dataKit.items.length]);
     // ** Render
-    return (_jsxs("div", { ref: tableRef, className: `space-y-3 ${className ?? ''}`, children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("div", { className: "flex items-center gap-2", children: filters.length > 0 && (_jsxs(Popover, { open: isFilterOpen, onOpenChange: setIsFilterOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(Filter, { className: "mr-1.5 size-4" }), "Filters"] }) }), _jsxs(PopoverContent, { align: "start", className: "w-80", container: overlayContainer, children: [_jsx("div", { className: "grid gap-3", children: filters.map((f) => (_jsxs("div", { className: "grid gap-1.5", children: [_jsx("label", { className: "text-sm font-medium", children: f.label }), f.type === 'TEXT' && (_jsx("input", { type: "text", className: "h-9 w-full rounded-md border bg-transparent px-3 text-sm outline-none focus:ring-2 focus:ring-ring", placeholder: f.placeholder, value: dataKit.filter[f.id] ?? '', onChange: (e) => dataKit.actions.setFilter(f.id, e.target.value) })), f.type === 'SELECT' && (_jsxs(Select, { value: String(dataKit.filter[f.id] || '__all__'), onValueChange: (v) => dataKit.actions.setFilter(f.id, v === '__all__' ? '' : v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { container: overlayContainer, children: [_jsx(SelectItem, { value: "__all__", children: "All" }), f.dataset?.map((d) => (_jsx(SelectItem, { value: d.id, children: d.label }, d.id)))] })] })), f.type === 'BOOLEAN' && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: f.placeholder ?? 'Enable' }), _jsx(Switch, { checked: Boolean(dataKit.filter[f.id]), onCheckedChange: (c) => dataKit.actions.setFilter(f.id, c) })] }))] }, f.id))) }), _jsxs("div", { className: "mt-4 flex justify-between border-t pt-3", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: handleResetFilters, children: "Reset" }), _jsx(Button, { size: "sm", onClick: () => setIsFilterOpen(false), children: "Done" })] })] })] })) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("span", { className: "mr-2 text-sm text-muted-foreground", children: [dataKit.items.length, " of ", dataKit.total] }), _jsxs(Select, { value: String(dataKit.limit), onValueChange: (v) => dataKit.actions.setLimit(Number(v)), disabled: dataKit.state.isLoading, children: [_jsx(SelectTrigger, { className: "w-16", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { container: overlayContainer, children: [10, 25, 50, 100].map((v) => (_jsx(SelectItem, { value: String(v), children: v }, v))) })] })] })] }), _jsx("div", { className: `overflow-hidden border border-gray-200 dark:border-gray-800 ${bordered === 'rounded' ? 'rounded-lg' : bordered ? '' : 'rounded-lg'}`, children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [selectable?.enabled && (_jsx(TableHead, { className: "w-12", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: selection.isIndeterminate ? 'indeterminate' : selection.isAllSelected, onCheckedChange: () => selection.toggleAll() }), selectable.actions && Object.keys(selectable.actions).length > 0 && (_jsxs(DropdownMenu, { open: actionsMenuOpen, onOpenChange: setActionsMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-6", disabled: selectedCount === 0 || !!actionLoading, children: actionLoading ? _jsx(Loader2, { className: "size-4 animate-spin" }) : _jsx(MoreHorizontal, { className: "size-4" }) }) }), _jsx(DropdownMenuContent, { align: "start", container: overlayContainer, children: Object.entries(selectable.actions).map(([key, action]) => (_jsx(DropdownMenuItem, { disabled: !!actionLoading, onSelect: () => handleSelectionAction(key), children: actionLoading === key ? 'Working…' : action.name }, key))) })] }))] }) })), columns.map((col, idx) => (_jsx(React.Fragment, { children: col.sortable ? (_jsx(TableHead, { ...(React.isValidElement(col.head) ? col.head.props : {}), children: _jsxs(Button, { variant: "ghost", size: "sm", className: "-ml-3", onClick: () => handleSort(col.sortable.path), children: [React.isValidElement(col.head) ? col.head.props.children : col.head, getSortFor(col.sortable.path) === 1 && _jsx(ArrowUp, { className: "ml-1 size-4" }), getSortFor(col.sortable.path) === -1 && _jsx(ArrowDown, { className: "ml-1 size-4" })] }) })) : (col.head) }, idx)))] }) }), _jsx(TableBody, { children: dataKit.state.isLoading ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: colSpan, className: "h-24 text-center", children: _jsx(Loader2, { className: "mx-auto size-5 animate-spin" }) }) })) : dataKit.items.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: colSpan, className: "h-24 text-center text-muted-foreground", children: "No results found." }) })) : (dataKit.items.map((item, idx) => (_jsxs(TableRow, { children: [selectable?.enabled && (_jsx(TableCell, { children: _jsx(Checkbox, { checked: selection.isSelected(item.id), onCheckedChange: () => selection.toggle(item.id) }) })), columns.map((col, colIdx) => (_jsx(React.Fragment, { children: col.body({
+    return (_jsxs("div", { ref: tableRef, className: `space-y-3 ${className ?? ''}`, children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("div", { className: "flex items-center gap-2", children: filters.length > 0 && (_jsxs(Popover, { open: isFilterOpen, onOpenChange: setIsFilterOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(Filter, { className: "mr-1.5 size-4" }), "Filters"] }) }), _jsxs(PopoverContent, { align: "start", className: "w-80", container: overlayContainer, children: [_jsx("div", { className: "grid gap-3", children: filters.map((f) => (_jsxs("div", { className: "grid gap-1.5", children: [_jsx("label", { className: "text-sm font-medium", children: f.label }), f.type === 'TEXT' && (_jsx("input", { type: "text", className: "h-9 w-full rounded-md border bg-transparent px-3 text-sm outline-none focus:ring-2 focus:ring-ring", placeholder: f.placeholder, value: dataKit.filter[f.id] ?? '', onChange: (e) => dataKit.actions.setFilter(f.id, e.target.value) })), f.type === 'SELECT' && (_jsxs(Select, { value: String(dataKit.filter[f.id] || '__all__'), onValueChange: (v) => dataKit.actions.setFilter(f.id, v === '__all__' ? '' : v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { container: overlayContainer, children: [_jsx(SelectItem, { value: "__all__", children: "All" }), f.dataset?.map((d) => (_jsx(SelectItem, { value: d.id, children: d.label }, d.id)))] })] })), f.type === 'BOOLEAN' && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: f.placeholder ?? 'Enable' }), _jsx(Switch, { checked: Boolean(dataKit.filter[f.id]), onCheckedChange: (c) => dataKit.actions.setFilter(f.id, c) })] }))] }, f.id))) }), _jsxs("div", { className: "mt-4 flex justify-between border-t pt-3", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: handleResetFilters, children: "Reset" }), _jsx(Button, { size: "sm", onClick: () => setIsFilterOpen(false), children: "Done" })] })] })] })) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("span", { className: "mr-2 text-sm text-muted-foreground", children: [dataKit.items.length, " of ", dataKit.total] }), _jsxs(Select, { value: String(dataKit.limit), onValueChange: (v) => dataKit.actions.setLimit(Number(v)), disabled: dataKit.state.isLoading, children: [_jsx(SelectTrigger, { className: "w-16", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { container: overlayContainer, children: [10, 25, 50, 100].map((v) => (_jsx(SelectItem, { value: String(v), children: v }, v))) })] })] })] }), _jsx("div", { className: `overflow-hidden border border-gray-200 dark:border-gray-800 ${bordered === 'rounded' ? 'rounded-lg' : bordered ? '' : 'rounded-lg'}`, children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [selectable?.enabled && (_jsx(TableHead, { className: "w-12", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: selection.isIndeterminate ? 'indeterminate' : selection.isAllSelected, onCheckedChange: () => selection.toggleAll() }), selectable.actions && Object.keys(selectable.actions).length > 0 && (_jsxs(DropdownMenu, { open: actionsMenuOpen, onOpenChange: setActionsMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-6", disabled: selectedCount === 0 || !!actionLoading, children: actionLoading ? _jsx(Loader2, { className: "size-4 animate-spin" }) : _jsx(MoreHorizontal, { className: "size-4" }) }) }), _jsx(DropdownMenuContent, { align: "start", container: overlayContainer, children: Object.entries(selectable.actions).map(([key, action]) => (_jsx(DropdownMenuItem, { disabled: !!actionLoading, onSelect: () => handleSelectionAction(key), children: actionLoading === key ? 'Working…' : action.name }, key))) })] }))] }) })), columns.map((col, idx) => (_jsx(React.Fragment, { children: col.sortable ? (_jsx(TableHead, { ...(React.isValidElement(col.head) ? col.head.props : {}), children: _jsxs(Button, { variant: "ghost", size: "sm", className: "-ml-3", onClick: () => handleSort(col.sortable.path), children: [React.isValidElement(col.head) ? col.head.props.children : col.head, getSortFor(col.sortable.path) === 1 && _jsx(ArrowUp, { className: "ml-1 size-4" }), getSortFor(col.sortable.path) === -1 && _jsx(ArrowDown, { className: "ml-1 size-4" })] }) })) : (col.head) }, idx)))] }) }), _jsx(TableBody, { children: dataKit.state.isLoading ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: colSpan, className: "h-24 text-center", children: _jsx(Loader2, { className: "mx-auto size-5 animate-spin" }) }) })) : dataKit.state.error ? (_jsx(TableRow, { children: _jsxs(TableCell, { colSpan: colSpan, className: "h-24 text-center text-red-500", children: ["Error: ", dataKit.state.error.message] }) })) : dataKit.items.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: colSpan, className: "h-24 text-center text-muted-foreground", children: "No results found." }) })) : (dataKit.items.map((item, idx) => (_jsxs(TableRow, { children: [selectable?.enabled && (_jsx(TableCell, { children: _jsx(Checkbox, { checked: selection.isSelected(item.id), onCheckedChange: () => selection.toggle(item.id) }) })), columns.map((col, colIdx) => (_jsx(React.Fragment, { children: col.body({
                                             item,
                                             index: idx,
                                             state: initialState,