@nova-design-system/nova-vue 3.19.0 → 3.21.0

package/README.md

@@ -2,26 +2,6 @@
 
 **Nova Components Vue** provides an easy way to use [Nova’s native Web Components](https://www.npmjs.com/package/@nova-design-system/nova-webcomponents) within your Vue applications.
 
-- [Nova Components Vue](#nova-components-vue)
-  - [Key Features](#key-features)
-  - [Installation](#installation)
-  - [Setting up Tailwind](#setting-up-tailwind)
-    - [About Tailwind and the Nova Plugin](#about-tailwind-and-the-nova-plugin)
-    - [1. Install Tailwind CSS and the Vite Plugin](#1-install-tailwind-css-and-the-vite-plugin)
-    - [2. Configure the Vite Plugin](#2-configure-the-vite-plugin)
-    - [3. Create `tailwind.config.ts`](#3-create-tailwindconfigts)
-    - [4. Configure Tailwind and Nova Plugin in `main.css`](#4-configure-tailwind-and-nova-plugin-in-maincss)
-    - [5. Register NovaComponents and include the Nova Tokens](#5-register-novacomponents-and-include-the-nova-tokens)
-    - [6. Use Nova Components with Tailwind Utilities](#6-use-nova-components-with-tailwind-utilities)
-    - [7. Setup the Nova Font](#7-setup-the-nova-font)
-    - [Creating Your Own Style Components with Tailwind](#creating-your-own-style-components-with-tailwind)
-  - [Nova Font Pro Integration](#nova-font-pro-integration)
-    - [Option 1: Import in Global CSS (Recommended)](#option-1-import-in-global-css-recommended)
-    - [Option 2: HTML Integration](#option-2-html-integration)
-
-
----
-
 ## Key Features
 
 - **Lightweight Integration**: Leverage Nova Web Components with minimal configuration in Vue.

package/dist/components/NvDatatable.d.ts

@@ -1,4 +1,5 @@
 import { type VNode, type PropType } from 'vue';
+import { type SortingState } from '@tanstack/vue-table';
 /**
  * Creates a typed NvDatatable component for a specific row type. This is the
  * standard approach for generic components in Vue.
@@ -6,9 +7,9 @@ import { type VNode, type PropType } from 'vue';
  * @returns {component} A Vue component definition typed for the specified row
  * type.
  */
-export declare function createNvDatatable<T extends NvDatatableRow>(): import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+export declare function createNvDatatable<T>(): import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     columns: {
-        type: PropType<NvDatatableColumn<T>[]>;
+        type: PropType<NvDatatableColumn<T, keyof T, T[keyof T]>[]>;
         required: true;
         default: () => any[];
     };
@@ -21,6 +22,10 @@ export declare function createNvDatatable<T extends NvDatatableRow>(): import("v
         type: PropType<NvDatatablePaginationConfig>;
         default: any;
     };
+    sorting: {
+        type: PropType<NvDatatableSortingConfig>;
+        default: any;
+    };
     renderPagination: {
         type: PropType<(api: NvDatatableRenderPaginationAPI) => VNode>;
         default: any;
@@ -33,7 +38,7 @@ export declare function createNvDatatable<T extends NvDatatableRow>(): import("v
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     columns: {
-        type: PropType<NvDatatableColumn<T>[]>;
+        type: PropType<NvDatatableColumn<T, keyof T, T[keyof T]>[]>;
         required: true;
         default: () => any[];
     };
@@ -46,6 +51,10 @@ export declare function createNvDatatable<T extends NvDatatableRow>(): import("v
         type: PropType<NvDatatablePaginationConfig>;
         default: any;
     };
+    sorting: {
+        type: PropType<NvDatatableSortingConfig>;
+        default: any;
+    };
     renderPagination: {
         type: PropType<(api: NvDatatableRenderPaginationAPI) => VNode>;
         default: any;
@@ -55,95 +64,92 @@ export declare function createNvDatatable<T extends NvDatatableRow>(): import("v
         default: boolean;
     };
 }>> & Readonly<{}>, {
-    columns: NvDatatableColumn<T>[];
+    columns: NvDatatableColumn<T, keyof T, T[keyof T]>[];
     rows: T[];
     pagination: NvDatatablePaginationConfig;
+    sorting: NvDatatableSortingConfig;
     renderPagination: (api: NvDatatableRenderPaginationAPI) => VNode;
     stickyHeader: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/********************************* UTILS **************************************/
 /**
- * Default NvDatatable component with basic row type.
- * For typed usage, use createNvDatatable<YourRowType>().
+ * Creates a strongly-typed column factory for a given row type.
+ *
+ * @template Row The row data type (e.g., `Product`)
+ *
+ * @returns {function} A function that accepts a column definition and infers:
+ * - `K` as the field key (`keyof Row`)
+ * - `F` as the return type of `valueFormatter` (defaults to `Row[K]`)
+ *
+ * @example
+ * ```ts
+ * // Define your row type
+ * interface Product {
+ *   name: string;
+ *   price: number;
+ * }
+ *
+ * const col = makeColumn<Product>();
  */
-export declare const NvDatatable: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    columns: {
-        type: PropType<NvDatatableColumn<NvDatatableRow>[]>;
-        required: true;
-        default: () => any[];
-    };
-    rows: {
-        type: PropType<NvDatatableRow[]>;
-        required: true;
-        default: () => any[];
-    };
-    pagination: {
-        type: PropType<NvDatatablePaginationConfig>;
-        default: any;
-    };
-    renderPagination: {
-        type: PropType<(api: NvDatatableRenderPaginationAPI) => VNode>;
-        default: any;
-    };
-    stickyHeader: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    columns: {
-        type: PropType<NvDatatableColumn<NvDatatableRow>[]>;
-        required: true;
-        default: () => any[];
-    };
-    rows: {
-        type: PropType<NvDatatableRow[]>;
-        required: true;
-        default: () => any[];
-    };
-    pagination: {
-        type: PropType<NvDatatablePaginationConfig>;
-        default: any;
-    };
-    renderPagination: {
-        type: PropType<(api: NvDatatableRenderPaginationAPI) => VNode>;
-        default: any;
-    };
-    stickyHeader: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    columns: NvDatatableColumn<NvDatatableRow>[];
-    rows: NvDatatableRow[];
-    pagination: NvDatatablePaginationConfig;
-    renderPagination: (api: NvDatatableRenderPaginationAPI) => VNode;
-    stickyHeader: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare function makeColumn<Row>(): <K extends keyof Row, F = Row[K]>(col: NvDatatableColumn<Row, K, F>) => NvDatatableColumn<Row, keyof Row, Row[keyof Row]>;
 /********************************* TYPES **************************************/
 /**
- * Type definition for a datatable row.
+ * Slot props for NvDatatable cell slots.
+ * Use this type to provide type safety for custom cell slot implementations.
+ *
+ * @template Row The row data type
+ * @template K The field key (keyof Row)
+ * @template F The formatted value type (defaults to Row[K])
+ *
+ * @example
+ * ```ts
+ * type PersonRow = {
+ *   id: number;
+ *   isActive: boolean;
+ * };
+ *
+ * // For a column with valueFormatter that returns string
+ * type StatusSlotProps = NvDatatableSlotProps<PersonRow, 'isActive', string>;
+ *
+ * // For a column without valueFormatter (uses raw value)
+ * type IdSlotProps = NvDatatableSlotProps<PersonRow, 'id', number>;
+ * ```
  */
-export type NvDatatableRow = Record<string, string | number | boolean | null | undefined | typeof Date>;
+export interface NvDatatableSlotProps<Row, K extends keyof Row = keyof Row, F = Row[K]> {
+    /** The cell value (formatted if valueFormatter was used) */
+    value: F;
+    /** The full row data */
+    row: Row;
+    /** The field name */
+    field: K;
+    /** The row index (zero-based) */
+    rowIndex: number;
+}
 /**
- * Parameters for custom cell rendering function.
+ * Props for NvDatatable component.
  */
-export interface NvTableRenderCellParams<T extends NvDatatableRow, V> {
-    /** Cell value */
-    value: V;
+export interface NvDatatableProps<T> {
+    /** Column definitions */
+    columns: Array<NvDatatableColumn<T>>;
     /** Row data */
-    row: T;
-    /** Field name */
-    field: keyof T;
-    /** Row index */
-    rowIndex: number;
+    rows: Array<T>;
+    /** Optional pagination configuration */
+    pagination?: NvDatatablePaginationConfig;
+    /** Optional render function for custom pagination UI */
+    renderPagination?: (api: NvDatatableRenderPaginationAPI) => VNode;
+    /** Should the header stick to the top of the table when scrolling? */
+    stickyHeader?: boolean;
+    /** CSS class */
+    class?: string;
+    /** Inline styles */
+    style?: string | Record<string, string>;
 }
 /**
  * Column definition for NvDatatable.
  */
-export interface NvDatatableColumn<T extends NvDatatableRow> {
+export interface NvDatatableColumn<Row, K extends keyof Row = keyof Row, F = Row[K]> {
     /** Field name from row data */
-    field: keyof T;
+    field: K;
     /** Display name for column header */
     headerName?: string;
     /** Column width in pixels */
@@ -152,27 +158,44 @@ export interface NvDatatableColumn<T extends NvDatatableRow> {
     resizable?: boolean;
     /** Whether column is hidden */
     hidden?: boolean;
+    /** Transform the raw value before rendering. Receives the cell value and full row object. */
+    valueFormatter?: (params: NvTableValueFormatterParams<Row, Row[K], K>) => F;
     /** Custom cell renderer */
-    renderCell?: (params: NvTableRenderCellParams<T, T[keyof T]>) => VNode | string | number;
+    renderCell?: (params: NvTableRenderCellParams<Row, F, K>) => VNode | string | number;
+    /** Enable/disable sorting for this column */
+    sortable?: boolean;
+    /** Custom sorting function or built-in function name */
+    sortingFn?: ((rowA: any, rowB: any, columnId: string) => number) | string;
+    /** Start with descending sort for this column */
+    sortDescFirst?: boolean;
+    /** Invert the sort order (useful for rankings) */
+    invertSorting?: boolean;
+    /** Where to place undefined values in sort */
+    sortUndefined?: 'first' | 'last' | false | -1 | 1;
 }
 /**
- * Props for NvDatatable component.
+ * Parameters for custom cell rendering function.
  */
-export interface NvDatatableProps<T extends NvDatatableRow> {
-    /** Column definitions */
-    columns: Array<NvDatatableColumn<T>>;
+export interface NvTableRenderCellParams<Row, Value, Field> {
+    /** Cell value */
+    value: Value;
     /** Row data */
-    rows: Array<T>;
-    /** Optional pagination configuration */
-    pagination?: NvDatatablePaginationConfig;
-    /** Optional render function for custom pagination UI */
-    renderPagination?: (api: NvDatatableRenderPaginationAPI) => VNode;
-    /** Should the header stick to the top of the table when scrolling? */
-    stickyHeader?: boolean;
-    /** CSS class */
-    class?: string;
-    /** Inline styles */
-    style?: string | Record<string, string>;
+    row: Row;
+    /** Field name */
+    field: Field;
+    /** Row index */
+    rowIndex: number;
+}
+/**
+ * Parameters for valueFormatter function.
+ */
+export interface NvTableValueFormatterParams<Row, Value, Field> {
+    /** Cell original value */
+    value: Value;
+    /** Row data */
+    row: Row;
+    /** Field name */
+    field: Field;
 }
 /**
  * Pagination configuration for NvDatatable.
@@ -238,3 +261,27 @@ export interface NvDatatableRenderPaginationAPI {
     /** Whether more items are available (only for infinite scroll) */
     hasMore?: boolean;
 }
+/**
+ * Sorting configuration for NvDatatable.
+ * Supports both client-side and server-side sorting.
+ */
+export interface NvDatatableSortingConfig {
+    /** Sorting mode */
+    mode: 'client' | 'server';
+    /** Enable multi-column sorting with Shift+Click */
+    enableMultiSort?: boolean;
+    /** Allow cycling through to "no sort" state */
+    enableSortingRemoval?: boolean;
+    /** Maximum number of columns for multi-sort */
+    maxMultiSortColCount?: number;
+    /** Start with descending sort as first toggle state */
+    sortDescFirst?: boolean;
+    /** Controlled sort state (for server-side sorting) */
+    sortState?: SortingState;
+    /** Callback when sorting changes (for server-side sorting) */
+    onSortingChange?: (sorting: SortingState) => void;
+}
+/**
+ * Sorting state type - array of sort descriptors
+ */
+export type NvDataTableSortingState = SortingState;

package/dist/components/NvDatatable.js

@@ -1,7 +1,7 @@
 /* eslint-disable jsdoc/require-jsdoc */
 import { defineComponent, computed, h, ref, watch, watchEffect, onUnmounted, } from 'vue';
-import { useVueTable, getCoreRowModel, getPaginationRowModel, } from '@tanstack/vue-table';
-import { NvTable } from '../generated/components';
+import { useVueTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, } from '@tanstack/vue-table';
+import { NvTable, NvTableheader } from '../generated/components';
 /**
  * Creates a typed NvDatatable component for a specific row type. This is the
  * standard approach for generic components in Vue.
@@ -27,6 +27,10 @@ export function createNvDatatable() {
                 type: Object,
                 default: undefined,
             },
+            sorting: {
+                type: Object,
+                default: undefined,
+            },
             renderPagination: {
                 type: Function,
                 default: undefined,
@@ -42,59 +46,75 @@ export function createNvDatatable() {
                 pageIndex: 0,
                 pageSize: props.pagination?.initialPageSize || 10,
             });
+            // Sorting state (controlled or uncontrolled)
+            const sortingState = ref(props.sorting?.sortState || []);
             // Ref for observing last row (infinite scroll)
             const lastRowRef = ref(null);
             const tableColumns = computed(() => props.columns
                 .filter((col) => !col.hidden)
-                .map((col) => ({
-                accessorKey: col.field,
-                header: col.headerName || String(col.field),
-                size: col.width,
-                enableResizing: col.resizable ?? true,
-                cell: (context) => {
-                    const value = context.getValue();
-                    const row = context.row.original;
-                    const rowIndex = context.row.index;
-                    const field = col.field;
-                    // Priority: slot > renderCell > default
-                    // Sanitize field name to ensure valid HTML attribute name
-                    // Replace invalid characters (anything not a-z, A-Z, 0-9, -, _) with underscore
-                    const sanitizedField = String(field).replace(/[^a-zA-Z0-9_-]/g, '_');
-                    const slotName = `cell-${sanitizedField}`;
-                    if (slots[slotName]) {
-                        return slots[slotName]({ value, row, field, rowIndex });
-                    }
-                    // Use custom renderCell if provided
-                    if (col.renderCell) {
-                        return col.renderCell({
-                            value,
-                            row,
-                            field,
-                            rowIndex,
-                        });
-                    }
-                    // Default rendering
-                    return value;
-                },
-            })));
-            // Create table instance based on pagination mode
-            // Client-side pagination needs direct config, server-side needs reactive config
-            let table;
-            if (!props.pagination || props.pagination.mode === 'infinite') {
-                // No pagination or infinite scroll - simple config
-                table = useVueTable({
-                    get data() {
-                        return computed(() => props.rows);
-                    },
-                    get columns() {
-                        return tableColumns.value;
+                .map((col) => {
+                const columnDef = {
+                    accessorKey: col.field,
+                    accessorFn: col.valueFormatter
+                        ? (row) => {
+                            const rawValue = row[col.field];
+                            return col.valueFormatter({
+                                value: rawValue,
+                                row,
+                                field: col.field,
+                            });
+                        }
+                        : undefined,
+                    header: col.headerName || String(col.field),
+                    size: col.width,
+                    enableResizing: col.resizable ?? true,
+                    // Sorting configuration
+                    enableSorting: props.sorting ? col.sortable ?? true : false,
+                    cell: (context) => {
+                        const value = context.getValue();
+                        const row = context.row.original;
+                        const rowIndex = context.row.index;
+                        const field = col.field;
+                        // Priority: slot > renderCell > default
+                        // Sanitize field name to ensure valid HTML attribute name
+                        // Replace invalid characters (anything not a-z, A-Z, 0-9, -, _) with underscore
+                        const sanitizedField = String(field).replace(/[^a-zA-Z0-9_-]/g, '_');
+                        const slotName = `cell-${sanitizedField}`;
+                        if (slots[slotName]) {
+                            return slots[slotName]({ value, row, field, rowIndex });
+                        }
+                        // Use custom renderCell if provided
+                        if (col.renderCell) {
+                            return col.renderCell({
+                                value,
+                                row,
+                                field,
+                                rowIndex,
+                            });
+                        }
+                        // Default rendering
+                        return value;
                     },
-                    getCoreRowModel: getCoreRowModel(),
-                });
-            }
-            else if (props.pagination.mode === 'client') {
-                // Client-side pagination - table manages its own state
-                table = useVueTable({
+                };
+                // Add optional sorting properties only if defined
+                if (col.sortingFn !== undefined) {
+                    // @ts-expect-error - TanStack typing is strict but this works at runtime
+                    columnDef.sortingFn = col.sortingFn;
+                }
+                if (col.sortDescFirst !== undefined) {
+                    columnDef.sortDescFirst = col.sortDescFirst;
+                }
+                if (col.invertSorting !== undefined) {
+                    columnDef.invertSorting = col.invertSorting;
+                }
+                if (col.sortUndefined !== undefined) {
+                    columnDef.sortUndefined = col.sortUndefined;
+                }
+                return columnDef;
+            }));
+            // Determine base table configuration with sorting
+            const getBaseTableConfig = () => {
+                const baseConfig = {
                     get data() {
                         return computed(() => props.rows);
                     },
@@ -102,54 +122,103 @@ export function createNvDatatable() {
                         return tableColumns.value;
                     },
                     getCoreRowModel: getCoreRowModel(),
-                    getPaginationRowModel: getPaginationRowModel(),
-                    initialState: {
-                        pagination: {
-                            pageIndex: 0,
-                            pageSize: props.pagination.initialPageSize || 10,
+                    // Sorting configuration
+                    ...(props.sorting && {
+                        get state() {
+                            return {
+                                sorting: props.sorting.mode === 'server' && props.sorting.sortState
+                                    ? props.sorting.sortState
+                                    : sortingState.value,
+                            };
                         },
-                    },
-                });
-            }
-            else {
-                // Server-side pagination - manual pagination with reactive state
-                table = useVueTable({
-                    get data() {
-                        return computed(() => props.rows);
-                    },
-                    get columns() {
-                        return tableColumns.value;
-                    },
-                    getCoreRowModel: getCoreRowModel(),
-                    manualPagination: true,
-                    get pageCount() {
-                        if (!props.pagination || props.pagination.mode !== 'server') {
+                        onSortingChange: (updaterOrValue) => {
+                            const currentSort = props.sorting.mode === 'server' && props.sorting.sortState
+                                ? props.sorting.sortState
+                                : sortingState.value;
+                            const newSort = typeof updaterOrValue === 'function'
+                                ? updaterOrValue(currentSort)
+                                : updaterOrValue;
+                            // Always update internal state for reactivity
+                            sortingState.value = newSort;
+                            // For server-side sorting, also call the callback
+                            if (props.sorting?.mode === 'server' &&
+                                props.sorting.onSortingChange) {
+                                props.sorting.onSortingChange(newSort);
+                            }
+                        },
+                        manualSorting: props.sorting.mode === 'server',
+                        enableSorting: true,
+                        enableMultiSort: props.sorting.enableMultiSort ?? false,
+                        enableSortingRemoval: props.sorting.enableSortingRemoval ?? true,
+                        maxMultiSortColCount: props.sorting.maxMultiSortColCount,
+                        sortDescFirst: props.sorting.sortDescFirst ?? false,
+                        // When multi-sort is enabled, treat all clicks as multi-sort events
+                        isMultiSortEvent: props.sorting.enableMultiSort
+                            ? () => true
+                            : undefined,
+                        getSortedRowModel: props.sorting.mode === 'client' ? getSortedRowModel() : undefined,
+                    }),
+                };
+                return baseConfig;
+            };
+            // Create reactive table instance based on pagination mode
+            const table = computed(() => {
+                const baseConfig = getBaseTableConfig();
+                if (!props.pagination || props.pagination.mode === 'infinite') {
+                    // No pagination or infinite scroll - simple config
+                    return useVueTable(baseConfig);
+                }
+                else if (props.pagination.mode === 'client') {
+                    // Client-side pagination - table manages its own state
+                    return useVueTable({
+                        ...baseConfig,
+                        getPaginationRowModel: getPaginationRowModel(),
+                        initialState: {
+                            pagination: {
+                                pageIndex: 0,
+                                pageSize: props.pagination.initialPageSize || 10,
+                            },
+                        },
+                    });
+                }
+                else {
+                    // Server-side pagination - manual pagination with reactive state
+                    return useVueTable({
+                        ...baseConfig,
+                        manualPagination: true,
+                        get pageCount() {
+                            if (!props.pagination || props.pagination.mode !== 'server') {
+                                return -1;
+                            }
+                            const pageSize = paginationState.value.pageSize;
+                            if (props.pagination.totalPageCount !== undefined) {
+                                return props.pagination.totalPageCount;
+                            }
+                            else if (props.pagination.totalRowCount !== undefined) {
+                                return Math.ceil(props.pagination.totalRowCount / pageSize);
+                            }
                             return -1;
-                        }
-                        const pageSize = paginationState.value.pageSize;
-                        if (props.pagination.totalPageCount !== undefined) {
-                            return props.pagination.totalPageCount;
-                        }
-                        else if (props.pagination.totalRowCount !== undefined) {
-                            return Math.ceil(props.pagination.totalRowCount / pageSize);
-                        }
-                        return -1;
-                    },
-                    get state() {
-                        return {
-                            pagination: paginationState.value,
-                        };
-                    },
-                    onPaginationChange: (updaterOrValue) => {
-                        if (typeof updaterOrValue === 'function') {
-                            paginationState.value = updaterOrValue(paginationState.value);
-                        }
-                        else {
-                            paginationState.value = updaterOrValue;
-                        }
-                    },
-                });
-            }
+                        },
+                        get state() {
+                            const sortState = baseConfig.state
+                                ? baseConfig.state.sorting
+                                : undefined;
+                            return {
+                                pagination: paginationState.value,
+                                ...(sortState !== undefined && { sorting: sortState }),
+                            };
+                        },
+                        onPaginationChange: (updaterOrValue) => {
+                            if (typeof updaterOrValue === 'function') {
+                                paginationState.value = updaterOrValue(paginationState.value);
+                            }
+                            else {
+                                paginationState.value = updaterOrValue;
+                            }
+                        },
+                    });
+                }
+            });
             // Handle pagination changes for server mode
             watch(paginationState, (newState) => {
                 if (props.pagination?.mode === 'server' &&
@@ -205,8 +274,8 @@ export function createNvDatatable() {
                 if (!props.pagination) {
                     return null;
                 }
-                const tablePaginationState = table.getState().pagination;
-                const pageCount = table.getPageCount();
+                const tablePaginationState = table.value.getState().pagination;
+                const pageCount = table.value.getPageCount();
                 const rowCount = props.pagination.mode === 'server'
                     ? props.pagination.totalRowCount || props.rows.length
                     : props.rows.length;
@@ -215,14 +284,14 @@ export function createNvDatatable() {
                     pageSize: tablePaginationState.pageSize,
                     pageCount,
                     rowCount,
-                    firstPage: () => table.setPageIndex(0),
-                    previousPage: () => table.previousPage(),
-                    nextPage: () => table.nextPage(),
-                    lastPage: () => table.setPageIndex(pageCount - 1),
-                    setPageIndex: (index) => table.setPageIndex(index),
-                    setPageSize: (size) => table.setPageSize(size),
-                    canPreviousPage: table.getCanPreviousPage(),
-                    canNextPage: table.getCanNextPage(),
+                    firstPage: () => table.value.setPageIndex(0),
+                    previousPage: () => table.value.previousPage(),
+                    nextPage: () => table.value.nextPage(),
+                    lastPage: () => table.value.setPageIndex(pageCount - 1),
+                    setPageIndex: (index) => table.value.setPageIndex(index),
+                    setPageSize: (size) => table.value.setPageSize(size),
+                    canPreviousPage: table.value.getCanPreviousPage(),
+                    canNextPage: table.value.getCanNextPage(),
                     isLoading: props.pagination.mode === 'infinite'
                         ? props.pagination.isLoading
                         : undefined,
@@ -232,7 +301,7 @@ export function createNvDatatable() {
                 };
             });
             return () => {
-                const tableRows = table.getRowModel().rows;
+                const tableRows = table.value.getRowModel().rows;
                 const isInfiniteScroll = props.pagination?.mode === 'infinite';
                 const tableElement = h(NvTable, attrs, {
                     default: () => [
@@ -240,25 +309,44 @@ export function createNvDatatable() {
                             h('thead', {
                                 'data-sticky-top': props.stickyHeader ? 'true' : undefined,
                             }, [
-                                ...table.getHeaderGroups().map((headerGroup) => h('tr', { key: headerGroup.id }, [
-                                    ...headerGroup.headers.map((header) => h('th', {
-                                        key: header.id,
-                                        'data-testid': `datatable-header-${header.id}`,
-                                        style: {
-                                            width: header.column.columnDef.size
-                                                ? `${header.column.columnDef.size}px`
-                                                : undefined,
-                                        },
-                                        'data-no-resize': header.column.columnDef
-                                            .enableResizing
+                                ...table.value.getHeaderGroups().map((headerGroup) => h('tr', { key: headerGroup.id }, [
+                                    ...headerGroup.headers.map((header) => {
+                                        const canSort = header.column.getCanSort();
+                                        const sortDirection = header.column.getIsSorted();
+                                        return h('th', {
+                                            key: header.id,
+                                            'data-testid': `datatable-header-${header.id}`,
+                                            style: {
+                                                width: header.column.columnDef.size
+                                                    ? `${header.column.columnDef.size}px`
+                                                    : undefined,
+                                            },
+                                            'data-no-resize': header.column.columnDef
+                                                .enableResizing
+                                                ? null
+                                                : true,
+                                        }, header.isPlaceholder
                                             ? null
-                                            : true,
-                                    }, header.isPlaceholder
-                                        ? null
-                                        : typeof header.column.columnDef.header ===
-                                            'function'
-                                            ? header.column.columnDef.header(header.getContext())
-                                            : header.column.columnDef.header)),
+                                            : canSort
+                                                ? h(NvTableheader, {
+                                                    sortable: true,
+                                                    sortDirection: sortDirection || 'none',
+                                                    onSortDirectionChanged: (event) => {
+                                                        // Call the TanStack handler
+                                                        const handler = header.column.getToggleSortingHandler();
+                                                        handler?.(event);
+                                                    },
+                                                }, {
+                                                    default: () => typeof header.column.columnDef.header ===
+                                                        'function'
+                                                        ? header.column.columnDef.header(header.getContext())
+                                                        : header.column.columnDef.header,
+                                                })
+                                                : typeof header.column.columnDef.header ===
+                                                    'function'
+                                                    ? header.column.columnDef.header(header.getContext())
+                                                    : header.column.columnDef.header);
+                                    }),
                                 ])),
                             ]),
                             h('tbody', {}, [
@@ -266,12 +354,12 @@ export function createNvDatatable() {
                                     const isLastRow = isInfiniteScroll && index === tableRows.length - 1;
                                     return h('tr', {
                                         key: row.id,
-                                        'data-testid': `datatable-row-${row.id}`,
+                                        'data-testid': `datatable-row-${index}`,
                                         ref: isLastRow ? lastRowRef : undefined,
                                     }, [
                                         ...row.getVisibleCells().map((cell) => h('td', {
                                             key: cell.id,
-                                            'data-testid': `datatable-cell-${cell.id}`,
+                                            'data-testid': `datatable-cell-${cell.column.id}`,
                                         }, typeof cell.column.columnDef.cell === 'function'
                                             ? cell.column.columnDef.cell(cell.getContext())
                                             : cell.getValue())),
@@ -304,8 +392,28 @@ export function createNvDatatable() {
         },
     });
 }
+/********************************* UTILS **************************************/
 /**
- * Default NvDatatable component with basic row type.
- * For typed usage, use createNvDatatable<YourRowType>().
+ * Creates a strongly-typed column factory for a given row type.
+ *
+ * @template Row The row data type (e.g., `Product`)
+ *
+ * @returns {function} A function that accepts a column definition and infers:
+ * - `K` as the field key (`keyof Row`)
+ * - `F` as the return type of `valueFormatter` (defaults to `Row[K]`)
+ *
+ * @example
+ * ```ts
+ * // Define your row type
+ * interface Product {
+ *   name: string;
+ *   price: number;
+ * }
+ *
+ * const col = makeColumn<Product>();
  */
-export const NvDatatable = createNvDatatable();
+export function makeColumn() {
+    return function define(col) {
+        return col;
+    };
+}

package/dist/generated/components.d.ts

@@ -62,6 +62,7 @@ export declare const NvRow: import("vue").DefineSetupFnComponent<JSX.NvRow & imp
 export declare const NvSplit: import("vue").DefineSetupFnComponent<JSX.NvSplit & import("./vue-component-lib/utils").InputProps<number[]>, {}, {}, JSX.NvSplit & import("./vue-component-lib/utils").InputProps<number[]> & {}, import("vue").PublicProps>;
 export declare const NvStack: import("vue").DefineSetupFnComponent<JSX.NvStack & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvStack & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvTable: import("vue").DefineSetupFnComponent<JSX.NvTable & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvTable & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const NvTableheader: import("vue").DefineSetupFnComponent<JSX.NvTableheader & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvTableheader & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvToggle: import("vue").DefineSetupFnComponent<JSX.NvToggle & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvToggle & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
 export declare const NvTogglebutton: import("vue").DefineSetupFnComponent<JSX.NvTogglebutton & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvTogglebutton & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvTogglebuttongroup: import("vue").DefineSetupFnComponent<JSX.NvTogglebuttongroup & import("./vue-component-lib/utils").InputProps<string[]>, {}, {}, JSX.NvTogglebuttongroup & import("./vue-component-lib/utils").InputProps<string[]> & {}, import("vue").PublicProps>;

package/dist/generated/components.js

@@ -75,7 +75,8 @@ export const NvButton = /*@__PURE__*/ defineContainer('nv-button', undefined, [
     'disabled',
     'fluid',
     'type',
-    'form'
+    'form',
+    'disableTabindex'
 ]);
 export const NvButtongroup = /*@__PURE__*/ defineContainer('nv-buttongroup', undefined, [
     'size',
@@ -515,7 +516,8 @@ export const NvIconbutton = /*@__PURE__*/ defineContainer('nv-iconbutton', undef
     'active',
     'name',
     'type',
-    'shape'
+    'shape',
+    'disableTabindex'
 ]);
 export const NvLoader = /*@__PURE__*/ defineContainer('nv-loader', undefined, [
     'size',
@@ -584,6 +586,11 @@ export const NvStack = /*@__PURE__*/ defineContainer('nv-stack', undefined, [
     'vertical'
 ]);
 export const NvTable = /*@__PURE__*/ defineContainer('nv-table', undefined);
+export const NvTableheader = /*@__PURE__*/ defineContainer('nv-tableheader', undefined, [
+    'sortable',
+    'sortDirection',
+    'sortDirectionChanged'
+]);
 export const NvToggle = /*@__PURE__*/ defineContainer('nv-toggle', undefined, [
     'inputId',
     'name',

package/dist/providers/NotificationService.d.ts

@@ -33,6 +33,8 @@ export interface NotificationOptions {
     actions?: NotificationAction[];
     /** Custom components for the notification actions. */
     actionSlot?: Component;
+    /** Duration in milliseconds before auto-dismissing. 0 = sticky (no auto-dismiss). Default: 0 */
+    duration?: number;
 }
 /**
  * A notification with all required fields populated.

package/dist/providers/NotificationService.js

@@ -25,6 +25,7 @@ class NotificationManager {
     notifications = ref([]);
     options;
     containerApp = null;
+    timers = new Map();
     constructor(options = {}) {
         this.options = {
             position: options.position || 'top-right',
@@ -116,6 +117,7 @@ class NotificationManager {
             actions: options.actions ?? [],
             actionSlot: options.actionSlot,
             icon: options.icon,
+            duration: options.duration ?? 0,
             createdAt: Date.now(),
         };
         // Remove oldest notifications if we exceed max
@@ -130,6 +132,13 @@ class NotificationManager {
             const ref = this.elRefs.get(id);
             const el = unwrapNotificationEl(ref);
             el?.show();
+            // Set up auto-dismiss timer if duration > 0
+            if (notification.duration && notification.duration > 0) {
+                const timer = setTimeout(() => {
+                    this.dismiss(id);
+                }, notification.duration);
+                this.timers.set(id, timer);
+            }
         }, 0);
         return id;
     };
@@ -140,6 +149,12 @@ class NotificationManager {
      * @param {string} id - The notification ID to dismiss
      */
     dismiss = (id) => {
+        // Clear timer if exists
+        const timer = this.timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this.timers.delete(id);
+        }
         const ref = this.elRefs.get(id);
         const el = unwrapNotificationEl(ref);
         el?.dismiss();
@@ -150,6 +165,12 @@ class NotificationManager {
      * @param {string} id - The notification ID to dismiss
      */
     remove = (id) => {
+        // Clear timer if exists
+        const timer = this.timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this.timers.delete(id);
+        }
         this.notifications.value = this.notifications.value.filter((notification) => notification.id !== id);
         this.elRefs.delete(id);
     };
@@ -157,6 +178,9 @@ class NotificationManager {
      * Clear all active notifications.
      */
     removeAll = () => {
+        // Clear all timers
+        this.timers.forEach((timer) => clearTimeout(timer));
+        this.timers.clear();
         this.notifications.value = [];
     };
     /**
@@ -175,6 +199,9 @@ class NotificationManager {
      * Destroy the notification manager and clean up resources.
      */
     destroy() {
+        // Clear all timers
+        this.timers.forEach((timer) => clearTimeout(timer));
+        this.timers.clear();
         if (this.containerApp) {
             this.containerApp.unmount();
             this.containerApp = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-vue",
-  "version": "3.19.0",
+  "version": "3.21.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",