feat(FE): Add renderCustomRow prop to Table

src/components/Table.tsx

@@ -60,6 +60,12 @@ export interface TableProps<TData extends object> {
   renderFooter?: boolean;
   withCheckbox?: boolean;
   rowOptions?: number[];
+  /**
+   * Custom row renderer. Should return a complete <tr> element or null.
+   * This gives full control over the row structure including colspan.
+   * Return null to render the default row.
+   */
+  renderCustomRow?: (row: Row<TData>) => ReactNode | null;
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -112,6 +118,7 @@ const Table = <TData extends object>({
   renderFooter = false,
   withCheckbox = false,
   rowOptions = [10, 20, 50, 100],
+  renderCustomRow,
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
@@ -305,7 +312,14 @@ const Table = <TData extends object>({
           </thead>
 
           <tbody className={tableClassNames.tableBodyClassName}>
-            {table.getRowModel().rows.map((row) => (
+            {table.getRowModel().rows.map((row) => {
+              const customRowContent = renderCustomRow?.(row);
+
+              if (customRowContent) {
+                return renderCustomRow?.(row);
+              }
+
+              return (
                 <tr key={row.id} className={tableClassNames.bodyRowClassName}>
                   {row.getVisibleCells().map((cell) => (
                     <td
@@ -316,13 +330,17 @@ const Table = <TData extends object>({
                       )}
                     >
                       {!isLoading &&
-                      flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
 
                       {isLoading && <div className='skeleton w-full h-4' />}
                     </td>
                   ))}
                 </tr>
-            ))}
+              );
+            })}
           </tbody>
           <tfoot className={cn(tableClassNames.tableFooterClassName)}>
             {renderFooter && (