react-live-data-table 1.0.19 → 1.1.2

package/package.json

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

package/src/ReactDataTable.jsx

@@ -21,6 +21,10 @@ function ReactDataTable({
   rowStyle = {},
   rowClassName = "",
   columnReorder = false,
+  subTableColumns = null, // Array of column definitions for subtable
+  expandedRows = {},
+  onRowExpand = null,
+  subTableWidth = "100%",
 }) {
   const tableContainerRef = React.useRef(null);
   const [data, setData] = React.useState({ pages: [], meta: { totalPages: 1 } });
@@ -33,17 +37,103 @@ function ReactDataTable({
   const [startX, setStartX] = useState(null);
   const [initialWidth, setInitialWidth] = useState(null);
   const [tableWidth, setTableWidth] = useState(0);
-  
+
   // Column reordering state - only used when columnReorder is true
   const [orderedColumns, setOrderedColumns] = useState(columns);
   const [draggedColumn, setDraggedColumn] = useState(null);
   const [dragOverColumn, setDragOverColumn] = useState(null);
-  
-  // Ref to store column widths to ensure persistence during data loading
-  const persistedColumnWidthsRef = React.useRef([]);
 
+  const persistedColumnWidthsRef = React.useRef([]);
   const flatData = data.pages.flatMap(page => page.data);
 
+  // Helper function to check if a row has subtable data
+  const hasSubTableData = useCallback((row) => {
+    if (!subTableColumns) return false;
+
+    return subTableColumns.some(col => {
+      const value = row[col.accessorKey || col.id];
+      // Check for arrays with content OR non-empty strings
+      return (Array.isArray(value) && value.length > 0) ||
+        (typeof value === 'string' && value.trim() !== '' && value !== '--');
+    });
+  }, [subTableColumns]);
+
+  // Helper function to get subtable rows from main row data
+  const getSubTableRows = useCallback((row) => {
+    if (!subTableColumns || !hasSubTableData(row)) return [];
+
+    // Find the maximum length among all array columns, default to 1 for strings
+    let maxLength = 1; // At least 1 row for string values
+    subTableColumns.forEach(col => {
+      const value = row[col.accessorKey || col.id];
+      if (Array.isArray(value)) {
+        maxLength = Math.max(maxLength, value.length);
+      }
+    });
+
+    // Create rows for subtable
+    const subRows = [];
+    for (let i = 0; i < maxLength; i++) {
+      const subRow = { id: `${row.id}-sub-${i}` };
+
+      subTableColumns.forEach(col => {
+        const value = row[col.accessorKey || col.id];
+        if (Array.isArray(value)) {
+          // For arrays, use the value at index i, or undefined if out of bounds
+          subRow[col.accessorKey || col.id] = i < value.length ? value[i] : undefined;
+        } else {
+          // For strings/non-arrays, use the value only in the first row
+          subRow[col.accessorKey || col.id] = i === 0 ? value : undefined;
+        }
+      });
+
+      subRows.push(subRow);
+    }
+
+    return subRows;
+  }, [subTableColumns, hasSubTableData]);
+
+  const calculateDynamicHeight = useCallback(() => {
+    const expandedCount = Object.values(expandedRows || {}).filter(Boolean).length;
+
+    if (expandedCount === 0) {
+      return height;
+    }
+
+    // Calculate subtable height based on actual data
+    let totalSubTableHeight = 0;
+    Object.keys(expandedRows || {}).forEach(rowId => {
+      if (expandedRows[rowId]) {
+        const row = flatData.find(r => r.id === rowId);
+        if (row) {
+          const subRows = getSubTableRows(row);
+          const headerHeight = 36;
+          const rowsHeight = subRows.length * 32; // Assuming 32px per subtable row
+          totalSubTableHeight += headerHeight + rowsHeight + 20; // +20 for padding
+        }
+      }
+    });
+
+    const baseHeight = typeof height === 'string' ? parseInt(height) : height;
+    return `${Math.max(baseHeight, baseHeight + totalSubTableHeight)}px`;
+  }, [height, expandedRows, flatData, getSubTableRows]);
+
+  const dynamicHeight = calculateDynamicHeight();
+
+  const handleRowExpand = useCallback((rowId) => {
+    const currentExpandedRows = expandedRows || {};
+    const isCurrentlyExpanded = currentExpandedRows[rowId];
+
+    if (isCurrentlyExpanded) {
+      const newExpandedRows = { ...currentExpandedRows };
+      delete newExpandedRows[rowId];
+      onRowExpand?.(newExpandedRows, rowId);
+    } else {
+      const newExpandedRows = { [rowId]: true };
+      onRowExpand?.(newExpandedRows, rowId);
+    }
+  }, [expandedRows, onRowExpand]);
+
   const checkboxColumn = {
     id: 'select',
     size: 50,
@@ -113,9 +203,59 @@ function ReactDataTable({
     }
   };
 
-  const enhancedColumns = showCheckbox ? [checkboxColumn, ...orderedColumns] : orderedColumns;
+  // Expand/collapse column for sub-tables - keep it similar to checkbox column
+  const expandColumn = {
+    id: 'expand',
+    size: 50,
+    minWidth: 50,
+    resizable: false,
+    reorderable: false,
+    textAlign: "center",
+    header: () => (
+      <div className="flex items-center justify-center h-[40px]">
+        <span className="text-xs text-gray-600">Expand</span>
+      </div>
+    ),
+    cell: ({ row }) => {
+      const isExpanded = (expandedRows || {})[row.id];
+      const hasSubData = hasSubTableData(row);
+
+      if (!hasSubData) {
+        return <div className="flex items-center justify-center h-[40px]"></div>;
+      }
+
+      return (
+        <div className="flex items-center justify-center h-[40px]" onClick={(e) => e.stopPropagation()}>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              handleRowExpand(row.id);
+            }}
+            className="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 transition-colors"
+          >
+            <svg
+              className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </div>
+      );
+    }
+  };
+
+  const hasAnySubTableData = subTableColumns && flatData.some(row => hasSubTableData(row));
+
+  const enhancedColumns = (() => {
+    let cols = [];
+    if (showCheckbox) cols.push(checkboxColumn);
+    if (hasAnySubTableData) cols.push(expandColumn);
+    return [...cols, ...orderedColumns];
+  })();
 
-  // Update ordered columns when columns prop changes
   useEffect(() => {
     setOrderedColumns(columns);
   }, [columns]);
@@ -127,10 +267,9 @@ function ReactDataTable({
     }
   }, [selected]);
 
-  // Initialize column widths array only once when component mounts or columns change
   useEffect(() => {
-    const allColumns = showCheckbox ? [{ id: 'select', size: 50 }, ...orderedColumns] : orderedColumns;
-
+    const allColumns = enhancedColumns;
+    
     // If we have persisted widths and the number of columns matches, use those
     if (persistedColumnWidthsRef.current.length === allColumns.length) {
       setColumnWidths([...persistedColumnWidthsRef.current]);
@@ -143,7 +282,7 @@ function ReactDataTable({
       // Store in our ref for persistence
       persistedColumnWidthsRef.current = [...initialWidths];
     }
-  }, [orderedColumns, showCheckbox]);
+  }, [showCheckbox, hasAnySubTableData]);
 
   useEffect(() => {
     setData({ pages: [], meta: { totalPages: 1 } });
@@ -186,7 +325,7 @@ function ReactDataTable({
 
   const handleDrop = (e, dropIndex) => {
     e.preventDefault();
-    
+
     if (!columnReorder || draggedColumn === null || draggedColumn === dropIndex) {
       setDraggedColumn(null);
       setDragOverColumn(null);
@@ -201,12 +340,20 @@ function ReactDataTable({
 
     const newColumns = [...enhancedColumns];
     const draggedColumnData = newColumns[draggedColumn];
-    
+
     newColumns.splice(draggedColumn, 1);
     const adjustedDropIndex = draggedColumn < dropIndex ? dropIndex - 1 : dropIndex;
     newColumns.splice(adjustedDropIndex, 0, draggedColumnData);
 
-    const updatedOrderedColumns = showCheckbox ? newColumns.slice(1) : newColumns;
+    // FIXED: Updated logic to handle different column types
+    let updatedOrderedColumns;
+    if (showCheckbox && hasAnySubTableData) {
+      updatedOrderedColumns = newColumns.slice(2); // Remove both checkbox and expand columns
+    } else if (showCheckbox || hasAnySubTableData) {
+      updatedOrderedColumns = newColumns.slice(1); // Remove one column (checkbox or expand)
+    } else {
+      updatedOrderedColumns = newColumns;
+    }
     setOrderedColumns(updatedOrderedColumns);
 
     // Reorder column widths
@@ -217,8 +364,6 @@ function ReactDataTable({
     setColumnWidths(newColumnWidths);
     persistedColumnWidthsRef.current = newColumnWidths;
 
-    // onColumnReorder?.(updatedOrderedColumns);
-
     setDraggedColumn(null);
     setDragOverColumn(null);
   };
@@ -229,17 +374,12 @@ function ReactDataTable({
     const delta = e.clientX - startX;
     const newWidth = Math.max(enhancedColumns[resizingIndex]?.minWidth || 80, initialWidth + delta);
 
-    // Create a new array of column widths with the updated width
     const newColumnWidths = [...columnWidths];
     newColumnWidths[resizingIndex] = newWidth;
 
-    // Update the column widths state
     setColumnWidths(newColumnWidths);
-
-    // Update our persisted ref to maintain widths during pagination
     persistedColumnWidthsRef.current = newColumnWidths;
 
-    // Recalculate table width based on the new column widths
     const newTableWidth = newColumnWidths.reduce((sum, width) => sum + width, 0);
     setTableWidth(newTableWidth);
   }, [resizingIndex, startX, initialWidth, enhancedColumns, columnWidths]);
@@ -250,7 +390,6 @@ function ReactDataTable({
     setInitialWidth(null);
   }, []);
 
-  // Add resize event listeners
   useEffect(() => {
     if (resizingIndex !== null) {
       document.addEventListener('mousemove', handleMouseMove);
@@ -299,7 +438,6 @@ function ReactDataTable({
         limit: defaultLimit
       });
 
-      // Update the data but maintain our column widths
       setData(prev => ({
         pages: [...prev.pages, nextData],
         meta: nextData.meta
@@ -423,7 +561,7 @@ function ReactDataTable({
 
       {
         flatData.length === 0 && !loading ? (
-          <div className="flex items-center justify-center" style={{ height }}>
+          <div className="flex items-center justify-center" style={{ height: dynamicHeight }}>
             <div className="text-gray-500">
               {emptyText || 'No data available'}
             </div>
@@ -433,13 +571,18 @@ function ReactDataTable({
             <div
               ref={tableContainerRef}
               className="overflow-auto w-full"
-              style={{ maxHeight, height }}
+              style={{
+                maxHeight: dynamicHeight,
+                height: dynamicHeight
+              }}
               onScroll={(e) => handleScroll(e.currentTarget)}
             >
               <table
                 className="w-full border-collapse"
                 style={{
                   tableLayout: 'fixed',
+                  width: `${tableWidth}px`, // FIXED: Use calculated table width for scrolling
+                  minWidth: '100%'
                 }}
               >
                 <thead
@@ -455,16 +598,14 @@ function ReactDataTable({
                       return (
                         <th
                           key={column.accessorKey || column.id}
-                          className={`text-left font-normal h-[40px] border-b border-t border-solid border-[#e4e3e2] relative select-none ${
-                            columnIndex < enhancedColumns.length - 1 ? 'border-r' : ''
-                          } ${isReorderable ? 'cursor-move' : ''} ${
-                            isDropTarget ? 'bg-blue-400' : ''
-                          }`}
+                          className={`text-left font-normal h-[40px] border-b border-t border-solid border-[#e4e3e2] relative select-none ${columnIndex < enhancedColumns.length - 1 ? 'border-r' : ''
+                            } ${isReorderable ? 'cursor-move' : ''} ${isDropTarget ? 'bg-blue-400' : ''
+                            }`}
                           style={{
                             width: `${width}px`,
                             minWidth: `${width}px`,
                             maxWidth: `${width}px`,
-                            textAlign: column.textAlign,
+                            textAlign: column.textAlign || "left",
                           }}
                           draggable={isReorderable}
                           onDragStart={(e) => handleDragStart(e, columnIndex)}
@@ -480,9 +621,8 @@ function ReactDataTable({
                           {/* Resize handle - Only show if column is resizable */}
                           {column.resizable !== false && (
                             <div
-                              className={`absolute top-0 right-0 h-full w-4 flex items-center justify-center group ${
-                                resizingIndex === columnIndex ? 'bg-blue-100' : 'hover:bg-blue-100'
-                              } transition-colors duration-200`}
+                              className={`absolute top-0 right-0 h-full w-4 flex items-center justify-center group ${resizingIndex === columnIndex ? 'bg-blue-100' : 'hover:bg-blue-100'
+                                } transition-colors duration-200`}
                               onMouseDown={(e) => handleResizeStart(e, columnIndex)}
                               style={{
                                 touchAction: 'none',
@@ -501,41 +641,128 @@ function ReactDataTable({
                   {flatData.length > 0 ? (
                     flatData.map((row, rowIndex) => {
                       const isLastRow = rowIndex === flatData.length - 1;
+                      const isExpanded = (expandedRows || {})[row.id];
+                      const subRows = getSubTableRows(row);
+
                       return (
-                        <tr
-                          key={row.id}
-                          className={`react-live-data-table-row-${rowIndex} border-t ${isLastRow ? 'border-b' : ''} border-gray-200 hover:bg-[#dee1f2] ${selectedRows[row.id] ? 'bg-[#dee1f2]' : ''} ${rowClassName} cursor-pointer`}
-                          style={{
-                            height: `${rowHeights}px`,
-                            ...rowStyle,
-                            ...(typeof rowStyle === 'function' ? rowStyle(row, rowIndex) : {})
-                          }}
-                          onClick={() => handleRowClick(row, rowIndex, flatData)}
-                        >
-                          {enhancedColumns.map((column, columnIndex) => {
-                            const width = columnWidths[columnIndex] || column.size || column.minWidth || 150;
-
-                            return (
-                              <td
-                                key={column.accessorKey || column.id}
-                                className={`text-left font-normal ${columnIndex < enhancedColumns.length - 1 ? 'border-r' : ''
-                                  } ${column?.cellProps?.className || ''}`}
-                                style={{
-                                  width: `${width}px`,
-                                  minWidth: `${width}px`,
-                                  maxWidth: `${width}px`,
-                                  textAlign: column?.textAlign,
-                                  ...column?.cellProps?.style,
-                                  overflow: 'hidden',
-                                  textOverflow: 'ellipsis',
-                                  whiteSpace: 'nowrap'
-                                }}
-                              >
-                                {typeof column.cell === 'function' ? column.cell({ row }) : null}
+                        <React.Fragment key={row.id}>
+                          <tr
+                            className={`react-live-data-table-row-${rowIndex} border-t ${isLastRow ? 'border-b' : ''} border-gray-200 hover:bg-[#dee1f2] ${selectedRows[row.id] ? 'bg-[#dee1f2]' : ''} ${rowClassName} cursor-pointer`}
+                            style={{
+                              height: `${rowHeights}px`,
+                              ...rowStyle,
+                              ...(typeof rowStyle === 'function' ? rowStyle(row, rowIndex) : {})
+                            }}
+                            onClick={() => handleRowClick(row, rowIndex, flatData)}
+                          >
+                            {enhancedColumns.map((column, columnIndex) => {
+                              const width = columnWidths[columnIndex] || column.size || column.minWidth || 150;
+
+                              return (
+                                <td
+                                  key={column.accessorKey || column.id}
+                                  className={`text-left font-normal ${columnIndex < enhancedColumns.length - 1 ? 'border-r' : ''
+                                    } ${column?.cellProps?.className || ''}`}
+                                  style={{
+                                    width: `${width}px`,
+                                    minWidth: `${width}px`,
+                                    maxWidth: `${width}px`,
+                                    textAlign: column.textAlign || "left",
+                                    ...column?.cellProps?.style,
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap'
+                                  }}
+                                >
+                                  {typeof column.cell === 'function' ? column.cell({ row }) : null}
+                                </td>
+                              );
+                            })}
+                          </tr>
+                          {/* Subtable row */}
+                          {isExpanded && subRows.length > 0 && (
+                            <tr className="bg-gray-50 border-b border-gray-200">
+                              <td colSpan={enhancedColumns.length} className="p-0">
+                                <div className="bg-white border border-gray-200" style={{ width: subTableWidth, maxWidth: '100%' }}>
+                                  <div
+                                    className="sub-table-container"
+                                    style={{
+                                      maxHeight: "300px",
+                                      width: '100%',
+                                      overflow: 'auto',
+                                      scrollbarWidth: 'thin',
+                                      scrollbarColor: '#cbd5e0 #f7fafc',
+                                    }}
+                                  >
+                                    <style>
+                                      {`
+                                        .sub-table-container::-webkit-scrollbar {
+                                          width: 6px;
+                                          height: 6px;
+                                        }
+                                        .sub-table-container::-webkit-scrollbar-track {
+                                          background: #f7fafc;
+                                          border-radius: 3px;
+                                        }
+                                        .sub-table-container::-webkit-scrollbar-thumb {
+                                          background: #cbd5e0;
+                                          border-radius: 3px;
+                                        }
+                                        .sub-table-container::-webkit-scrollbar-thumb:hover {
+                                          background: #a0aec0;
+                                        }
+                                      `}
+                                    </style>
+                                    <table className="w-full" style={{ tableLayout: 'fixed' }}>
+                                      <thead className="bg-gray-100 sticky top-0 z-10">
+                                        <tr>
+                                          {subTableColumns.map((col, colIndex) => {
+                                            return (
+                                              <th
+                                                key={col.id || col.accessorKey || colIndex}
+                                                className={`px-4 py-2 text-left text-sm font-medium text-black border-b border-gray-200 ${colIndex < subTableColumns.length - 1 ? 'border-r border-gray-200' : ''
+                                                  }`}
+                                                style={{
+                                                  width: col.size ? `${col.size}px` : "auto",
+                                                  minWidth: col.minWidth ? `${col.minWidth}px` : "80px",
+                                                }}
+                                              >
+                                                {typeof col.header === 'function' ? col.header() : (col.header || col.name)}
+                                              </th>
+
+                                            );
+                                          })}
+                                        </tr>
+                                      </thead>
+                                      <tbody>
+                                        {subRows.map((subRow, subRowIndex) => (
+                                          <tr key={subRow.id} className="border-b border-gray-100 hover:bg-gray-50">
+                                            {subTableColumns.map((col, colIndex) => {
+                                              return (
+                                                <td
+                                                  key={col.id || col.accessorKey || colIndex}
+                                                  className={`px-4 py-2 text-sm text-gray-900 ${colIndex < subTableColumns.length - 1 ? 'border-r border-gray-200' : ''
+                                                    }`}
+                                                  style={{
+                                                    width: col.size ? `${col.size}px` : "auto",
+                                                    minWidth: col.minWidth ? `${col.minWidth}px` : "80px",
+                                                  }}
+                                                >
+                                                  {col.cell ? col.cell({ row: subRow }) : subRow[col.accessorKey || col.id]}
+                                                </td>
+
+                                              );
+                                            })}
+                                          </tr>
+                                        ))}
+                                      </tbody>
+                                    </table>
+                                  </div>
+                                </div>
                               </td>
-                            );
-                          })}
-                        </tr>
+                            </tr>
+                          )}
+                        </React.Fragment>
                       );
                     })
                   ) : (