@nova-design-system/nova-react 3.17.0 → 3.18.0-beta.0

package/dist/cjs/{nv-iconbutton_2.entry-iinBJBb6.js → nv-iconbutton_2.entry-DI-3_IYV.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-CQAMJPJk.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-menu.entry-BTW4XauN.js → nv-menu.entry-BbqP7TZx.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-CQAMJPJk.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-menuitem.entry-CIT2_Fbe.js → nv-menuitem.entry-BxGppIvW.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-CQAMJPJk.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-notification.entry-CVyzCsSh.js → nv-notification.entry-D1gy3PSV.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-CQAMJPJk.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');
 var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');

package/dist/cjs/{nv-notificationcontainer.entry-CqoyGWAa.js → nv-notificationcontainer.entry-MJPLFXsR.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-CQAMJPJk.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-popover.entry-Bf5ihsdq.js → nv-popover.entry-CL28RbQ0.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-CQAMJPJk.js');
 var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
 var styleValueTypes_esF5d10b79 = require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
 var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');

package/dist/cjs/{nv-row.entry-Chp5QzjD.js → nv-row.entry-DkCe2B9f.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-CQAMJPJk.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-split.entry-DSB_HMU-.js → nv-split.entry-BMVNZDwj.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-CQAMJPJk.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-stack.entry-D6L6830W.js → nv-stack.entry-iH3La5O3.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-CQAMJPJk.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-table.entry-B-UuWaI5.js → nv-table.entry-DFHkpLLG.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-CQAMJPJk.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-toggle.entry-AG7sAORg.js → nv-toggle.entry-BM2Xdtvg.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-CQAMJPJk.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');

package/dist/cjs/{nv-togglebutton.entry-Btlxm5gO.js → nv-togglebutton.entry-DPu3j4uH.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-CQAMJPJk.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-togglebuttongroup.entry-CM3nWiUU.js → nv-togglebuttongroup.entry-BBUI9mSK.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-CQAMJPJk.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-tooltip.entry-m4AYXhW3.js → nv-tooltip.entry-CEynYna7.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-CQAMJPJk.js');
 require('react');
 require('react-dom');
 

package/dist/components/NvDatatable.js

@@ -1,7 +1,12 @@
-import React, { useMemo } from 'react';
-import { flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table';
+import React, { useMemo, useState, useEffect, useRef, } from 'react';
+import { flexRender, getCoreRowModel, getPaginationRowModel, useReactTable, } from '@tanstack/react-table';
 import { NvTable } from '../generated/components';
-const NvDatatable = ({ columns, rows, ...htmlProps }) => {
+const NvDatatable = ({ columns, rows, pagination, renderPagination, stickyHeader, ...htmlProps }) => {
+    const [paginationState, setPaginationState] = useState({
+        pageIndex: 0,
+        pageSize: pagination?.initialPageSize || 10,
+    });
+    const lastRowRef = useRef(null);
     const tableColumns = useMemo(() => columns
         .filter((col) => !col.hidden)
         .map((col) => ({
@@ -24,22 +29,120 @@ const NvDatatable = ({ columns, rows, ...htmlProps }) => {
             return value;
         },
     })), [columns]);
-    const table = useReactTable({
-        data: rows,
-        columns: tableColumns,
-        getCoreRowModel: getCoreRowModel(),
-    });
-    return (React.createElement(NvTable, { ...htmlProps },
-        React.createElement("table", null,
-            React.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => (React.createElement("th", { key: header.id, "data-testid": `datatable-header-${header.id}`, style: {
-                    width: header.column.columnDef.size + 'px',
-                }, "data-no-resize": header.column.columnDef.enableResizing ? null : true }, header.isPlaceholder
-                ? null
-                : flexRender(header.column.columnDef.header, header.getContext())))))))),
-            React.createElement("tbody", null, table.getRowModel().rows.map((row) => (React.createElement("tr", { key: row.id, "data-testid": `datatable-row-${row.id}` }, row.getVisibleCells().map((cell) => (React.createElement("td", { key: cell.id, "data-testid": `datatable-cell-${cell.id}`, style: {
-                    padding: '8px',
-                    borderBottom: '1px solid #eee',
-                } }, flexRender(cell.column.columnDef.cell, cell.getContext())))))))))));
+    const tableConfig = useMemo(() => {
+        const baseConfig = {
+            data: rows,
+            columns: tableColumns,
+            getCoreRowModel: getCoreRowModel(),
+        };
+        if (!pagination) {
+            return baseConfig;
+        }
+        if (pagination.mode === 'client') {
+            return {
+                ...baseConfig,
+                getPaginationRowModel: getPaginationRowModel(),
+                initialState: {
+                    pagination: {
+                        pageIndex: 0,
+                        pageSize: pagination.initialPageSize || 10,
+                    },
+                },
+            };
+        }
+        if (pagination.mode === 'server') {
+            const pageSize = paginationState.pageSize;
+            let pageCount = -1;
+            if (pagination.totalPageCount !== undefined) {
+                pageCount = pagination.totalPageCount;
+            }
+            else if (pagination.totalRowCount !== undefined) {
+                pageCount = Math.ceil(pagination.totalRowCount / pageSize);
+            }
+            return {
+                ...baseConfig,
+                manualPagination: true,
+                pageCount,
+                state: {
+                    pagination: paginationState,
+                },
+                onPaginationChange: setPaginationState,
+            };
+        }
+        return baseConfig;
+    }, [rows, tableColumns, pagination, paginationState]);
+    const table = useReactTable(tableConfig);
+    useEffect(() => {
+        if (pagination?.mode === 'server' && pagination.onPaginationChange) {
+            pagination.onPaginationChange({
+                pageIndex: paginationState.pageIndex,
+                pageSize: paginationState.pageSize,
+            });
+        }
+    }, [paginationState, pagination]);
+    useEffect(() => {
+        if (pagination?.mode !== 'infinite' || !lastRowRef.current) {
+            return;
+        }
+        const threshold = pagination.loadMoreThreshold || 500;
+        const observer = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            if (entry.isIntersecting &&
+                pagination.hasMore &&
+                !pagination.isLoading &&
+                pagination.onLoadMore) {
+                pagination.onLoadMore();
+            }
+        }, {
+            rootMargin: `${threshold}px`,
+            root: null,
+        });
+        observer.observe(lastRowRef.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [rows, pagination]);
+    const tablePaginationState = table.getState().pagination;
+    const paginationAPI = useMemo(() => {
+        if (!pagination) {
+            return null;
+        }
+        const pageCount = table.getPageCount();
+        const rowCount = pagination.mode === 'server'
+            ? pagination.totalRowCount || rows.length
+            : 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: pagination.mode === 'infinite' ? pagination.isLoading : undefined,
+            hasMore: pagination.mode === 'infinite' ? pagination.hasMore : undefined,
+        };
+    }, [pagination, table, rows.length, tablePaginationState]);
+    const tableRows = table.getRowModel().rows;
+    const isInfiniteScroll = pagination?.mode === 'infinite';
+    return (React.createElement(React.Fragment, null,
+        React.createElement(NvTable, { ...htmlProps },
+            React.createElement("table", null,
+                React.createElement("thead", { "data-sticky-top": stickyHeader ? 'true' : undefined }, table.getHeaderGroups().map((headerGroup) => (React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => (React.createElement("th", { key: header.id, "data-testid": `datatable-header-${header.id}`, style: {
+                        width: header.column.columnDef.size + 'px',
+                    }, "data-no-resize": header.column.columnDef.enableResizing ? null : true }, header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext())))))))),
+                React.createElement("tbody", null, tableRows.map((row, index) => {
+                    const isLastRow = isInfiniteScroll && index === tableRows.length - 1;
+                    return (React.createElement("tr", { key: row.id, "data-testid": `datatable-row-${row.id}`, ref: isLastRow ? lastRowRef : undefined }, row.getVisibleCells().map((cell) => (React.createElement("td", { key: cell.id, "data-testid": `datatable-cell-${cell.id}` }, flexRender(cell.column.columnDef.cell, cell.getContext()))))));
+                })))),
+        paginationAPI && renderPagination && renderPagination(paginationAPI)));
 };
 NvDatatable.displayName = 'NvDatatable';
 export { NvDatatable };

package/dist/types/components/NvDatatable.d.ts

@@ -1,13 +1,47 @@
 import React, { type ComponentProps } from 'react';
 declare const NvDatatable: {
-    <T extends NvDatatableRow = NvDatatableRow>({ columns, rows, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
+    <T extends NvDatatableRow = NvDatatableRow>({ columns, rows, pagination, renderPagination, stickyHeader, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
     displayName: string;
 };
 export { NvDatatable };
 export type NvDatatableProps<T> = {
     columns: Array<NvDatatableColumn<T>>;
     rows: Array<T>;
+    pagination?: NvDatatablePaginationConfig;
+    renderPagination?: (api: NvDatatableRenderPaginationAPI) => React.ReactNode;
+    stickyHeader?: boolean;
 } & Pick<ComponentProps<'div'>, 'className' | 'style'>;
+export interface NvDatatablePaginationConfig {
+    mode: 'client' | 'server' | 'infinite';
+    initialPageSize?: number;
+    pageSizeOptions?: number[];
+    totalRowCount?: number;
+    totalPageCount?: number;
+    onPaginationChange?: (state: {
+        pageIndex: number;
+        pageSize: number;
+    }) => void;
+    hasMore?: boolean;
+    isLoading?: boolean;
+    loadMoreThreshold?: number;
+    onLoadMore?: () => void;
+}
+export interface NvDatatableRenderPaginationAPI {
+    pageIndex: number;
+    pageSize: number;
+    pageCount: number;
+    rowCount: number;
+    firstPage: () => void;
+    previousPage: () => void;
+    nextPage: () => void;
+    lastPage: () => void;
+    setPageIndex: (index: number) => void;
+    setPageSize: (size: number) => void;
+    canPreviousPage: boolean;
+    canNextPage: boolean;
+    isLoading?: boolean;
+    hasMore?: boolean;
+}
 export interface NvDatatableColumn<T> {
     field: keyof T;
     headerName?: string;

package/package.json

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