react-live-data-table 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-live-data-table",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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,23 +41,8 @@ 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
+jsx
 import { ReactDataTable } from 'react-data-grid';
 
 const App = () => {
@@ -77,4 +62,5 @@ const App = () => {
       dataSource={data}
     />
   );
-};
+};
+

package/src/ReactDataTable.jsx

@@ -188,13 +188,21 @@ 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>
-          <span className="sr-only">Loading...</span>
+      {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>
         </div>
-      </div>
-      }
+      )}
 
       {
         flatData.length === 0 && !loading ? (