react-live-data-table 1.0.5 → 1.0.7

package/package.json

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

package/src/ReactDataTable.jsx

@@ -15,6 +15,7 @@ function ReactDataTable({
   staticData = null,
   emptyText,
   rowHeights = 40,
+  checkboxStyle,
   headerProps = {} // Added default value
 }) {
   const tableContainerRef = React.useRef(null);
@@ -159,6 +160,24 @@ 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,
@@ -167,6 +186,7 @@ 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)}
@@ -176,9 +196,11 @@ function ReactDataTable({
     cell: ({ row }) => (
       <div className="flex items-center justify-center h-[40px]">
         <input
+          style={checkBoxStyle}
           type="checkbox"
           checked={!!selectedRows[row.id]}
-          onChange={(e) => handleSelectRow(e.target.checked, row, flatData)}
+          onClick={(e) => e.stopPropagation()}
+          onChange={(e) => { e.stopPropagation(); handleSelectRow(e.target.checked, row, flatData) }}
         />
       </div>
     ),
@@ -190,16 +212,21 @@ function ReactDataTable({
     <div className="bg-white relative w-full">
       {loading && (
         <div className="absolute inset-0 bg-white/50 z-20 flex items-center justify-center">
-          <div className={`flex items-center justify-center`}>
-        <div role="status" className="relative">
           <svg
-            className={`animate-spin w-6 h-6}`}
+            style={{
+              animation: 'spin 1s linear infinite',
+              width: '24px',
+              height: '24px'
+            }}
             viewBox="0 0 24 24"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
           >
+            <style>
+              {`@keyframes spin {from {transform: rotate(0deg)} to {transform: rotate(360deg)}}`}
+            </style>
             <circle
-              className="opacity-25"
+              style={{ opacity: 0.25 }}
               cx="12"
               cy="12"
               r="10"
@@ -207,14 +234,12 @@ function ReactDataTable({
               strokeWidth="4"
             />
             <path
-              className="opacity-75"
+              style={{ opacity: 0.75 }}
               fill="currentColor"
               d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
             />
           </svg>
-          <span className="sr-only">Loading...</span>
-        </div>
-      </div>
+
         </div>
       )}