react-live-data-table 1.0.4 → 1.0.6

package/package.json

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

package/readme.md

@@ -42,25 +42,3 @@ A flexible React data grid component with support for pagination, row selection,
 | `headerProps` | `object` | `{}` | Custom header properties |
 
 ## Basic Usage
-jsx
-import { ReactDataTable } from 'react-data-grid';
-
-const App = () => {
-  const columns = [
-    { field: 'id', headerName: 'ID' },
-    { field: 'name', headerName: 'Name' }
-  ];
-
-  const data = [
-    { id: 1, name: 'John' },
-    { id: 2, name: 'Jane' }
-  ];
-
-  return (
-    <ReactDataTable 
-      columns={columns}
-      dataSource={data}
-    />
-  );
-};
-

package/src/ReactDataTable.jsx

@@ -190,17 +190,43 @@ 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 data-testid="loading-spinner" role="status" className="p-2">
-            <svg className="h-10 w-10 animate-spin text-blue-500" viewBox="0 0 50 50" fill="none">
-              <circle className="opacity-25" cx="25" cy="25" r="20" stroke="currentColor" strokeWidth="4"></circle>
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M25 5a20 20 0 0119.39 15h-4.02a16 16 0 00-30.74 0H5.61A20 20 0 0125 5z"
-              ></path>
-            </svg>
-            <span className="sr-only">Loading...</span>
-          </div>
+          <svg
+            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
+              style={{ opacity: 0.25 }}
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              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>
+
         </div>
       )}