react-live-data-table 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-live-data-table",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Your React component package with Tailwind",
   "main": "src/index.js",
   "module": "dist/index.esm.js",

package/src/ReactDataTable.jsx

@@ -189,92 +189,86 @@ 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 role="status" className="p-2">
-          <svg
-            aria-hidden="true"
-            className="inline w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-green-500"
-            viewBox="0 0 100 101"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              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"
-              fill="#555e68"
-            />
-          </svg>
+        <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>
         </div>
-      </div>}
-      {flatData.length === 0 && !loading ? (
-        <div className="flex items-center justify-center" style={{ height }}>
-          <div className="text-gray-500">
-            {emptyText || 'No data available'}
+      </div>
+      }
+
+      {
+        flatData.length === 0 && !loading ? (
+          <div className="flex items-center justify-center" style={{ height }}>
+            <div className="text-gray-500">
+              {emptyText || 'No data available'}
+            </div>
           </div>
-        </div>
-      ) : (
-        <div className="overflow-hidden">
-          <div
-            ref={tableContainerRef}
-            className="overflow-auto w-full"
-            style={{ maxHeight, height }}
-            onScroll={(e) => handleScroll(e.currentTarget)}
-          >
-            <table className="w-full border-collapse">
-              <thead
-                className="sticky top-0 z-1 bg-blue-300"
-                style={{ ...headerProps.style }}
-              >
-                <tr>
-                  {enhancedColumns.map(column => (
-                    <th
-                      key={column.accessorKey || column.id}
-                      className="text-left font-normal h-[40px]"
-                      style={{
-                        width: column.size,
-                        minWidth: column.minWidth,
-                        textAlign: column.textAlign,
-                      }}
-                    >
-                      {typeof column.header === 'function' ? column.header({ data: flatData }) : column.header}
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {flatData.length > 0 ? (
-                  flatData.map((row, index) => (
-                    <tr
-                      key={row.id}
-                      className={`border-t border-x border-gray-200 hover:bg-[#dee1f2] h-[${rowHeights}px] ${selectedRows[row.id] ? 'bg-[#dee1f2]' : ''}`}
-                      onClick={() => handleRowClick(row, index, flatData)}
-                    >
-                      {enhancedColumns.map(column => (
-                        <td
-                          key={column.accessorKey || column.id}
-                          className={`text-left font-normal border-r ${column?.cellProps?.className || ''}`}
-                          style={{
-                            minWidth: `${column.minWidth}px`,
-                            textAlign: column?.textAlign,
-                            ...column?.cellProps?.style,
-                          }}
-                        >
-                          {typeof column.cell === 'function' ? column.cell({ row }) : null}
-                        </td>
-                      ))}
-                    </tr>
-                  ))
-                ) : (
+        ) : (
+          <div className="overflow-hidden">
+            <div
+              ref={tableContainerRef}
+              className="overflow-auto w-full"
+              style={{ maxHeight, height }}
+              onScroll={(e) => handleScroll(e.currentTarget)}
+            >
+              <table className="w-full border-collapse">
+                <thead
+                  className="sticky top-0 z-1 bg-blue-300"
+                  style={{ ...headerProps.style }}
+                >
                   <tr>
-                    <td colSpan={enhancedColumns.length} className="text-center py-4">
-                      {emptyText || 'No data available'}
-                    </td>
+                    {enhancedColumns.map(column => (
+                      <th
+                        key={column.accessorKey || column.id}
+                        className="text-left font-normal h-[40px]"
+                        style={{
+                          width: column.size,
+                          minWidth: column.minWidth,
+                          textAlign: column.textAlign,
+                        }}
+                      >
+                        {typeof column.header === 'function' ? column.header({ data: flatData }) : column.header}
+                      </th>
+                    ))}
                   </tr>
-                )}
-              </tbody>
-            </table>
+                </thead>
+                <tbody>
+                  {flatData.length > 0 ? (
+                    flatData.map((row, index) => (
+                      <tr
+                        key={row.id}
+                        className={`border-t border-x border-gray-200 hover:bg-[#dee1f2] h-[${rowHeights}px] ${selectedRows[row.id] ? 'bg-[#dee1f2]' : ''}`}
+                        onClick={() => handleRowClick(row, index, flatData)}
+                      >
+                        {enhancedColumns.map(column => (
+                          <td
+                            key={column.accessorKey || column.id}
+                            className={`text-left font-normal border-r ${column?.cellProps?.className || ''}`}
+                            style={{
+                              minWidth: `${column.minWidth}px`,
+                              textAlign: column?.textAlign,
+                              ...column?.cellProps?.style,
+                            }}
+                          >
+                            {typeof column.cell === 'function' ? column.cell({ row }) : null}
+                          </td>
+                        ))}
+                      </tr>
+                    ))
+                  ) : (
+                    <tr>
+                      <td colSpan={enhancedColumns.length} className="text-center py-4">
+                        {emptyText || 'No data available'}
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
           </div>
-        </div>
-      )}
-    </div>
+        )
+      }
+    </div >
   );
 }