fix: Table row styling alignment issues, inner child listing

Author: fathima-mirza

src/components/MultiLevelTable.tsx

@@ -438,22 +438,25 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
     if (!children || !expandedRows.has(parentId)) return null;
 
     return children.map((child) => (
-      <TableRow
-        key={child.id}
-        row={child}
-        columns={columns}
-        hasChildren={!!child.children && child.children.length > 0}
-        isExpanded={expandedRows.has(child.id)}
-        onToggle={() => onRowToggle(child.id)}
-        level={level}
-        theme={mergedTheme}
-        selectable={selectable}
-        isRowSelected={selectionState.selectedRows.has(child.id)}
-        onRowSelect={() => onRowSelect(child.id)}
-        onRowClick={onRowClick}
-        onDelete={handleDeleteClick}
-        expandIcon={expandIcon}
-      />
+      <React.Fragment key={child.id}>
+        <TableRow
+          row={child}
+          columns={columns}
+          hasChildren={!!child.children && child.children.length > 0}
+          isExpanded={expandedRows.has(child.id)}
+          onToggle={() => onRowToggle(child.id)}
+          level={level}
+          theme={mergedTheme}
+          selectable={selectable}
+          isRowSelected={selectionState.selectedRows.has(child.id)}
+          onRowSelect={() => onRowSelect(child.id)}
+          onRowClick={onRowClick}
+          onDelete={handleDeleteClick}
+          expandIcon={expandIcon}
+        />
+        {/* Recursively render nested children */}
+        {child.children && child.children.length > 0 && renderNestedRows(child.id, level + 1)}
+      </React.Fragment>
     ));
   };
 

src/components/TableCell.tsx

@@ -108,14 +108,17 @@ export const TableCell: React.FC<TableCellProps> = ({
           cell.render('Cell')
         ) : (
           <>
-            {hasChildren ? (
+            {/* Only show expand button in the first column when row has children */}
+            {index === 0 && hasChildren ? (
               <div
                 onClick={handleExpandClick}
                 className="expand-button"
               >
                 {expandIcon || <ExpandIcon isExpanded={isExpanded} theme={theme} mode="expand" />}
               </div>
-            ) : <div className="expand-button" />}
+            ) : index === 0 ? (
+              <div className="expand-button" />
+            ) : null}
             {cell.render('Cell')}
           </>
         )}

src/components/TableRow.tsx

@@ -141,14 +141,19 @@ export const TableRow: React.FC<TableRowProps> = ({
                   <div className="placeholder-spacer" />
                 )}
 
-                <div 
-                  onClick={handleExpandClick}
-                  className={`expand-button ${isParentRow || index !== 0 ? 'parent-row-expand-button' : 'nested-row-expand-button'} ${hasChildren && index === 0 ? 'expand-button-visible' : 'expand-button-hidden'}`}
-                >
-                  {expandIcon || (
-                    <ExpandIcon isExpanded={isExpanded} theme={theme} mode="expand" />
-                  )}
-                </div>
+                {/* Only show expand button in the first column when row has children */}
+                {index === 0 && (
+                  <div 
+                    onClick={handleExpandClick}
+                    className={`expand-button ${isParentRow || index !== 0 ? 'parent-row-expand-button' : 'nested-row-expand-button'} ${hasChildren ? 'expand-button-visible' : 'expand-button-hidden'}`}
+                  >
+                    {hasChildren ? (
+                      expandIcon || (
+                        <ExpandIcon isExpanded={isExpanded} theme={theme} mode="expand" />
+                      )
+                    ) : null}
+                  </div>
+                )}
 
                 {column.render 
                   ? column.render(displayValue, dataItem)

src/styles/Pagination.css

@@ -92,14 +92,14 @@
   .pagination-total-items {
     display: block;
   }
-}
-
+  }
+  
 /* Hide total items text on screens smaller than 798px */
 @media (max-width: 797px) {
   .pagination-total-items {
     display: none;
-  }
-  
+}
+
   .pagination-container {
     min-width: 1200px; /* Maintain minimum width */
     overflow-x: auto; /* Enable horizontal scroll */