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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/ReactDataTable.jsx +75 -81
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-live-data-table",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "Your React component package with Tailwind",
5
5
  "main": "src/index.js",
6
6
  "module": "dist/index.esm.js",
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="p-2">
193
- <svg
194
- aria-hidden="true"
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
- {flatData.length === 0 && !loading ? (
208
- <div className="flex items-center justify-center" style={{ height }}>
209
- <div className="text-gray-500">
210
- {emptyText || 'No data available'}
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
- </div>
213
- ) : (
214
- <div className="overflow-hidden">
215
- <div
216
- ref={tableContainerRef}
217
- className="overflow-auto w-full"
218
- style={{ maxHeight, height }}
219
- onScroll={(e) => handleScroll(e.currentTarget)}
220
- >
221
- <table className="w-full border-collapse">
222
- <thead
223
- className="sticky top-0 z-1 bg-blue-300"
224
- style={{ ...headerProps.style }}
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
- <td colSpan={enhancedColumns.length} className="text-center py-4">
268
- {emptyText || 'No data available'}
269
- </td>
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
- </tbody>
273
- </table>
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
- </div>
276
- )}
277
- </div>
269
+ )
270
+ }
271
+ </div >
278
272
  );
279
273
  }
280
274