@sio-group/ui-datatable 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @sio-group/ui-datatable
 
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @sio-group/ui-modal@0.4.2
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @sio-group/ui-modal@0.4.1
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -284,6 +284,7 @@ var BooleanCell = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   import_ui_core2.Button,
   {
+    className: "boolean",
     color: value ? "success" : "error",
     variant: column.format === "button" ? "primary" : "link",
     onClick: () => updateData?.(item.id, {
@@ -336,7 +337,6 @@ var import_react3 = require("react");
 var import_ui_core3 = require("@sio-group/ui-core");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var InlineInputCell = ({
-  column,
   formField,
   item,
   value,
@@ -459,7 +459,6 @@ var renderValue = ({ value, column, item, formFields, updateData }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       InlineInputCell,
       {
-        column,
         value,
         item,
         formField,
@@ -485,7 +484,7 @@ var renderValue = ({ value, column, item, formFields, updateData }) => {
       DateCell,
       {
         column,
-        value
+        value: String(value)
       }
     );
   }

package/dist/index.js

@@ -258,6 +258,7 @@ var BooleanCell = ({
 }) => /* @__PURE__ */ jsx5(
   Button2,
   {
+    className: "boolean",
     color: value ? "success" : "error",
     variant: column.format === "button" ? "primary" : "link",
     onClick: () => updateData?.(item.id, {
@@ -310,7 +311,6 @@ import { useEffect as useEffect2, useState as useState3 } from "react";
 import { Button as Button3 } from "@sio-group/ui-core";
 import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var InlineInputCell = ({
-  column,
   formField,
   item,
   value,
@@ -433,7 +433,6 @@ var renderValue = ({ value, column, item, formFields, updateData }) => {
     return /* @__PURE__ */ jsx8(
       InlineInputCell,
       {
-        column,
         value,
         item,
         formField,
@@ -459,7 +458,7 @@ var renderValue = ({ value, column, item, formFields, updateData }) => {
       DateCell,
       {
         column,
-        value
+        value: String(value)
       }
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sio-group/ui-datatable",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "type": "module",
   "main": "./dist/index.cjs",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@sio-group/ui-core": "0.4.0",
     "@sio-group/ui-pagination": "0.1.1",
-    "@sio-group/ui-modal": "0.4.0"
+    "@sio-group/ui-modal": "0.4.2"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4",

package/src/components/DataTableControls.tsx

@@ -1,11 +1,5 @@
-import {Entity} from "../types";
 import {useState} from "react";
-
-interface DataTableControlsProps {
-    currentSearch?: string | null;
-    handleSearch: (query: string) => void;
-    entity?: Entity
-}
+import {DataTableControlsProps} from "../types/data-table-props";
 
 export const DataTableControls = ({
     currentSearch,

package/src/components/cell-types/BooleanCell.tsx

@@ -1,12 +1,5 @@
-import {Column} from "../../types";
 import {Button} from "@sio-group/ui-core";
-
-interface BooleanCellProps<T extends { id: number | string }> {
-    item: T;
-    column: Column<T>;
-    value: T[keyof T];
-    updateData?: (id: string | number, values: Partial<T>) => void;
-}
+import {BooleanCellProps} from "../../types/data-table-props";
 
 export const BooleanCell = <T extends { id: string | number }> ({
     column,
@@ -15,6 +8,7 @@ export const BooleanCell = <T extends { id: string | number }> ({
     updateData,
 }: BooleanCellProps<T>) => (
     <Button
+        className="boolean"
         color={value ? "success" : "error"}
         variant={column.format === "button" ? "primary" : "link"}
         onClick={() =>

package/src/components/cell-types/InlineInputCell.tsx

@@ -1,17 +1,8 @@
-import {KeyboardEventHandler, useEffect, useState} from "react";
-import {Column, FormField} from "../../types";
+import {useEffect, useState} from "react";
 import {Button} from "@sio-group/ui-core";
-
-interface InlineInputCellProps<T extends { id: string | number }> {
-    column: Column<T>;
-    formField: FormField;
-    item: T;
-    value: T[keyof T];
-    updateData?: (id: string | number, values: Partial<T>) => void;
-}
+import {InlineInputCellProps} from "../../types/data-table-props";
 
 export const InlineInputCell = <T extends { id: string | number }>({
-    column,
     formField,
     item,
     value,

package/src/tests/renderValue.test.tsx

@@ -0,0 +1,304 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import {renderValue} from "../utils/render-value";
+
+interface TestItem {
+    id: number;
+    name: string;
+    email: string;
+    status: string;
+    active: boolean;
+    createdAt: string;
+    tags: string[];
+    role: { name: string };
+    meta: { key: string; value: string };
+}
+
+const baseColumn = { name: 'name' as keyof TestItem, label: 'Naam' };
+const baseItem: TestItem = {
+    id: 1,
+    name: 'Alice',
+    email: 'alice@example.com',
+    status: 'active',
+    active: true,
+    createdAt: '2024-01-15T10:00:00.000Z',
+    tags: ['admin', 'user'],
+    role: { name: 'Administrator' },
+    meta: { key: 'foo', value: 'bar' },
+};
+
+const renderCell = (props: Parameters<typeof renderValue>[0]) => {
+    const result = renderValue(props);
+    const { container } = render(<>{result}</>);
+    return container;
+};
+
+// ─────────────────────────────────────────────
+// Null / undefined / empty
+// ─────────────────────────────────────────────
+
+describe('empty values', () => {
+    it('renders EmptyCell for null', () => {
+        const container = renderCell({ value: null, column: baseColumn, item: baseItem });
+        expect(container.querySelector('.empty')).toBeTruthy();
+    });
+
+    it('renders EmptyCell for undefined', () => {
+        const container = renderCell({ value: undefined, column: baseColumn, item: baseItem });
+        expect(container.querySelector('.empty')).toBeTruthy();
+    });
+
+    it('renders EmptyCell for empty array', () => {
+        const container = renderCell({ value: [], column: baseColumn, item: baseItem });
+        expect(container.querySelector('.empty')).toBeTruthy();
+    });
+});
+
+// ─────────────────────────────────────────────
+// String / number fallback
+// ─────────────────────────────────────────────
+
+describe('string and number values', () => {
+    it('renders a string value', () => {
+        const container = renderCell({ value: 'Alice', column: baseColumn, item: baseItem });
+        expect(container.textContent).toBe('Alice');
+    });
+
+    it('renders a number value as string', () => {
+        const container = renderCell({ value: 42, column: baseColumn, item: baseItem });
+        expect(container.textContent).toBe('42');
+    });
+});
+
+// ─────────────────────────────────────────────
+// Format: email
+// ─────────────────────────────────────────────
+
+describe('format: email', () => {
+    it('renders a mailto link', () => {
+        const container = renderCell({
+            value: 'alice@example.com',
+            column: { ...baseColumn, format: 'email' },
+            item: baseItem,
+        });
+
+        const link = container.querySelector('a');
+        expect(link).toBeTruthy();
+        expect(link?.getAttribute('href')).toBe('mailto:alice@example.com');
+        expect(link?.textContent).toBe('alice@example.com');
+    });
+});
+
+// ─────────────────────────────────────────────
+// Format: date / datetime
+// ─────────────────────────────────────────────
+
+describe('format: date and datetime', () => {
+    it('renders a localized date string for format: date', () => {
+        const container = renderCell({
+            value: '2024-01-15T10:00:00.000Z',
+            column: { ...baseColumn, format: 'date' },
+            item: baseItem,
+        });
+
+        // Should contain year and month — exact format depends on locale
+        expect(container.textContent).toMatch(/2024/);
+    });
+
+    it('renders a localized datetime string for format: datetime', () => {
+        const container = renderCell({
+            value: '2024-01-15T10:00:00.000Z',
+            column: { ...baseColumn, format: 'datetime' },
+            item: baseItem,
+        });
+
+        expect(container.textContent).toMatch(/2024/);
+    });
+});
+
+// ─────────────────────────────────────────────
+// Format: boolean / button
+// ─────────────────────────────────────────────
+
+describe('format: boolean and button', () => {
+    it('renders a BooleanCell for format: boolean', () => {
+        const container = renderCell({
+            value: true,
+            column: { ...baseColumn, format: 'boolean' },
+            item: baseItem,
+        });
+
+        expect(container.querySelector('.boolean')).toBeTruthy();
+    });
+
+    it('renders a BooleanCell for format: button', () => {
+        const container = renderCell({
+            value: false,
+            column: { ...baseColumn, format: 'button' },
+            item: baseItem,
+        });
+
+        expect(container.querySelector('.boolean')).toBeTruthy();
+    });
+
+    it('calls updateData when BooleanCell is clicked', async () => {
+        const updateData = vi.fn();
+        const container = renderCell({
+            value: true,
+            column: { ...baseColumn, format: 'boolean' },
+            item: baseItem,
+            updateData,
+        });
+
+        const button = container.querySelector('button');
+        button?.click();
+
+        expect(updateData).toHaveBeenCalledWith(baseItem.id, { name: !true });
+    });
+});
+
+// ─────────────────────────────────────────────
+// Format: pill
+// ─────────────────────────────────────────────
+
+describe('format: pill', () => {
+    it('renders a Pill with status and label from value', () => {
+        const container = renderCell({
+            value: { status: 'success', label: 'Actief' },
+            column: { ...baseColumn, format: 'pill' },
+            item: baseItem,
+        });
+
+        const pill = container.querySelector('.pill');
+        expect(pill).toBeTruthy();
+        expect(pill?.textContent).toBe('Actief');
+        expect(pill?.className).toContain('pill--success');
+    });
+});
+
+// ─────────────────────────────────────────────
+// Arrays
+// ─────────────────────────────────────────────
+
+describe('array values', () => {
+    it('renders each string item in its own div', () => {
+        const container = renderCell({
+            value: ['admin', 'user'],
+            column: baseColumn,
+            item: baseItem,
+        });
+
+        const divs = container.querySelectorAll('div');
+        expect(divs).toHaveLength(2);
+        expect(divs[0].textContent).toBe('admin');
+        expect(divs[1].textContent).toBe('user');
+    });
+
+    it('renders each object item using key-value pairs', () => {
+        const container = renderCell({
+            value: [{ name: 'Admin' }, { name: 'User' }],
+            column: baseColumn,
+            item: baseItem,
+        });
+
+        expect(container.textContent).toContain('Admin');
+        expect(container.textContent).toContain('User');
+    });
+
+    it('renders only the specified key when format.key is set', () => {
+        const container = renderCell({
+            value: [{ name: 'Admin', id: 1 }, { name: 'User', id: 2 }],
+            column: { ...baseColumn, format: { key: 'name' } },
+            item: baseItem,
+        });
+
+        expect(container.textContent).toContain('Admin');
+        expect(container.textContent).toContain('User');
+        expect(container.textContent).not.toContain('1');
+        expect(container.textContent).not.toContain('2');
+    });
+});
+
+// ─────────────────────────────────────────────
+// Objects
+// ─────────────────────────────────────────────
+
+describe('object values', () => {
+    it('renders all key-value pairs for a plain object', () => {
+        const container = renderCell({
+            value: { key: 'foo', value: 'bar' },
+            column: baseColumn,
+            item: baseItem,
+        });
+
+        expect(container.textContent).toContain('key');
+        expect(container.textContent).toContain('foo');
+        expect(container.textContent).toContain('value');
+        expect(container.textContent).toContain('bar');
+    });
+
+    it('renders only the specified key when format.key is set', () => {
+        const container = renderCell({
+            value: { name: 'Administrator', id: 5 },
+            column: { ...baseColumn, format: { key: 'name' } },
+            item: baseItem,
+        });
+
+        expect(container.textContent).toBe('Administrator');
+        expect(container.textContent).not.toContain('5');
+    });
+
+    it('renders EmptyCell for empty object', () => {
+        const container = renderCell({
+            value: {},
+            column: baseColumn,
+            item: baseItem,
+        });
+
+        expect(container.querySelector('.empty')).toBeTruthy();
+    });
+
+    it('falls through to String(value) when format.key does not exist on object', () => {
+        const container = renderCell({
+            value: { name: 'Alice' },
+            column: { ...baseColumn, format: { key: 'nonexistent' } },
+            item: baseItem,
+        });
+
+        // Returns empty string for missing key
+        expect(container.textContent).toBe('');
+    });
+});
+
+// ─────────────────────────────────────────────
+// Inline editing (formFields)
+// ─────────────────────────────────────────────
+
+describe('inline editing', () => {
+    it('renders InlineInputCell when a matching formField is found', () => {
+        const formFields = [{ name: 'name', type: 'text' as const }];
+        const container = renderCell({
+            value: 'Alice',
+            column: baseColumn,
+            item: baseItem,
+            formFields,
+        });
+
+        // InlineInputCell should be rendered — check for edit button or input
+        expect(container.querySelector('button[aria-label="inline edit field"]')).toBeTruthy();
+    });
+
+    it('does not render InlineInputCell when no matching formField', () => {
+        const formFields = [{ name: 'email', type: 'text' as const }];
+        const container = renderCell({
+            value: 'Alice',
+            column: baseColumn, // name: 'name', no matching formField for 'name'
+            item: baseItem,
+            formFields,
+        });
+
+        expect(container.querySelector('button[aria-label="inline edit field"]')).toBeFalsy();
+        expect(container.textContent).toBe('Alice');
+    });
+});

package/src/tests/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/src/tests/useDataTable.test.ts

@@ -0,0 +1,464 @@
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import {useDataTable} from "../hooks/useDataTable";
+
+interface TestItem {
+    id: number;
+    name: string;
+    email: string;
+    status: string;
+    age: number;
+}
+
+const mockData: TestItem[] = [
+    { id: 1, name: 'Alice',   email: 'alice@example.com',   status: 'active',   age: 30 },
+    { id: 2, name: 'Bob',     email: 'bob@example.com',     status: 'inactive', age: 25 },
+    { id: 3, name: 'Charlie', email: 'charlie@example.com', status: 'active',   age: 35 },
+    { id: 4, name: 'Diana',   email: 'diana@example.com',   status: 'inactive', age: 28 },
+    { id: 5, name: 'Eve',     email: 'eve@example.com',     status: 'active',   age: 22 },
+];
+
+const mockPagination = {
+    currentPage: 1,
+    pageCount: 3,
+    total: 15,
+    from: 1,
+    to: 5,
+};
+
+// ─────────────────────────────────────────────
+// Mode detection
+// ─────────────────────────────────────────────
+
+describe('mode detection', () => {
+    it('is client-side when no pagination is provided', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData })
+        );
+
+        expect(result.current.pagedData).toEqual(mockData);
+    });
+
+    it('is server-side when pagination object is provided', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, pagination: mockPagination })
+        );
+
+        // Server-side returns data as-is
+        expect(result.current.pagedData).toEqual(mockData);
+        expect(result.current.paginationMeta).toEqual(mockPagination);
+    });
+});
+
+// ─────────────────────────────────────────────
+// showSearch
+// ─────────────────────────────────────────────
+
+describe('showSearch', () => {
+    it('is false by default (client-side)', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData })
+        );
+
+        expect(result.current.showSearch).toBe(false);
+    });
+
+    it('is true when clientSearchKeys is provided (client-side)', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, clientSearchKeys: ['name'] })
+        );
+
+        expect(result.current.showSearch).toBe(true);
+    });
+
+    it('is false when clientSearchKeys is empty array (client-side)', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, clientSearchKeys: [] })
+        );
+
+        expect(result.current.showSearch).toBe(false);
+    });
+
+    it('is false by default (server-side)', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, pagination: mockPagination })
+        );
+
+        expect(result.current.showSearch).toBe(false);
+    });
+
+    it('is true when onSearch is provided (server-side)', () => {
+        const { result } = renderHook(() =>
+            useDataTable({
+                data: mockData,
+                pagination: mockPagination,
+                onSearch: vi.fn(),
+            })
+        );
+
+        expect(result.current.showSearch).toBe(true);
+    });
+});
+
+// ─────────────────────────────────────────────
+// showPagination
+// ─────────────────────────────────────────────
+
+describe('showPagination', () => {
+    it('is false by default (client-side)', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData })
+        );
+
+        expect(result.current.showPagination).toBe(false);
+    });
+
+    it('is true when clientPageSize is provided (client-side)', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, clientPageSize: 2 })
+        );
+
+        expect(result.current.showPagination).toBe(true);
+    });
+
+    it('is false by default (server-side)', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, pagination: mockPagination })
+        );
+
+        expect(result.current.showPagination).toBe(false);
+    });
+
+    it('is true when onPaginate is provided (server-side)', () => {
+        const { result } = renderHook(() =>
+            useDataTable({
+                data: mockData,
+                pagination: mockPagination,
+                onPaginate: vi.fn(),
+            })
+        );
+
+        expect(result.current.showPagination).toBe(true);
+    });
+});
+
+// ─────────────────────────────────────────────
+// Client-side search
+// ─────────────────────────────────────────────
+
+describe('client-side search', () => {
+    it('returns all data when search is empty', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, clientSearchKeys: ['name'] })
+        );
+
+        expect(result.current.pagedData).toHaveLength(5);
+    });
+
+    it('filters data across multiple search keys', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, clientSearchKeys: ['name', 'email'] })
+        );
+
+        act(() => result.current.handleSearch('example.com'));
+
+        expect(result.current.pagedData).toHaveLength(5);
+    });
+
+    it('resets to page 1 when search changes', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, clientSearchKeys: ['name'], clientPageSize: 2 })
+        );
+
+        // Go to page 2
+        act(() => result.current.handlePaginate(2));
+        expect(result.current.paginationMeta?.currentPage).toBe(2);
+
+        // Search — should reset to page 1
+        act(() => result.current.handleSearch('alice'));
+        expect(result.current.paginationMeta?.currentPage).toBe(1);
+    });
+
+    it('updates currentSearch', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, clientSearchKeys: ['name'] })
+        );
+
+        act(() => result.current.handleSearch('bob'));
+
+        expect(result.current.currentSearch).toBe('bob');
+    });
+});
+
+// ─────────────────────────────────────────────
+// Client-side sort
+// ─────────────────────────────────────────────
+
+describe('client-side sort', () => {
+    it('sorts ascending by string field', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData })
+        );
+
+        act(() => result.current.handleSort({ name: 'name', direction: 'asc' }));
+
+        const names = result.current.pagedData.map((i) => i.name);
+        expect(names).toEqual([...names].sort());
+    });
+
+    it('resets sort when null is passed', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData })
+        );
+
+        act(() => result.current.handleSort({ name: 'name', direction: 'asc' }));
+        act(() => result.current.handleSort(null));
+
+        expect(result.current.currentSort).toBeNull();
+        expect(result.current.pagedData).toEqual(mockData);
+    });
+
+    it('updates currentSort', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData })
+        );
+
+        const sort = { name: 'name' as keyof TestItem, direction: 'asc' as const };
+        act(() => result.current.handleSort(sort));
+
+        expect(result.current.currentSort).toEqual(sort);
+    });
+});
+
+// ─────────────────────────────────────────────
+// Client-side pagination
+// ─────────────────────────────────────────────
+
+describe('client-side pagination', () => {
+    it('slices data for the first page', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, clientPageSize: 2 })
+        );
+
+        expect(result.current.pagedData).toHaveLength(2);
+        expect(result.current.pagedData[0].id).toBe(1);
+        expect(result.current.pagedData[1].id).toBe(2);
+    });
+
+    it('slices data for subsequent pages', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, clientPageSize: 2 })
+        );
+
+        act(() => result.current.handlePaginate(2));
+
+        expect(result.current.pagedData).toHaveLength(2);
+        expect(result.current.pagedData[0].id).toBe(3);
+        expect(result.current.pagedData[1].id).toBe(4);
+    });
+
+    it('handles last page with fewer items', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, clientPageSize: 2 })
+        );
+
+        act(() => result.current.handlePaginate(3));
+
+        expect(result.current.pagedData).toHaveLength(1);
+        expect(result.current.pagedData[0].id).toBe(5);
+    });
+
+    it('calculates paginationMeta correctly', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, clientPageSize: 2 })
+        );
+
+        expect(result.current.paginationMeta).toEqual({
+            currentPage: 1,
+            pageCount: 3,
+            total: 5,
+            from: 1,
+            to: 2,
+        });
+    });
+
+    it('updates paginationMeta on page change', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, clientPageSize: 2 })
+        );
+
+        act(() => result.current.handlePaginate(2));
+
+        expect(result.current.paginationMeta?.currentPage).toBe(2);
+        expect(result.current.paginationMeta?.from).toBe(3);
+        expect(result.current.paginationMeta?.to).toBe(4);
+    });
+
+    it('returns all data when clientPageSize is not set', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData })
+        );
+
+        expect(result.current.pagedData).toHaveLength(5);
+    });
+});
+
+// ─────────────────────────────────────────────
+// Server-side delegation
+// ─────────────────────────────────────────────
+
+describe('server-side delegation', () => {
+    it('delegates search to onSearch callback', () => {
+        const onSearch = vi.fn();
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, pagination: mockPagination, onSearch })
+        );
+
+        act(() => result.current.handleSearch('alice'));
+
+        expect(onSearch).toHaveBeenCalledWith('alice');
+        expect(onSearch).toHaveBeenCalledTimes(1);
+    });
+
+    it('delegates sort to onSort callback', () => {
+        const onSort = vi.fn();
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, pagination: mockPagination, onSort })
+        );
+
+        const sort = { name: 'name' as keyof TestItem, direction: 'asc' as const };
+        act(() => result.current.handleSort(sort));
+
+        expect(onSort).toHaveBeenCalledWith(sort);
+        expect(onSort).toHaveBeenCalledTimes(1);
+    });
+
+    it('delegates null sort to onSort callback', () => {
+        const onSort = vi.fn();
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, pagination: mockPagination, onSort })
+        );
+
+        act(() => result.current.handleSort(null));
+
+        expect(onSort).toHaveBeenCalledWith(null);
+    });
+
+    it('delegates pagination to onPaginate callback', () => {
+        const onPaginate = vi.fn();
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, pagination: mockPagination, onPaginate })
+        );
+
+        act(() => result.current.handlePaginate(2));
+
+        expect(onPaginate).toHaveBeenCalledWith(2);
+        expect(onPaginate).toHaveBeenCalledTimes(1);
+    });
+
+    it('returns data as-is without filtering', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, pagination: mockPagination })
+        );
+
+        expect(result.current.pagedData).toEqual(mockData);
+    });
+
+    it('returns server pagination meta as-is', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, pagination: mockPagination })
+        );
+
+        expect(result.current.paginationMeta).toEqual(mockPagination);
+    });
+
+    it('uses controlled searchValue for currentSearch', () => {
+        const { result } = renderHook(() =>
+            useDataTable({
+                data: mockData,
+                pagination: mockPagination,
+                onSearch: vi.fn(),
+                searchValue: 'alice',
+            })
+        );
+
+        expect(result.current.currentSearch).toBe('alice');
+    });
+
+    it('uses controlled sortValue for currentSort', () => {
+        const sort = { name: 'name' as keyof TestItem, direction: 'asc' as const };
+        const { result } = renderHook(() =>
+            useDataTable({
+                data: mockData,
+                pagination: mockPagination,
+                onSort: vi.fn(),
+                sortValue: sort,
+            })
+        );
+
+        expect(result.current.currentSort).toEqual(sort);
+    });
+
+    it('does not filter data client-side even when clientSearchKeys is set', () => {
+        const onSearch = vi.fn();
+        const { result } = renderHook(() =>
+            useDataTable({
+                data: mockData,
+                pagination: mockPagination,
+                onSearch,
+                clientSearchKeys: ['name'],
+            })
+        );
+
+        act(() => result.current.handleSearch('alice'));
+
+        // Data should not be filtered locally
+        expect(result.current.pagedData).toHaveLength(5);
+        // Callback should be called instead
+        expect(onSearch).toHaveBeenCalledWith('alice');
+    });
+});
+
+// ─────────────────────────────────────────────
+// Edge cases
+// ─────────────────────────────────────────────
+
+describe('edge cases', () => {
+    it('handles empty data array', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: [] })
+        );
+
+        expect(result.current.pagedData).toEqual([]);
+    });
+
+    it('handles empty data with pagination', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: [], clientPageSize: 20 })
+        );
+
+        expect(result.current.pagedData).toHaveLength(0);
+        expect(result.current.paginationMeta?.total).toBe(0);
+        expect(result.current.paginationMeta?.pageCount).toBe(0);
+    });
+
+    it('handles clientPageSize larger than dataset', () => {
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData, clientPageSize: 100 })
+        );
+
+        expect(result.current.pagedData).toHaveLength(5);
+        expect(result.current.paginationMeta?.pageCount).toBe(1);
+    });
+
+    it('does not mutate original data when sorting', () => {
+        const originalData = [...mockData];
+        const { result } = renderHook(() =>
+            useDataTable({ data: mockData })
+        );
+
+        act(() => result.current.handleSort({ name: 'name', direction: 'desc' }));
+
+        expect(mockData).toEqual(originalData);
+    });
+});

package/src/types/data-table-props.d.ts

@@ -29,4 +29,24 @@ export interface DataTableProps<T extends { id: string | number }> {
     striped?: boolean,
     hover?: boolean,
     style?: CSSProperties,
+}
+
+export interface DataTableControlsProps {
+    currentSearch?: string | null;
+    handleSearch: (query: string) => void;
+    entity?: Entity
+}
+
+export interface BooleanCellProps<T extends { id: number | string }> {
+    item: T;
+    column: Column<T>;
+    value: T[keyof T];
+    updateData?: (id: string | number, values: Partial<T>) => void;
+}
+
+export interface InlineInputCellProps<T extends { id: string | number }> {
+    formField: FormField;
+    item: T;
+    value: T[keyof T];
+    updateData?: (id: string | number, values: Partial<T>) => void;
 }

package/src/types/render-value-props.d.ts

@@ -0,0 +1,7 @@
+export interface RenderValueProps <T extends { id: string | number }> {
+    value: T[keyof T];
+    column: Column<T>;
+    item: T;
+    formFields?: FormField[];
+    updateData?: (id: (string | number), values: Partial<T>) => void;
+}

package/src/utils/render-value.tsx

@@ -1,4 +1,4 @@
-import {Column, FormField} from "../types";
+import {FormField} from "../types";
 import {EmptyCell} from "../components/cell-types/EmptyCell";
 import {BooleanCell} from "../components/cell-types/BooleanCell";
 import {Link, Pill} from "@sio-group/ui-core";
@@ -6,14 +6,7 @@ import {renderObject} from "./render-object";
 import {DateCell} from "../components/cell-types/DateCell";
 import {isPillValue} from "./is-pill-value";
 import {InlineInputCell} from "../components/cell-types/InlineInputCell";
-
-interface RenderValueProps <T extends { id: string | number }> {
-    value: T[keyof T];
-    column: Column<T>;
-    item: T;
-    formFields?: FormField[];
-    updateData?: (id: (string | number), values: Partial<T>) => void;
-}
+import {RenderValueProps} from "../types/render-value-props";
 
 export const renderValue = <T extends { id: string | number }> ({value, column, item, formFields, updateData}: RenderValueProps<T>) => {
     const formatKey: string | undefined = typeof column.format === 'object' ? column.format.key : undefined;
@@ -22,7 +15,6 @@ export const renderValue = <T extends { id: string | number }> ({value, column,
     if (formField) {
         return (
             <InlineInputCell
-                column={column}
                 value={value}
                 item={item}
                 formField={formField}
@@ -49,7 +41,7 @@ export const renderValue = <T extends { id: string | number }> ({value, column,
         return (
             <DateCell
                 column={column}
-                value={value}
+                value={String(value)}
             />
         );
     }

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/index.ts","./src/hooks/usedatatable.ts","./src/types/action-cell-props.d.ts","./src/types/action-menu.d.ts","./src/types/column.d.ts","./src/types/data-table-body-props.d.ts","./src/types/data-table-header-props.d.ts","./src/types/data-table-props.d.ts","./src/types/entity.d.ts","./src/types/form-field.d.ts","./src/types/index.ts","./src/types/pagination-meta.d.ts","./src/types/render-value-props.d.ts","./src/types/sort-state.d.ts","./src/types/table-cell-props.d.ts","./src/types/use-data-table-props.d.ts","./src/types/use-data-table-return.d.ts","./src/utils/is-pill-value.ts","./src/components/actioncell.tsx","./src/components/datatable.tsx","./src/components/datatablebody.tsx","./src/components/datatablecontrols.tsx","./src/components/datatableheader.tsx","./src/components/defaultsorticon.tsx","./src/components/tablecell.tsx","./src/components/cell-types/booleancell.tsx","./src/components/cell-types/datecell.tsx","./src/components/cell-types/emptycell.tsx","./src/components/cell-types/inlineinputcell.tsx","./src/utils/render-object.tsx","./src/utils/render-value.tsx"],"errors":true,"version":"5.9.3"}

package/vitest.config.ts

@@ -4,6 +4,6 @@ export default defineConfig({
     test: {
         environment: "jsdom",
         globals: true,
-        //setupFiles: "./test/setup.ts"
+        setupFiles: "./src/tests/setup.ts"
     }
 });