react-live-data-table 1.0.4 → 1.0.5
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +1 -1
- package/readme.md +0 -22
- package/src/ReactDataTable.jsx +25 -11
package/package.json
CHANGED
package/readme.md
CHANGED
@@ -42,25 +42,3 @@ A flexible React data grid component with support for pagination, row selection,
|
|
42
42
|
| `headerProps` | `object` | `{}` | Custom header properties |
|
43
43
|
|
44
44
|
## Basic Usage
|
45
|
-
jsx
|
46
|
-
import { ReactDataTable } from 'react-data-grid';
|
47
|
-
|
48
|
-
const App = () => {
|
49
|
-
const columns = [
|
50
|
-
{ field: 'id', headerName: 'ID' },
|
51
|
-
{ field: 'name', headerName: 'Name' }
|
52
|
-
];
|
53
|
-
|
54
|
-
const data = [
|
55
|
-
{ id: 1, name: 'John' },
|
56
|
-
{ id: 2, name: 'Jane' }
|
57
|
-
];
|
58
|
-
|
59
|
-
return (
|
60
|
-
<ReactDataTable
|
61
|
-
columns={columns}
|
62
|
-
dataSource={data}
|
63
|
-
/>
|
64
|
-
);
|
65
|
-
};
|
66
|
-
|
package/src/ReactDataTable.jsx
CHANGED
@@ -190,17 +190,31 @@ function ReactDataTable({
|
|
190
190
|
<div className="bg-white relative w-full">
|
191
191
|
{loading && (
|
192
192
|
<div className="absolute inset-0 bg-white/50 z-20 flex items-center justify-center">
|
193
|
-
<div
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
193
|
+
<div className={`flex items-center justify-center`}>
|
194
|
+
<div role="status" className="relative">
|
195
|
+
<svg
|
196
|
+
className={`animate-spin w-6 h-6}`}
|
197
|
+
viewBox="0 0 24 24"
|
198
|
+
fill="none"
|
199
|
+
xmlns="http://www.w3.org/2000/svg"
|
200
|
+
>
|
201
|
+
<circle
|
202
|
+
className="opacity-25"
|
203
|
+
cx="12"
|
204
|
+
cy="12"
|
205
|
+
r="10"
|
206
|
+
stroke="currentColor"
|
207
|
+
strokeWidth="4"
|
208
|
+
/>
|
209
|
+
<path
|
210
|
+
className="opacity-75"
|
211
|
+
fill="currentColor"
|
212
|
+
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"
|
213
|
+
/>
|
214
|
+
</svg>
|
215
|
+
<span className="sr-only">Loading...</span>
|
216
|
+
</div>
|
217
|
+
</div>
|
204
218
|
</div>
|
205
219
|
)}
|
206
220
|
|