react-live-data-table 1.0.7 → 1.0.9

package/package.json

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

package/src/ReactDataTable.jsx

@@ -15,7 +15,6 @@ function ReactDataTable({
   staticData = null,
   emptyText,
   rowHeights = 40,
-  checkboxStyle,
   headerProps = {} // Added default value
 }) {
   const tableContainerRef = React.useRef(null);
@@ -160,24 +159,6 @@ function ReactDataTable({
 
   const flatData = data.pages.flatMap(page => page.data);
 
-  const checkBoxStyle = checkboxStyle ? checkboxStyle : {
-    cursor: 'pointer',
-    background: 'rgb(249, 250, 251)',
-    height: '18px',
-    width: '18px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '4px',
-    border: '1px solid rgb(204, 204, 204)',
-    fontSize: '12px',
-    color: 'rgb(0, 122, 179)',
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)'
-  };
-
   const checkboxColumn = {
     id: 'select',
     size: 50,
@@ -186,24 +167,28 @@ function ReactDataTable({
     header: ({ data }) => (
       <div className="flex items-center justify-center h-[40px]">
         <input
-           id={data.id}
+          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>
     ),
-    cell: ({ row }) => (
-      <div className="flex items-center justify-center h-[40px]">
-        <input
-          style={checkBoxStyle}
-          type="checkbox"
-          checked={!!selectedRows[row.id]}
-          onClick={(e) => e.stopPropagation()}
-          onChange={(e) => { e.stopPropagation(); handleSelectRow(e.target.checked, row, flatData) }}
-        />
-      </div>
-    ),
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center justify-center h-[40px]" onClick={(e) => e.stopPropagation()}>
+          <input
+            id={row.id}
+            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;
@@ -289,6 +274,7 @@ function ReactDataTable({
                       >
                         {enhancedColumns.map(column => (
                           <td
+
                             key={column.accessorKey || column.id}
                             className={`text-left font-normal border-r ${column?.cellProps?.className || ''}`}
                             style={{