react-live-data-table 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-live-data-table",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "Your React component package with Tailwind",
5
5
  "main": "src/index.js",
6
6
  "module": "dist/index.esm.js",
package/readme.md CHANGED
@@ -8,7 +8,7 @@ A highly customizable and efficient data grid table for React. It supports featu
8
8
 
9
9
  To install the package, run one of the following commands:
10
10
 
11
- ```bash
11
+ bash
12
12
  npm install react-data-grid-table
13
13
 
14
14
  # React Data Grid
@@ -41,23 +41,8 @@ A flexible React data grid component with support for pagination, row selection,
41
41
  | `rowHeights` | `number` | `40` | Height of each row |
42
42
  | `headerProps` | `object` | `{}` | Custom header properties |
43
43
 
44
-
45
-
46
-
47
- ### Column Definition
48
-
49
- ```typescript
50
- interface ColumnDefinition {
51
- field: string; // Key of the data field to display
52
- headerName: string; // Text to show in column header
53
- width?: number; // Column width in pixels
54
- sortable?: boolean; // Enable column sorting
55
- render?: (value: any, rowData: Object) => React.ReactNode; // Custom cell renderer
56
-
57
-
58
44
  ## Basic Usage
59
-
60
- ```jsx
45
+ jsx
61
46
  import { ReactDataTable } from 'react-data-grid';
62
47
 
63
48
  const App = () => {
@@ -77,4 +62,5 @@ const App = () => {
77
62
  dataSource={data}
78
63
  />
79
64
  );
80
- };
65
+ };
66
+
@@ -188,13 +188,21 @@ function ReactDataTable({
188
188
 
189
189
  return (
190
190
  <div className="bg-white relative w-full">
191
- {loading && <div className="absolute inset-0 bg-white/50 z-20 flex items-center justify-center">
192
- <div data-testid="loading-spinner" role="status" className={'p-2'}>
193
- <svg class="h-6 w-6 animate-spin" viewBox="0 0 100 100"></svg>
194
- <span className="sr-only">Loading...</span>
191
+ {loading && (
192
+ <div className="absolute inset-0 bg-white/50 z-20 flex items-center justify-center">
193
+ <div data-testid="loading-spinner" role="status" className="p-2">
194
+ <svg className="h-10 w-10 animate-spin text-blue-500" viewBox="0 0 50 50" fill="none">
195
+ <circle className="opacity-25" cx="25" cy="25" r="20" stroke="currentColor" strokeWidth="4"></circle>
196
+ <path
197
+ className="opacity-75"
198
+ fill="currentColor"
199
+ d="M25 5a20 20 0 0119.39 15h-4.02a16 16 0 00-30.74 0H5.61A20 20 0 0125 5z"
200
+ ></path>
201
+ </svg>
202
+ <span className="sr-only">Loading...</span>
203
+ </div>
195
204
  </div>
196
- </div>
197
- }
205
+ )}
198
206
 
199
207
  {
200
208
  flatData.length === 0 && !loading ? (