react-live-data-table 1.0.12 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-live-data-table",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Your React component package with Tailwind",
   "main": "src/index.js",
   "module": "dist/index.esm.js",

package/src/ReactDataTable.jsx

@@ -16,7 +16,7 @@ function ReactDataTable({
   emptyText,
   rowHeights = 40,
   headerProps = {},
-  selected = {},
+  selected={},
   showSelectAllCheckbox=true
 }) {
   const tableContainerRef = React.useRef(null);
@@ -24,11 +24,16 @@ function ReactDataTable({
   const [isFetching, setIsFetching] = React.useState(false);
   const [pageParam, setPageParam] = React.useState(1);
   const [selectedRows, setSelectedRows] = React.useState(selected);
+  const previousSelected = React.useRef(selected);
 
-
+ 
   useEffect(() => {
-    setSelectedRows({ ...selected })
-  }, [selected])
+    if (JSON.stringify(previousSelected.current) !== JSON.stringify(selected)) {
+      setSelectedRows({...selected});
+      previousSelected.current = selected;
+    }
+  }, [selected]);
+
 
   useEffect(() => {
     setData({ pages: [], meta: { totalPages: 1 } });
@@ -159,14 +164,9 @@ function ReactDataTable({
     }
   };
 
-  // This is the problem area - it was causing an infinite loop
   useEffect(() => {
-    const containerElement = tableContainerRef.current;
-    if (containerElement && !staticData) {
-      handleScroll(containerElement);
-    }
-    // Don't include 'data' as a dependency here
-  }, [pageParam, isFetching]); // Only depend on pageParam and isFetching
+    handleScroll(tableContainerRef.current);
+  }, [data]);
 
   const flatData = data.pages.flatMap(page => page.data);
 
@@ -176,17 +176,15 @@ function ReactDataTable({
     minWidth: 50,
     textAlign: "center",
     header: ({ data }) => (
-      showSelectAllCheckbox ? <div className="flex items-center justify-center h-[40px]">
-        <input
+      <div className="flex items-center justify-center h-[40px]">
+        {showSelectAllCheckbox && <input
           id={data.id}
           type="checkbox"
           className='bg-gray-700 rounded-4 border-gray-200 text-blue-400 focus:ring-0 focus:ring-white'
           checked={Object.keys(selectedRows).length > 0 && data.every(row => selectedRows[row.id])}
           onChange={(e) => handleSelectAll(e.target.checked, flatData)}
-        />
+        />}
       </div>
-        :
-        <div className="flex items-center justify-center h-[40px]"></div>
     ),
     cell: ({ row }) => {
       return (
@@ -287,6 +285,7 @@ function ReactDataTable({
                       >
                         {enhancedColumns.map(column => (
                           <td
+
                             key={column.accessorKey || column.id}
                             className={`text-left font-normal border-r ${column?.cellProps?.className || ''}`}
                             style={{