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

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/generated/components.js

@@ -39,6 +39,7 @@ import { NvNotification as NvNotificationElement, defineCustomElement as defineN
 import { NvNotificationcontainer as NvNotificationcontainerElement, defineCustomElement as defineNvNotificationcontainer } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement, defineCustomElement as defineNvPopover } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement, defineCustomElement as defineNvRow } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
+import { NvSplit as NvSplitElement, defineCustomElement as defineNvSplit } from "@nova-design-system/nova-webcomponents/dist/components/nv-split.js";
 import { NvStack as NvStackElement, defineCustomElement as defineNvStack } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
 import { NvTable as NvTableElement, defineCustomElement as defineNvTable } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
 import { NvToggle as NvToggleElement, defineCustomElement as defineNvToggle } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
@@ -355,6 +356,13 @@ export const NvRow = createComponent({
     events: {},
     defineCustomElement: defineNvRow
 });
+export const NvSplit = createComponent({
+    tagName: 'nv-split',
+    elementClass: NvSplitElement,
+    react: React,
+    events: { onSizesChanged: 'sizesChanged' },
+    defineCustomElement: defineNvSplit
+});
 export const NvStack = createComponent({
     tagName: 'nv-stack',
     elementClass: NvStackElement,

package/dist/generated/components.server.js

@@ -694,6 +694,15 @@ export const NvRow = createComponent({
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });
+export const NvSplit = createComponent({
+    tagName: 'nv-split',
+    properties: {
+        direction: 'direction',
+        gutterSize: 'gutter-size'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
 export const NvStack = createComponent({
     tagName: 'nv-stack',
     properties: {

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/dist/types/generated/components.d.ts

@@ -39,6 +39,7 @@ import { NvNotification as NvNotificationElement } from "@nova-design-system/nov
 import { NvNotificationcontainer as NvNotificationcontainerElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
+import { NvSplit as NvSplitElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-split.js";
 import { NvStack as NvStackElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
 import { NvTable as NvTableElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
 import { NvToggle as NvToggleElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
@@ -216,6 +217,10 @@ export type NvPopoverEvents = {
 export declare const NvPopover: StencilReactComponent<NvPopoverElement, NvPopoverEvents>;
 export type NvRowEvents = NonNullable<unknown>;
 export declare const NvRow: StencilReactComponent<NvRowElement, NvRowEvents>;
+export type NvSplitEvents = {
+    onSizesChanged: EventName<CustomEvent<number[]>>;
+};
+export declare const NvSplit: StencilReactComponent<NvSplitElement, NvSplitEvents>;
 export type NvStackEvents = NonNullable<unknown>;
 export declare const NvStack: StencilReactComponent<NvStackElement, NvStackEvents>;
 export type NvTableEvents = NonNullable<unknown>;

package/dist/types/generated/components.server.d.ts

@@ -39,6 +39,7 @@ import { NvNotification as NvNotificationElement } from "@nova-design-system/nov
 import { NvNotificationcontainer as NvNotificationcontainerElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
+import { NvSplit as NvSplitElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-split.js";
 import { NvStack as NvStackElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
 import { NvTable as NvTableElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
 import { NvToggle as NvToggleElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
@@ -218,6 +219,10 @@ export type NvPopoverEvents = {
 export declare const NvPopover: StencilReactComponent<NvPopoverElement, NvPopoverEvents>;
 export type NvRowEvents = NonNullable<unknown>;
 export declare const NvRow: StencilReactComponent<NvRowElement, NvRowEvents>;
+export type NvSplitEvents = {
+    onSizesChanged: EventName<CustomEvent<number[]>>;
+};
+export declare const NvSplit: StencilReactComponent<NvSplitElement, NvSplitEvents>;
 export type NvStackEvents = NonNullable<unknown>;
 export declare const NvStack: StencilReactComponent<NvStackElement, NvStackEvents>;
 export type NvTableEvents = NonNullable<unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.16.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",
@@ -16,9 +16,16 @@
     "dist"
   ],
   "exports": {
-    "import": "./dist/index.js",
-    "require": "./dist/cjs/index.js",
-    "types": "./dist/types/index.d.ts"
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts",
+      "node": "./dist/generated/components.server.js"
+    },
+    "./server": {
+      "import": "./dist/generated/components.server.js",
+      "types": "./dist/types/generated/components.server.d.ts"
+    }
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",