react-live-data-table 1.0.6 → 1.0.8

package/package.json

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

package/src/ReactDataTable.jsx

@@ -167,21 +167,26 @@ function ReactDataTable({
     header: ({ data }) => (
       <div className="flex items-center justify-center h-[40px]">
         <input
+          id={data.id}
           type="checkbox"
           checked={Object.keys(selectedRows).length > 0 && data.every(row => selectedRows[row.id])}
           onChange={(e) => handleSelectAll(e.target.checked, flatData)}
         />
       </div>
     ),
-    cell: ({ row }) => (
-      <div className="flex items-center justify-center h-[40px]">
-        <input
-          type="checkbox"
-          checked={!!selectedRows[row.id]}
-          onChange={(e) => handleSelectRow(e.target.checked, row, flatData)}
-        />
-      </div>
-    ),
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center justify-center h-[40px]" onClick={(e) => e.stopPropagation()}>
+          <input
+            type="checkbox"
+            className='bg-gray-700 rounded-4 border-gray-200 text-blue-400 focus:ring-0 focus:ring-white'
+            checked={!!selectedRows[row.id]}
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => { e.stopPropagation(); handleSelectRow(e.target.checked, row, flatData) }}
+          />
+        </div>
+      )
+    }
   };
 
   const enhancedColumns = showCheckbox ? [checkboxColumn, ...columns] : columns;
@@ -201,16 +206,7 @@ function ReactDataTable({
             xmlns="http://www.w3.org/2000/svg"
           >
             <style>
-              {`
-        @keyframes spin {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
-        }
-      `}
+              {`@keyframes spin {from {transform: rotate(0deg)} to {transform: rotate(360deg)}}`}
             </style>
             <circle
               style={{ opacity: 0.25 }}
@@ -276,6 +272,7 @@ function ReactDataTable({
                       >
                         {enhancedColumns.map(column => (
                           <td
+
                             key={column.accessorKey || column.id}
                             className={`text-left font-normal border-r ${column?.cellProps?.className || ''}`}
                             style={{