react-live-data-table 1.0.1 → 1.0.3
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 +1 -1
- package/src/ReactDataTable.jsx +75 -81
package/package.json
CHANGED
package/src/ReactDataTable.jsx
CHANGED
@@ -189,92 +189,86 @@ function ReactDataTable({
|
|
189
189
|
return (
|
190
190
|
<div className="bg-white relative w-full">
|
191
191
|
{loading && <div className="absolute inset-0 bg-white/50 z-20 flex items-center justify-center">
|
192
|
-
<div role="status" className=
|
193
|
-
|
194
|
-
|
195
|
-
className="inline w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-green-500"
|
196
|
-
viewBox="0 0 100 101"
|
197
|
-
fill="none"
|
198
|
-
xmlns="http://www.w3.org/2000/svg"
|
199
|
-
>
|
200
|
-
<path
|
201
|
-
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908Z"
|
202
|
-
fill="#555e68"
|
203
|
-
/>
|
204
|
-
</svg>
|
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>
|
205
195
|
</div>
|
206
|
-
</div>
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
196
|
+
</div>
|
197
|
+
}
|
198
|
+
|
199
|
+
{
|
200
|
+
flatData.length === 0 && !loading ? (
|
201
|
+
<div className="flex items-center justify-center" style={{ height }}>
|
202
|
+
<div className="text-gray-500">
|
203
|
+
{emptyText || 'No data available'}
|
204
|
+
</div>
|
211
205
|
</div>
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
>
|
226
|
-
<tr>
|
227
|
-
{enhancedColumns.map(column => (
|
228
|
-
<th
|
229
|
-
key={column.accessorKey || column.id}
|
230
|
-
className="text-left font-normal h-[40px]"
|
231
|
-
style={{
|
232
|
-
width: column.size,
|
233
|
-
minWidth: column.minWidth,
|
234
|
-
textAlign: column.textAlign,
|
235
|
-
}}
|
236
|
-
>
|
237
|
-
{typeof column.header === 'function' ? column.header({ data: flatData }) : column.header}
|
238
|
-
</th>
|
239
|
-
))}
|
240
|
-
</tr>
|
241
|
-
</thead>
|
242
|
-
<tbody>
|
243
|
-
{flatData.length > 0 ? (
|
244
|
-
flatData.map((row, index) => (
|
245
|
-
<tr
|
246
|
-
key={row.id}
|
247
|
-
className={`border-t border-x border-gray-200 hover:bg-[#dee1f2] h-[${rowHeights}px] ${selectedRows[row.id] ? 'bg-[#dee1f2]' : ''}`}
|
248
|
-
onClick={() => handleRowClick(row, index, flatData)}
|
249
|
-
>
|
250
|
-
{enhancedColumns.map(column => (
|
251
|
-
<td
|
252
|
-
key={column.accessorKey || column.id}
|
253
|
-
className={`text-left font-normal border-r ${column?.cellProps?.className || ''}`}
|
254
|
-
style={{
|
255
|
-
minWidth: `${column.minWidth}px`,
|
256
|
-
textAlign: column?.textAlign,
|
257
|
-
...column?.cellProps?.style,
|
258
|
-
}}
|
259
|
-
>
|
260
|
-
{typeof column.cell === 'function' ? column.cell({ row }) : null}
|
261
|
-
</td>
|
262
|
-
))}
|
263
|
-
</tr>
|
264
|
-
))
|
265
|
-
) : (
|
206
|
+
) : (
|
207
|
+
<div className="overflow-hidden">
|
208
|
+
<div
|
209
|
+
ref={tableContainerRef}
|
210
|
+
className="overflow-auto w-full"
|
211
|
+
style={{ maxHeight, height }}
|
212
|
+
onScroll={(e) => handleScroll(e.currentTarget)}
|
213
|
+
>
|
214
|
+
<table className="w-full border-collapse">
|
215
|
+
<thead
|
216
|
+
className="sticky top-0 z-1 bg-blue-300"
|
217
|
+
style={{ ...headerProps.style }}
|
218
|
+
>
|
266
219
|
<tr>
|
267
|
-
|
268
|
-
|
269
|
-
|
220
|
+
{enhancedColumns.map(column => (
|
221
|
+
<th
|
222
|
+
key={column.accessorKey || column.id}
|
223
|
+
className="text-left font-normal h-[40px]"
|
224
|
+
style={{
|
225
|
+
width: column.size,
|
226
|
+
minWidth: column.minWidth,
|
227
|
+
textAlign: column.textAlign,
|
228
|
+
}}
|
229
|
+
>
|
230
|
+
{typeof column.header === 'function' ? column.header({ data: flatData }) : column.header}
|
231
|
+
</th>
|
232
|
+
))}
|
270
233
|
</tr>
|
271
|
-
|
272
|
-
|
273
|
-
|
234
|
+
</thead>
|
235
|
+
<tbody>
|
236
|
+
{flatData.length > 0 ? (
|
237
|
+
flatData.map((row, index) => (
|
238
|
+
<tr
|
239
|
+
key={row.id}
|
240
|
+
className={`border-t border-x border-gray-200 hover:bg-[#dee1f2] h-[${rowHeights}px] ${selectedRows[row.id] ? 'bg-[#dee1f2]' : ''}`}
|
241
|
+
onClick={() => handleRowClick(row, index, flatData)}
|
242
|
+
>
|
243
|
+
{enhancedColumns.map(column => (
|
244
|
+
<td
|
245
|
+
key={column.accessorKey || column.id}
|
246
|
+
className={`text-left font-normal border-r ${column?.cellProps?.className || ''}`}
|
247
|
+
style={{
|
248
|
+
minWidth: `${column.minWidth}px`,
|
249
|
+
textAlign: column?.textAlign,
|
250
|
+
...column?.cellProps?.style,
|
251
|
+
}}
|
252
|
+
>
|
253
|
+
{typeof column.cell === 'function' ? column.cell({ row }) : null}
|
254
|
+
</td>
|
255
|
+
))}
|
256
|
+
</tr>
|
257
|
+
))
|
258
|
+
) : (
|
259
|
+
<tr>
|
260
|
+
<td colSpan={enhancedColumns.length} className="text-center py-4">
|
261
|
+
{emptyText || 'No data available'}
|
262
|
+
</td>
|
263
|
+
</tr>
|
264
|
+
)}
|
265
|
+
</tbody>
|
266
|
+
</table>
|
267
|
+
</div>
|
274
268
|
</div>
|
275
|
-
|
276
|
-
|
277
|
-
</div>
|
269
|
+
)
|
270
|
+
}
|
271
|
+
</div >
|
278
272
|
);
|
279
273
|
}
|
280
274
|
|