react-live-data-table 1.0.15 → 1.0.16

package/package.json

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

package/readme.md

@@ -8,7 +8,7 @@ A highly customizable and efficient data grid table for React. It supports featu
 
 To install the package, run one of the following commands:
 
-```bash
+bash
 npm install react-data-grid-table
 
 # React Data Grid
@@ -41,40 +41,4 @@ A flexible React data grid component with support for pagination, row selection,
 | `rowHeights` | `number` | `40` | Height of each row |
 | `headerProps` | `object` | `{}` | Custom header properties |
 
-
-
-
-### Column Definition
-
-```typescript
-interface ColumnDefinition {
- field: string;          // Key of the data field to display
- headerName: string;     // Text to show in column header
- width?: number;         // Column width in pixels
- sortable?: boolean;     // Enable column sorting
- render?: (value: any, rowData: Object) => React.ReactNode;  // Custom cell renderer
-
-
 ## Basic Usage
-
-```jsx
-import { ReactDataTable } from 'react-data-grid';
-
-const App = () => {
-  const columns = [
-    { field: 'id', headerName: 'ID' },
-    { field: 'name', headerName: 'Name' }
-  ];
-
-  const data = [
-    { id: 1, name: 'John' },
-    { id: 2, name: 'Jane' }
-  ];
-
-  return (
-    <ReactDataTable 
-      columns={columns}
-      dataSource={data}
-    />
-  );
-};

package/src/ReactDataTable.jsx

@@ -15,13 +15,26 @@ function ReactDataTable({
   staticData = null,
   emptyText,
   rowHeights = 40,
-  headerProps = {} // Added default value
+  headerProps = {},
+  selected = {},
+  showSelectAllCheckbox = true,
+  rowStyle = {}, 
+  rowClassName = "" 
 }) {
   const tableContainerRef = React.useRef(null);
   const [data, setData] = React.useState({ pages: [], meta: { totalPages: 1 } });
   const [isFetching, setIsFetching] = React.useState(false);
   const [pageParam, setPageParam] = React.useState(1);
-  const [selectedRows, setSelectedRows] = React.useState({});
+  const [selectedRows, setSelectedRows] = React.useState(selected);
+  const previousSelected = React.useRef(selected);
+
+ 
+  useEffect(() => {
+    if (JSON.stringify(previousSelected.current) !== JSON.stringify(selected)) {
+      setSelectedRows({...selected});
+      previousSelected.current = selected;
+    }
+  }, [selected]);
 
 
   useEffect(() => {
@@ -164,117 +177,191 @@ function ReactDataTable({
     size: 50,
     minWidth: 50,
     textAlign: "center",
-    header: ({ data }) => (
-      <div className="flex items-center justify-center h-[40px]">
-        <input
-          type="checkbox"
-          checked={Object.keys(selectedRows).length > 0 && data.every(row => selectedRows[row.id])}
-          onChange={(e) => handleSelectAll(e.target.checked, flatData)}
-        />
-      </div>
-    ),
-    cell: ({ row }) => (
-      <div className="flex items-center justify-center h-[40px]">
-        <input
-          type="checkbox"
-          checked={!!selectedRows[row.id]}
-          onChange={(e) => handleSelectRow(e.target.checked, row, flatData)}
-        />
-      </div>
-    ),
+    header: ({ data }) => {
+      const allSelected = flatData.length > 0 && flatData.every(row => selectedRows[row.id]);
+      const someSelected = flatData.some(row => selectedRows[row.id]) && !allSelected;
+
+      
+      return (
+        <div className="flex items-center justify-center h-[40px]">
+          {showSelectAllCheckbox && (
+            <div className="relative">
+              <input
+                id={data.id}
+                type="checkbox"
+                className='bg-gray-700 rounded-4 border-gray-200 text-blue-400 focus:ring-0 focus:ring-white'
+                checked={allSelected}
+                onChange={(e) => handleSelectAll(e.target.checked, flatData)}
+              />
+              {allSelected ? (
+                <svg
+                  className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3 h-3 pointer-events-none text-white"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              ) : (
+                someSelected && 
+                <svg
+                  className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3 h-3 pointer-events-none "
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              )}
+            </div>
+          )}
+        </div>
+      );
+    },
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center justify-center h-[40px]" onClick={(e) => e.stopPropagation()}>
+          <input
+            id={row.id}
+            type="checkbox"
+            className='bg-gray-700 rounded-4 border-gray-200 text-blue-400 focus:ring-0 focus:ring-white'
+            checked={!!selectedRows[row.id]}
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => { e.stopPropagation(); handleSelectRow(e.target.checked, row, flatData) }}
+          />
+        </div>
+      )
+    }
   };
 
   const enhancedColumns = showCheckbox ? [checkboxColumn, ...columns] : columns;
 
   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 data-testid="loading-spinner" 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="currentColor"
-        />
-      </svg>
-    </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>
-        </div>
-      ) : (
-        <div className="overflow-hidden">
-          <div
-            ref={tableContainerRef}
-            className="overflow-auto w-full"
-            style={{ maxHeight, height }}
-            onScroll={(e) => handleScroll(e.currentTarget)}
+    <div className="bg-white relative w-full react-live-data-table" >
+      {loading && (
+        <div className="absolute inset-0 bg-white/50 z-20 flex items-center justify-center">
+          <svg
+            style={{
+              animation: 'spin 1s linear infinite',
+              width: '24px',
+              height: '24px'
+            }}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <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>
+              {`@keyframes spin {from {transform: rotate(0deg)} to {transform: rotate(360deg)}}`}
+            </style>
+            <circle
+              style={{ opacity: 0.25 }}
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              style={{ opacity: 0.75 }}
+              fill="currentColor"
+              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"
+            />
+          </svg>
+
+        </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 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, columnIndex) => (
+                      <th
+                        key={column.accessorKey || column.id}
+                        className={`text-left font-normal h-[40px] border-b border-t border-solid border-[#e4e3e2] ${
+                          columnIndex < enhancedColumns.length - 1 ? 'border-r' : ''
+                        }`}
+                        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) => {
+                      const isLastRow = index === flatData.length - 1;
+                      return (
+                        <tr
+                          key={row.id}
+                          className={`border-t ${isLastRow ? 'border-b' : ''} border-gray-200 hover:bg-[#dee1f2] ${selectedRows[row.id] ? 'bg-[#dee1f2]' : ''} ${rowClassName}`}
                           style={{
-                            minWidth: `${column.minWidth}px`,
-                            textAlign: column?.textAlign,
-                            ...column?.cellProps?.style,
+                            height: `${rowHeights}px`,
+                            ...rowStyle,
+                            ...(typeof rowStyle === 'function' ? rowStyle(row, index) : {})
                           }}
+                          onClick={() => handleRowClick(row, index, flatData)}
                         >
-                          {typeof column.cell === 'function' ? column.cell({ row }) : null}
-                        </td>
-                      ))}
+                          {enhancedColumns.map((column, cellIndex) => (
+                            <td
+                              key={column.accessorKey || column.id}
+                              className={`text-left font-normal ${
+                                 cellIndex < enhancedColumns.length-1  ? '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>
-                  ))
-                ) : (
-                  <tr>
-                    <td colSpan={enhancedColumns.length} className="text-center py-4">
-                      {emptyText || 'No data available'}
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
+                  )}
+                </tbody>
+              </table>
+            </div>
           </div>
-        </div>
-      )}
-    </div>
+        )
+      }
+    </div >
   );
 }