@reactorui/datagrid 1.0.7 → 1.0.9

package/README.md

@@ -1,6 +1,16 @@
 # @reactorui/datagrid
 
-A high-performance, feature-rich React data grid component with TypeScript support, server-side integration, and advanced filtering capabilities.
+A high-performance, feature-rich React data grid component with TypeScript support, server-side integration, pagination and advanced filtering capabilities.
+
+## 🖼️ Screenshots
+
+### Light Mode
+
+![DataGrid Light Mode](./screenshots/datagrid-light.png)
+
+### Dark Mode
+
+![DataGrid Dark Mode](./screenshots/datagrid-dark.png)
 
 ## ✨ Features
 

package/dist/components/DataGrid/DataGrid.d.ts

@@ -1,5 +1,5 @@
 import { DataGridProps } from '../../types';
 export declare const DataGrid: <T extends {
-    id?: string | number;
+    [key: string]: any;
 } = any>({ data, endpoint, columns: columnsProp, enableSearch, enableSorting, enableFilters, enableSelection, pageSize, serverPageSize, pageSizeOptions, httpConfig, variant, size, className, enableRefresh, onDataLoad, onDataError, onLoadingStateChange, onPageChange, onPageSizeChange, onSortChange, onFilterChange, onSearchChange, onTableRefresh, onTableRowClick, onTableRowDoubleClick, onRowSelect, onSelectionChange, onTableRowHover, onCellClick, ...rest }: DataGridProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DataGrid.d.ts.map

package/dist/components/DataGrid/DataGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAU,MAAM,aAAa,CAAC;AAOpD,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,GAAG,EAAE,mcAmChE,aAAa,CAAC,CAAC,CAAC,4CAuOlB,CAAC"}
+{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAU,MAAM,aAAa,CAAC;AAOpD,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG,GAAG,EAAE,mcAmC9D,aAAa,CAAC,CAAC,CAAC,4CA4PlB,CAAC"}

package/dist/components/DataGrid/DataGrid.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { useDataGrid } from '../../hooks';
 import { SearchInput } from '../Search';
 import { FilterControls } from '../Filter';
@@ -10,7 +10,8 @@ export const DataGrid = ({ data, endpoint, columns: columnsProp = [], enableSear
 onDataLoad, onDataError, onLoadingStateChange, onPageChange, onPageSizeChange, onSortChange, onFilterChange, onSearchChange, onTableRefresh, onTableRowClick, onTableRowDoubleClick, onRowSelect, onSelectionChange, onTableRowHover, onCellClick, ...rest }) => {
     const theme = getTheme(variant);
     // Use the data grid hook
-    const { data: sourceData, processedData, paginatedData, loading, error, searchTerm, activeFilters, sortConfig, selectedRows, currentPage, currentPageSize, setSearchTerm, setSort, setCurrentPageSize, navigateNext, navigatePrevious, addFilter, removeFilter, clearFilters, selectRow, selectAll, paginationInfo, selectedData, refresh, } = useDataGrid({
+    const { data: sourceData, processedData, paginatedData, loading, error, searchTerm, activeFilters, sortConfig, selectedRows, currentPage, currentPageSize, setSearchTerm, setSort, setCurrentPageSize, navigateNext, navigatePrevious, addFilter, removeFilter, clearFilters, selectRow, selectAll, paginationInfo, selectedData, refresh, getRowId, // Get the stable ID generator
+     } = useDataGrid({
         data,
         endpoint,
         httpConfig,
@@ -41,31 +42,40 @@ onDataLoad, onDataError, onLoadingStateChange, onPageChange, onPageSizeChange, o
         }
         return [];
     }, [columnsProp, sourceData]);
-    // Handle selection changes
-    React.useEffect(() => {
-        if (onSelectionChange) {
-            onSelectionChange(selectedData);
+    // Memoize the selection change handler
+    const handleSelectionChange = useCallback((newSelectedData) => {
+        onSelectionChange?.(newSelectedData);
+    }, [onSelectionChange]);
+    // Use a ref to track previous selectedData to avoid unnecessary calls
+    const previousSelectedData = React.useRef([]);
+    // Only call onSelectionChange when selectedData actually changes
+    React.useLayoutEffect(() => {
+        const hasChanged = selectedData.length !== previousSelectedData.current.length ||
+            selectedData.some((item, index) => item !== previousSelectedData.current[index]);
+        if (hasChanged && onSelectionChange) {
+            previousSelectedData.current = selectedData;
+            handleSelectionChange(selectedData);
         }
-    }, [selectedData, onSelectionChange]);
+    }, [selectedData, handleSelectionChange]);
     // Handle row selection with callback
-    const handleRowSelect = (rowId, selected) => {
+    const handleRowSelect = useCallback((rowId, selected) => {
         selectRow(rowId, selected);
         if (onRowSelect) {
-            const row = sourceData.find((r) => String(r.id) === rowId);
+            const row = sourceData.find((r) => getRowId(r) === rowId);
             if (row) {
                 onRowSelect(row, selected);
             }
         }
-    };
+    }, [selectRow, onRowSelect, sourceData, getRowId]);
     // Handle refresh
-    const handleRefresh = () => {
+    const handleRefresh = useCallback(() => {
         refresh();
         onTableRefresh?.();
-    };
+    }, [refresh, onTableRefresh]);
     if (error) {
         return (_jsx("div", { className: `${theme.container} ${className}`, ...rest, children: _jsxs("div", { className: "px-4 py-8 text-center", children: [_jsx("div", { className: "text-red-600 dark:text-red-400 mb-2", children: "Error loading data" }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400 mb-4", children: error }), _jsx("button", { onClick: handleRefresh, className: theme.button, children: "Try Again" })] }) }));
     }
-    return (_jsxs("div", { className: `${theme.container} ${className}`, ...rest, children: [enableFilters && (_jsx("div", { className: "p-4 pb-2", children: _jsxs("div", { className: "flex justify-between items-start gap-4", children: [_jsx("div", { className: "flex-1", children: _jsx(FilterControls, { columns: columns, activeFilters: activeFilters, onAddFilter: addFilter, onRemoveFilter: removeFilter, onClearFilters: clearFilters }) }), enableRefresh && (_jsx("div", { className: "flex-shrink-0", children: _jsx("button", { onClick: handleRefresh, disabled: loading, className: "px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-150", children: loading ? 'Loading...' : 'Refresh' }) }))] }) })), _jsx("div", { className: "px-4 pb-4", children: _jsxs("div", { className: "flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "Show" }), _jsx("select", { value: currentPageSize, onChange: (e) => setCurrentPageSize(parseInt(e.target.value)), className: "px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400", children: pageSizeOptions.map((size) => (_jsx("option", { value: size, children: size }, size))) }), _jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "entries" })] }), enableSearch && (_jsx("div", { className: "w-64 flex-shrink-0", children: _jsx(SearchInput, { value: searchTerm, onChange: setSearchTerm, placeholder: "Search...", disabled: loading, className: theme.searchInput }) }))] }) }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: theme.table, children: [_jsx(TableHeader, { columns: columns, sortConfig: sortConfig, onSort: enableSorting ? setSort : undefined, enableSelection: enableSelection, selectedCount: selectedRows.size, totalCount: paginatedData.length, onSelectAll: enableSelection ? selectAll : undefined, theme: theme }), _jsx(TableBody, { columns: columns, data: paginatedData, selectedRows: selectedRows, onSelectRow: enableSelection ? handleRowSelect : undefined, onRowClick: onTableRowClick, onRowDoubleClick: onTableRowDoubleClick, onRowHover: onTableRowHover, onCellClick: onCellClick, enableSelection: enableSelection, loading: loading, theme: theme })] }) }), _jsxs("div", { className: theme.pagination, children: [_jsxs("div", { className: "text-sm text-gray-700 dark:text-gray-300 flex-shrink-0", children: ["Showing ", paginationInfo.start, "-", paginationInfo.end, " of", ' ', paginationInfo.totalRecords.toLocaleString(), " records"] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("button", { onClick: navigatePrevious, disabled: !paginationInfo.hasPrevious, className: "px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150", children: "Previous" }), _jsxs("span", { className: "text-sm text-gray-700 dark:text-gray-300 px-2", children: ["Page ", currentPage, " ", paginationInfo.totalPages > 0 && `of ${paginationInfo.totalPages}`] }), _jsx("button", { onClick: navigateNext, disabled: !paginationInfo.hasNext, className: "px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150", children: "Next" })] })] })] }));
+    return (_jsxs("div", { className: `${theme.container} ${className}`, ...rest, children: [enableFilters && (_jsx("div", { className: "p-4 pb-2", children: _jsxs("div", { className: "flex justify-between items-start gap-4", children: [_jsx("div", { className: "flex-1", children: _jsx(FilterControls, { columns: columns, activeFilters: activeFilters, onAddFilter: addFilter, onRemoveFilter: removeFilter, onClearFilters: clearFilters }) }), enableRefresh && (_jsx("div", { className: "flex-shrink-0", children: _jsx("button", { onClick: handleRefresh, disabled: loading, className: "px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-150", children: loading ? 'Loading...' : 'Refresh' }) }))] }) })), _jsx("div", { className: "px-4 pb-4", children: _jsxs("div", { className: "flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "Show" }), _jsx("select", { value: currentPageSize, onChange: (e) => setCurrentPageSize(parseInt(e.target.value)), className: "px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400", children: pageSizeOptions.map((size) => (_jsx("option", { value: size, children: size }, size))) }), _jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "entries" })] }), enableSearch && (_jsx("div", { className: "w-64 flex-shrink-0", children: _jsx(SearchInput, { value: searchTerm, onChange: setSearchTerm, placeholder: "Search...", disabled: loading, className: theme.searchInput }) }))] }) }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: theme.table, children: [_jsx(TableHeader, { columns: columns, sortConfig: sortConfig, onSort: enableSorting ? setSort : undefined, enableSelection: enableSelection, selectedCount: selectedRows.size, totalCount: paginatedData.length, onSelectAll: enableSelection ? selectAll : undefined, theme: theme }), _jsx(TableBody, { columns: columns, data: paginatedData, selectedRows: selectedRows, onSelectRow: enableSelection ? handleRowSelect : undefined, onRowClick: onTableRowClick, onRowDoubleClick: onTableRowDoubleClick, onRowHover: onTableRowHover, onCellClick: onCellClick, enableSelection: enableSelection, loading: loading, theme: theme, getRowId: getRowId })] }) }), _jsxs("div", { className: theme.pagination, children: [_jsxs("div", { className: "text-sm text-gray-700 dark:text-gray-300 flex-shrink-0", children: ["Showing ", paginationInfo.start, "-", paginationInfo.end, " of", ' ', paginationInfo.totalRecords.toLocaleString(), " records"] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("button", { onClick: navigatePrevious, disabled: !paginationInfo.hasPrevious, className: "px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150", children: "Previous" }), _jsxs("span", { className: "text-sm text-gray-700 dark:text-gray-300 px-2", children: ["Page ", currentPage, " ", paginationInfo.totalPages > 0 && `of ${paginationInfo.totalPages}`] }), _jsx("button", { onClick: navigateNext, disabled: !paginationInfo.hasNext, className: "px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150", children: "Next" })] })] })] }));
 };
 // Helper function to infer data type
 function inferDataType(value) {

package/dist/components/Table/TableBody.d.ts

@@ -14,9 +14,8 @@ interface TableBodyProps<T> {
     loading: boolean;
     emptyMessage?: string;
     theme: Theme;
+    getRowId?: (row: T) => string;
 }
-export declare const TableBody: <T extends {
-    id?: string | number;
-}>({ columns, data, selectedRows, onSelectRow, onRowClick, onRowDoubleClick, onRowHover, onCellClick, enableSelection, loading, emptyMessage, theme, }: TableBodyProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableBody: <T extends Record<string, any>>({ columns, data, selectedRows, onSelectRow, onRowClick, onRowDoubleClick, onRowHover, onCellClick, enableSelection, loading, emptyMessage, theme, getRowId, }: TableBodyProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TableBody.d.ts.map

package/dist/components/Table/TableBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAErC,UAAU,cAAc,CAAC,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7D,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvF,eAAe,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC;CACd;AAED,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,qJAa3D,cAAc,CAAC,CAAC,CAAC,4CAiInB,CAAC"}
+{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAErC,UAAU,cAAc,CAAC,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7D,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvF,eAAe,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,+JActD,cAAc,CAAC,CAAC,CAAC,4CAsJnB,CAAC"}

package/dist/components/Table/TableBody.js

@@ -1,5 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const TableBody = ({ columns, data, selectedRows, onSelectRow, onRowClick, onRowDoubleClick, onRowHover, onCellClick, enableSelection, loading, emptyMessage = 'No data available', theme, }) => {
+import React from 'react';
+export const TableBody = ({ columns, data, selectedRows, onSelectRow, onRowClick, onRowDoubleClick, onRowHover, onCellClick, enableSelection, loading, emptyMessage = 'No data available', theme, getRowId, }) => {
+    // Generate stable row IDs - always generate, never use existing fields
+    const rowIdMap = React.useMemo(() => {
+        const map = new Map();
+        data.forEach((row, index) => {
+            // Always generate based on index and content hash
+            const contentHash = JSON.stringify(row)
+                .slice(0, 50)
+                .replace(/[^a-zA-Z0-9]/g, '');
+            const stableId = `row-${index}-${contentHash}`;
+            map.set(row, stableId);
+        });
+        return map;
+    }, [data]);
+    // Use provided getRowId or fallback to generated IDs
+    const getStableRowId = React.useCallback((row) => {
+        if (getRowId) {
+            return getRowId(row);
+        }
+        return rowIdMap.get(row) || `fallback-${Math.random().toString(36).substr(2, 9)}`;
+    }, [getRowId, rowIdMap]);
     const renderCell = (row, column) => {
         const value = row[column.key];
         if (column.render) {
@@ -7,9 +28,6 @@ export const TableBody = ({ columns, data, selectedRows, onSelectRow, onRowClick
         }
         return value?.toString() || '';
     };
-    const getRowId = (row) => {
-        return String(row.id || Math.random());
-    };
     const handleRowClick = (row, event) => {
         // Don't trigger if clicking on interactive elements
         if (event.target instanceof HTMLInputElement ||
@@ -20,7 +38,7 @@ export const TableBody = ({ columns, data, selectedRows, onSelectRow, onRowClick
         onRowClick?.(row, event);
         // Also handle selection if enabled
         if (enableSelection && onSelectRow) {
-            const rowId = getRowId(row);
+            const rowId = getStableRowId(row);
             const isSelected = selectedRows.has(rowId);
             onSelectRow(rowId, !isSelected);
         }
@@ -38,7 +56,7 @@ export const TableBody = ({ columns, data, selectedRows, onSelectRow, onRowClick
         return (_jsx("tbody", { className: "bg-white dark:bg-gray-800", children: _jsx("tr", { children: _jsx("td", { colSpan: columns.length + (enableSelection ? 1 : 0), className: "px-4 py-8 text-center text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800", children: emptyMessage }) }) }));
     }
     return (_jsx("tbody", { className: "divide-y divide-gray-200 dark:divide-gray-600", children: data.map((row, index) => {
-            const rowId = getRowId(row);
+            const rowId = getStableRowId(row);
             const isSelected = selectedRows.has(rowId);
             return (_jsxs("tr", { className: `cursor-pointer ${isSelected ? theme.selectedRow : theme.row}`, onClick: (e) => handleRowClick(row, e), onDoubleClick: (e) => onRowDoubleClick?.(row, e), onMouseEnter: (e) => onRowHover?.(row, e), onMouseLeave: (e) => onRowHover?.(null, e), children: [enableSelection && (_jsx("td", { className: theme.cell, children: _jsx("input", { type: "checkbox", checked: isSelected, onChange: (e) => {
                                 e.stopPropagation();

package/dist/hooks/useDataGrid.d.ts

@@ -44,6 +44,7 @@ export declare const useDataGrid: <T extends BaseRowData>({ data: staticData, en
     paginationInfo: PaginationInfo;
     selectedData: T[];
     hasSelection: boolean;
+    getRowId: (row: T) => string;
 };
 export {};
 //# sourceMappingURL=useDataGrid.d.ts.map

package/dist/hooks/useDataGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDataGrid.d.ts","sourceRoot":"","sources":["../../src/hooks/useDataGrid.ts"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EAEX,cAAc,EACd,YAAY,EACZ,UAAU,EACV,UAAU,EACV,cAAc,EACf,MAAM,UAAU,CAAC;AAGlB,UAAU,gBAAgB,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9E,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACnD,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,EAAE,oMAchD,gBAAgB,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;0BAsSX,MAAM;sBArFJ,MAAM;2BAkBR,MAAM;sCA2CC,MAAM;;;wBAuCX,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;0BAqB5B,MAAM;;uBA2BsB,MAAM,YAAY,OAAO;0BAalD,OAAO;;;;;CA6DrB,CAAC"}
+{"version":3,"file":"useDataGrid.d.ts","sourceRoot":"","sources":["../../src/hooks/useDataGrid.ts"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EAEX,cAAc,EACd,YAAY,EACZ,UAAU,EACV,UAAU,EACV,cAAc,EACf,MAAM,UAAU,CAAC;AAGlB,UAAU,gBAAgB,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9E,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACnD,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,EAAE,oMAchD,gBAAgB,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;0BAoUX,MAAM;sBArFJ,MAAM;2BAkBR,MAAM;sCA2CC,MAAM;;;wBAuCX,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;0BAqB5B,MAAM;;uBA2BsB,MAAM,YAAY,OAAO;0BAalD,OAAO;;;;;oBA1WZ,CAAC,KAAG,MAAM;CAwanB,CAAC"}

package/dist/hooks/useDataGrid.js

@@ -11,13 +11,30 @@ export const useDataGrid = ({ data: staticData, endpoint, httpConfig, pageSize =
     const [activeFilters, setActiveFilters] = useState([]);
     const [sortConfig, setSortConfig] = useState({ column: '', direction: 'asc' });
     const [selectedRows, setSelectedRows] = useState(new Set());
-    // Pagination state (simplified)
+    // Pagination state
     const [currentPage, setCurrentPage] = useState(1);
     const [currentPageSize, setCurrentPageSize] = useState(pageSize);
     const [continuationToken, setContinuationToken] = useState();
     const [tokenHistory, setTokenHistory] = useState([]);
     // Determine data source
     const sourceData = staticData || serverData;
+    // Generate stable unique IDs for rows - always generate, never use existing fields
+    const rowIdMap = useMemo(() => {
+        const map = new Map();
+        sourceData.forEach((row, index) => {
+            // Always generate a stable ID based on index and content hash
+            const contentHash = JSON.stringify(row)
+                .slice(0, 50)
+                .replace(/[^a-zA-Z0-9]/g, '');
+            const stableId = `row-${index}-${contentHash}`;
+            map.set(row, stableId);
+        });
+        return map;
+    }, [sourceData]);
+    // Helper function to get row ID - always uses generated IDs
+    const getRowId = useCallback((row) => {
+        return rowIdMap.get(row) || `fallback-${Math.random().toString(36).substr(2, 9)}`;
+    }, [rowIdMap]);
     // Internal loading state handler
     const handleLoadingChange = useCallback((newLoading, context) => {
         setLoading(newLoading);
@@ -59,6 +76,13 @@ export const useDataGrid = ({ data: staticData, endpoint, httpConfig, pageSize =
         const end = start + currentPageSize;
         return processedData.slice(start, end);
     }, [processedData, currentPage, currentPageSize, staticData, sourceData]);
+    // Memoize selectedData with proper dependencies and stable ID handling
+    const selectedData = useMemo(() => {
+        return sourceData.filter((row) => {
+            const rowId = getRowId(row);
+            return selectedRows.has(rowId);
+        });
+    }, [sourceData, selectedRows, getRowId]);
     // Pagination info
     const paginationInfo = useMemo(() => {
         if (!staticData && lastServerResponse) {
@@ -300,13 +324,13 @@ export const useDataGrid = ({ data: staticData, endpoint, httpConfig, pageSize =
     const selectAll = useCallback((selected) => {
         if (selected) {
             const currentPageData = staticData ? paginatedData : sourceData;
-            const allIds = currentPageData.map((row) => String(row.id)).filter(Boolean);
+            const allIds = currentPageData.map(getRowId);
             setSelectedRows(new Set(allIds));
         }
         else {
             setSelectedRows(new Set());
         }
-    }, [staticData, paginatedData, sourceData]);
+    }, [staticData, paginatedData, sourceData, getRowId]);
     const refresh = useCallback(() => {
         if (staticData) {
             setSearchTerm('');
@@ -350,7 +374,8 @@ export const useDataGrid = ({ data: staticData, endpoint, httpConfig, pageSize =
         refresh,
         // Computed
         paginationInfo,
-        selectedData: sourceData.filter((row) => selectedRows.has(String(row.id))),
+        selectedData,
         hasSelection: selectedRows.size > 0,
+        getRowId, // Export the helper function
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactorui/datagrid",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "High-performance React data grid with TypeScript support, server-side integration, and continuation token pagination",
   "main": "dist/index.js",
   "module": "dist/index.js",