feat(FE-Storyless): Add footer support to Table component

src/components/Table.tsx

@@ -31,6 +31,9 @@ interface TableClassNames {
   tableBodyClassName?: string;
   bodyRowClassName?: string;
   bodyColumnClassName?: string;
+  tableFooterClassName?: string;
+  footerRowClassName?: string;
+  footerColumnClassName?: string;
   paginationClassName?: string;
 }
 
@@ -54,6 +57,7 @@ export interface TableProps<TData extends object> {
   enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
   renderFooter?: boolean;
   footerContent?: ReactNode;
+  footerData?: TData[];
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -86,6 +90,9 @@ const Table = <TData extends object>({
     tableBodyClassName: '',
     bodyRowClassName: '',
     bodyColumnClassName: '',
+    tableFooterClassName: '',
+    footerRowClassName: '',
+    footerColumnClassName: '',
     paginationClassName: '',
   },
   emptyContent = emptyContentDefaultValue,
@@ -97,6 +104,7 @@ const Table = <TData extends object>({
   enableRowSelection,
   renderFooter = false,
   footerContent,
+  footerData = [],
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
@@ -164,6 +172,14 @@ const Table = <TData extends object>({
   const table = useReactTable(tableOptions);
   const { setPageSize } = table;
 
+  const footerTableOptions: TableOptions<TData> = {
+    columns,
+    data: footerData,
+    getCoreRowModel: getCoreRowModel(),
+  };
+
+  const footerTable = useReactTable(footerTableOptions);
+
   const prevPageClickHandler = () => {
     table.previousPage();
 
@@ -266,7 +282,26 @@ const Table = <TData extends object>({
               </tr>
             ))}
           </tbody>
-          {renderFooter && footerContent}
+          <tfoot className={cn(className.tableFooterClassName)}>
+            {renderFooter &&
+              (footerData && footerData.length > 0
+                ? footerTable.getRowModel().rows.map((row) => (
+                    <tr key={row.id} className={className.footerRowClassName}>
+                      {row.getVisibleCells().map((cell) => (
+                        <td
+                          key={cell.id}
+                          className={className.footerColumnClassName}
+                        >
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )}
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                : footerContent)}
+          </tfoot>
         </table>
       </div>