react-live-data-table 1.0.3 → 1.0.5

package/package.json

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

package/readme.md

@@ -8,7 +8,7 @@ A highly customizable and efficient data grid table for React. It supports featu
 
 To install the package, run one of the following commands:
 
-```bash
+bash
 npm install react-data-grid-table
 
 # React Data Grid
@@ -41,40 +41,4 @@ A flexible React data grid component with support for pagination, row selection,
 | `rowHeights` | `number` | `40` | Height of each row |
 | `headerProps` | `object` | `{}` | Custom header properties |
 
-
-
-
-### Column Definition
-
-```typescript
-interface ColumnDefinition {
- field: string;          // Key of the data field to display
- headerName: string;     // Text to show in column header
- width?: number;         // Column width in pixels
- sortable?: boolean;     // Enable column sorting
- render?: (value: any, rowData: Object) => React.ReactNode;  // Custom cell renderer
-
-
 ## 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

@@ -188,13 +188,35 @@ function ReactDataTable({
 
   return (
     <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 class="h-6 w-6 animate-spin" viewBox="0 0 100 100"></svg>
+      {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}`}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-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>
+      )}
 
       {
         flatData.length === 0 && !loading ? (