react-live-data-table 1.0.12 → 1.0.14

package/package.json

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

package/src/ReactDataTable.jsx

@@ -17,18 +17,25 @@ function ReactDataTable({
   rowHeights = 40,
   headerProps = {},
   selected = {},
-  showSelectAllCheckbox=true
+  showSelectAllCheckbox = true,
+  rowStyle = {}, 
+  rowClassName = "" 
 }) {
   const tableContainerRef = React.useRef(null);
   const [data, setData] = React.useState({ pages: [], meta: { totalPages: 1 } });
   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 +166,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 +178,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 (
@@ -207,7 +207,7 @@ function ReactDataTable({
   const enhancedColumns = showCheckbox ? [checkboxColumn, ...columns] : columns;
 
   return (
-    <div className="bg-white relative w-full">
+    <div className="bg-white relative w-full react-live-data-table" >
       {loading && (
         <div className="absolute inset-0 bg-white/50 z-20 flex items-center justify-center">
           <svg
@@ -262,10 +262,12 @@ function ReactDataTable({
                   style={{ ...headerProps.style }}
                 >
                   <tr>
-                    {enhancedColumns.map(column => (
+                    {enhancedColumns.map((column, columnIndex) => (
                       <th
                         key={column.accessorKey || column.id}
-                        className="text-left font-normal h-[40px]"
+                        className={`text-left font-normal h-[40px] border-b border-t border-solid border-[#e4e3e2] ${
+                          columnIndex < enhancedColumns.length - 1 ? 'border-r' : ''
+                        }`}
                         style={{
                           width: column.size,
                           minWidth: column.minWidth,
@@ -279,27 +281,37 @@ function ReactDataTable({
                 </thead>
                 <tbody>
                   {flatData.length > 0 ? (
-                    flatData.map((row, index) => (
-                      <tr
-                        key={row.id}
-                        className={`border-t border-x border-gray-200 hover:bg-[#dee1f2] h-[${rowHeights}px] ${selectedRows[row.id] ? 'bg-[#dee1f2]' : ''}`}
-                        onClick={() => handleRowClick(row, index, flatData)}
-                      >
-                        {enhancedColumns.map(column => (
-                          <td
-                            key={column.accessorKey || column.id}
-                            className={`text-left font-normal border-r ${column?.cellProps?.className || ''}`}
-                            style={{
-                              minWidth: `${column.minWidth}px`,
-                              textAlign: column?.textAlign,
-                              ...column?.cellProps?.style,
-                            }}
-                          >
-                            {typeof column.cell === 'function' ? column.cell({ row }) : null}
-                          </td>
-                        ))}
-                      </tr>
-                    ))
+                    flatData.map((row, index) => {
+                      const isLastRow = index === flatData.length - 1;
+                      return (
+                        <tr
+                          key={row.id}
+                          className={`border-t ${isLastRow ? 'border-b' : ''} border-gray-200 hover:bg-[#dee1f2] ${selectedRows[row.id] ? 'bg-[#dee1f2]' : ''} ${rowClassName}`}
+                          style={{
+                            height: `${rowHeights}px`,
+                            ...rowStyle,
+                            ...(typeof rowStyle === 'function' ? rowStyle(row, index) : {})
+                          }}
+                          onClick={() => handleRowClick(row, index, flatData)}
+                        >
+                          {enhancedColumns.map((column, cellIndex) => (
+                            <td
+                              key={column.accessorKey || column.id}
+                              className={`text-left font-normal ${
+                                 cellIndex < enhancedColumns.length-1  ? 'border-r' : ''
+                              } ${column?.cellProps?.className || ''}`}
+                              style={{
+                                minWidth: `${column.minWidth}px`,
+                                textAlign: column?.textAlign,
+                                ...column?.cellProps?.style,
+                              }}
+                            >
+                              {typeof column.cell === 'function' ? column.cell({ row }) : null}
+                            </td>
+                          ))}
+                        </tr>
+                      );
+                    })
                   ) : (
                     <tr>
                       <td colSpan={enhancedColumns.length} className="text-center py-4">