@nova-design-system/nova-vue 3.17.0 → 3.18.0

package/dist/components/NvDatatable.d.ts

@@ -17,6 +17,18 @@ export declare function createNvDatatable<T extends NvDatatableRow>(): import("v
         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<{
@@ -30,9 +42,24 @@ export declare function createNvDatatable<T extends NvDatatableRow>(): import("v
         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<T>[];
     rows: T[];
+    pagination: NvDatatablePaginationConfig;
+    renderPagination: (api: NvDatatableRenderPaginationAPI) => VNode;
+    stickyHeader: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /**
  * Default NvDatatable component with basic row type.
@@ -49,6 +76,18 @@ export declare const NvDatatable: import("vue").DefineComponent<import("vue").Ex
         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<{
@@ -62,9 +101,24 @@ export declare const NvDatatable: import("vue").DefineComponent<import("vue").Ex
         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>;
 /********************************* TYPES **************************************/
 /**
@@ -109,8 +163,78 @@ export interface NvDatatableProps<T extends NvDatatableRow> {
     columns: Array<NvDatatableColumn<T>>;
     /** 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>;
 }
+/**
+ * Pagination configuration for NvDatatable.
+ * Supports three modes: client-side, server-side with buttons, and infinite scroll.
+ */
+export interface NvDatatablePaginationConfig {
+    /** Pagination mode */
+    mode: 'client' | 'server' | 'infinite';
+    /** Initial page size (default: 10) */
+    initialPageSize?: number;
+    /** Available page size options (default: [10, 20, 50, 100]) */
+    pageSizeOptions?: number[];
+    /** Total number of rows (for server-side pagination) */
+    totalRowCount?: number;
+    /** Total number of pages (for server-side pagination) */
+    totalPageCount?: number;
+    /** Callback when pagination state changes (for server-side pagination) */
+    onPaginationChange?: (state: {
+        /** Current page index */
+        pageIndex: number;
+        /** Current page size */
+        pageSize: number;
+    }) => void;
+    /** Whether there are more items to load (for infinite scroll) */
+    hasMore?: boolean;
+    /** Whether data is currently loading (for infinite scroll) */
+    isLoading?: boolean;
+    /** Distance from bottom in pixels to trigger load (default: 500) */
+    loadMoreThreshold?: number;
+    /** Callback to load more data (for infinite scroll) */
+    onLoadMore?: () => void;
+}
+/**
+ * API exposed to renderPagination function for building custom pagination UI.
+ */
+export interface NvDatatableRenderPaginationAPI {
+    /** Current page index (zero-based) */
+    pageIndex: number;
+    /** Current page size */
+    pageSize: number;
+    /** Total number of pages */
+    pageCount: number;
+    /** Total number of rows */
+    rowCount: number;
+    /** Navigate to first page */
+    firstPage: () => void;
+    /** Navigate to previous page */
+    previousPage: () => void;
+    /** Navigate to next page */
+    nextPage: () => void;
+    /** Navigate to last page */
+    lastPage: () => void;
+    /** Navigate to specific page by index */
+    setPageIndex: (index: number) => void;
+    /** Change page size */
+    setPageSize: (size: number) => void;
+    /** Whether previous page is available */
+    canPreviousPage: boolean;
+    /** Whether next page is available */
+    canNextPage: boolean;
+    /** Loading state (only for infinite scroll) */
+    isLoading?: boolean;
+    /** Whether more items are available (only for infinite scroll) */
+    hasMore?: boolean;
+}

package/dist/components/NvDatatable.js

@@ -1,6 +1,6 @@
 /* eslint-disable jsdoc/require-jsdoc */
-import { defineComponent, computed, h } from 'vue';
-import { useVueTable, getCoreRowModel, } from '@tanstack/vue-table';
+import { defineComponent, computed, h, ref, watch, watchEffect, onUnmounted, } from 'vue';
+import { useVueTable, getCoreRowModel, getPaginationRowModel, } from '@tanstack/vue-table';
 import { NvTable } from '../generated/components';
 /**
  * Creates a typed NvDatatable component for a specific row type. This is the
@@ -23,8 +23,27 @@ export function createNvDatatable() {
                 required: true,
                 default: () => [],
             },
+            pagination: {
+                type: Object,
+                default: undefined,
+            },
+            renderPagination: {
+                type: Function,
+                default: undefined,
+            },
+            stickyHeader: {
+                type: Boolean,
+                default: false,
+            },
         },
-        setup(props, { attrs }) {
+        setup(props, { attrs, slots }) {
+            // Pagination state for controlled pagination (server mode)
+            const paginationState = ref({
+                pageIndex: 0,
+                pageSize: props.pagination?.initialPageSize || 10,
+            });
+            // Ref for observing last row (infinite scroll)
+            const lastRowRef = ref(null);
             const tableColumns = computed(() => props.columns
                 .filter((col) => !col.hidden)
                 .map((col) => ({
@@ -36,12 +55,21 @@ export function createNvDatatable() {
                     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: col.field,
+                            field,
                             rowIndex,
                         });
                     }
@@ -49,16 +77,169 @@ export function createNvDatatable() {
                     return value;
                 },
             })));
-            const table = useVueTable({
-                data: computed(() => props.rows),
-                columns: tableColumns.value,
-                getCoreRowModel: getCoreRowModel(),
+            // 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;
+                    },
+                    getCoreRowModel: getCoreRowModel(),
+                });
+            }
+            else if (props.pagination.mode === 'client') {
+                // Client-side pagination - table manages its own state
+                table = useVueTable({
+                    get data() {
+                        return computed(() => props.rows);
+                    },
+                    get columns() {
+                        return tableColumns.value;
+                    },
+                    getCoreRowModel: getCoreRowModel(),
+                    getPaginationRowModel: getPaginationRowModel(),
+                    initialState: {
+                        pagination: {
+                            pageIndex: 0,
+                            pageSize: props.pagination.initialPageSize || 10,
+                        },
+                    },
+                });
+            }
+            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') {
+                            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;
+                        }
+                    },
+                });
+            }
+            // Handle pagination changes for server mode
+            watch(paginationState, (newState) => {
+                if (props.pagination?.mode === 'server' &&
+                    props.pagination.onPaginationChange) {
+                    props.pagination.onPaginationChange({
+                        pageIndex: newState.pageIndex,
+                        pageSize: newState.pageSize,
+                    });
+                }
+            }, { deep: true });
+            // Intersection observer for infinite scroll
+            let observer = null;
+            watchEffect((onCleanup) => {
+                // Disconnect previous observer if it exists
+                if (observer) {
+                    observer.disconnect();
+                    observer = null;
+                }
+                // Only set up observer for infinite scroll mode
+                if (props.pagination?.mode !== 'infinite' || !lastRowRef.value) {
+                    return;
+                }
+                const threshold = props.pagination.loadMoreThreshold || 500;
+                observer = new IntersectionObserver((entries) => {
+                    const entry = entries[0];
+                    if (entry.isIntersecting &&
+                        props.pagination?.mode === 'infinite' &&
+                        props.pagination.hasMore &&
+                        !props.pagination.isLoading &&
+                        props.pagination.onLoadMore) {
+                        props.pagination.onLoadMore();
+                    }
+                }, {
+                    rootMargin: `${threshold}px`,
+                    root: null,
+                });
+                observer.observe(lastRowRef.value);
+                // Cleanup function
+                onCleanup(() => {
+                    if (observer) {
+                        observer.disconnect();
+                        observer = null;
+                    }
+                });
+            });
+            onUnmounted(() => {
+                if (observer) {
+                    observer.disconnect();
+                }
+            });
+            // Build pagination API for render prop
+            const paginationAPI = computed(() => {
+                if (!props.pagination) {
+                    return null;
+                }
+                const tablePaginationState = table.getState().pagination;
+                const pageCount = table.getPageCount();
+                const rowCount = props.pagination.mode === 'server'
+                    ? props.pagination.totalRowCount || props.rows.length
+                    : props.rows.length;
+                return {
+                    pageIndex: tablePaginationState.pageIndex,
+                    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(),
+                    isLoading: props.pagination.mode === 'infinite'
+                        ? props.pagination.isLoading
+                        : undefined,
+                    hasMore: props.pagination.mode === 'infinite'
+                        ? props.pagination.hasMore
+                        : undefined,
+                };
             });
             return () => {
-                return h(NvTable, attrs, {
+                const tableRows = table.getRowModel().rows;
+                const isInfiniteScroll = props.pagination?.mode === 'infinite';
+                const tableElement = h(NvTable, attrs, {
                     default: () => [
                         h('table', {}, [
-                            h('thead', {}, [
+                            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,
@@ -74,31 +255,51 @@ export function createNvDatatable() {
                                             : true,
                                     }, header.isPlaceholder
                                         ? null
-                                        : typeof header.column.columnDef.header === 'function'
+                                        : typeof header.column.columnDef.header ===
+                                            'function'
                                             ? header.column.columnDef.header(header.getContext())
                                             : header.column.columnDef.header)),
                                 ])),
                             ]),
                             h('tbody', {}, [
-                                ...table.getRowModel().rows.map((row) => h('tr', {
-                                    key: row.id,
-                                    'data-testid': `datatable-row-${row.id}`,
-                                }, [
-                                    ...row.getVisibleCells().map((cell) => h('td', {
-                                        key: cell.id,
-                                        'data-testid': `datatable-cell-${cell.id}`,
-                                        style: {
-                                            padding: '8px',
-                                            borderBottom: '1px solid #eee',
-                                        },
-                                    }, typeof cell.column.columnDef.cell === 'function'
-                                        ? cell.column.columnDef.cell(cell.getContext())
-                                        : cell.getValue())),
-                                ])),
+                                ...tableRows.map((row, index) => {
+                                    const isLastRow = isInfiniteScroll && index === tableRows.length - 1;
+                                    return h('tr', {
+                                        key: row.id,
+                                        'data-testid': `datatable-row-${row.id}`,
+                                        ref: isLastRow ? lastRowRef : undefined,
+                                    }, [
+                                        ...row.getVisibleCells().map((cell) => h('td', {
+                                            key: cell.id,
+                                            'data-testid': `datatable-cell-${cell.id}`,
+                                        }, typeof cell.column.columnDef.cell === 'function'
+                                            ? cell.column.columnDef.cell(cell.getContext())
+                                            : cell.getValue())),
+                                    ]);
+                                }),
                             ]),
                         ]),
                     ],
                 });
+                // Return table with optional pagination
+                // Priority: slots.pagination > props.renderPagination > no pagination
+                if (paginationAPI.value) {
+                    if (slots.pagination) {
+                        // Use scoped slot (preferred)
+                        return h('div', {}, [
+                            tableElement,
+                            slots.pagination({ api: paginationAPI.value }),
+                        ]);
+                    }
+                    else if (props.renderPagination) {
+                        // Fall back to render prop for backward compatibility
+                        return h('div', {}, [
+                            tableElement,
+                            props.renderPagination(paginationAPI.value),
+                        ]);
+                    }
+                }
+                return tableElement;
             };
         },
     });

package/dist/generated/components.d.ts

@@ -49,7 +49,7 @@ export declare const NvFieldselect: import("vue").DefineSetupFnComponent<JSX.NvF
 export declare const NvFieldslider: import("vue").DefineSetupFnComponent<JSX.NvFieldslider & import("./vue-component-lib/utils").InputProps<number[]>, {}, {}, JSX.NvFieldslider & import("./vue-component-lib/utils").InputProps<number[]> & {}, import("vue").PublicProps>;
 export declare const NvFieldtext: import("vue").DefineSetupFnComponent<JSX.NvFieldtext & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFieldtext & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
 export declare const NvFieldtextarea: import("vue").DefineSetupFnComponent<JSX.NvFieldtextarea & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFieldtextarea & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
-export declare const NvFieldtime: import("vue").DefineSetupFnComponent<JSX.NvFieldtime & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvFieldtime & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const NvFieldtime: import("vue").DefineSetupFnComponent<JSX.NvFieldtime & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFieldtime & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
 export declare const NvIcon: import("vue").DefineSetupFnComponent<JSX.NvIcon & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvIcon & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvIconbutton: import("vue").DefineSetupFnComponent<JSX.NvIconbutton & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvIconbutton & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvLoader: import("vue").DefineSetupFnComponent<JSX.NvLoader & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvLoader & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;

package/dist/generated/components.js

@@ -492,7 +492,7 @@ export const NvFieldtime = /*@__PURE__*/ defineContainer('nv-fieldtime', undefin
     'min',
     'autofocus',
     'valueChanged'
-]);
+], 'value', 'value-changed');
 export const NvIcon = /*@__PURE__*/ defineContainer('nv-icon', undefined, [
     'xsmall',
     'small',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-vue",
-  "version": "3.17.0",
+  "version": "3.18.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",