merging issues resolved

src/common/ResponsiveTable.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Card, Checkbox, CircularProgress, Collapse, darken, Divider, Grid2, IconButton, InputAdornment, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { ArrowDownward, ArrowLeft, ArrowRight, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material"
+import { ArrowDownward, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material"
 import { useEffect, useState } from "react";
 import React from "react";
 import { useMobile } from "hooks";
@@ -98,6 +98,7 @@ interface Props<T> {
   setOrderBy?: React.Dispatch<React.SetStateAction<string>>;
   order?: string;
   setOrder?: React.Dispatch<React.SetStateAction<"asc" | "desc">>;
+  endTitleElement?: string | JSX.Element | (() => string | JSX.Element);
   loadMore?: () => void
 }
 
@@ -139,6 +140,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
   const subtitle = typeof(props.subtitle) === "function" ? props.subtitle() : props.subtitle
   const title = typeof(props.title) === "function" ? props.title() : props.title
   // const order = props.order ? props.order : "asc"
+  const endTitleElement = typeof(props.endTitleElement) === "function" ? props.endTitleElement() : props.endTitleElement
 
   const isMobile = useMobile()
 
@@ -447,6 +449,9 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                     <Grid2>
                       {actions && actions}
                     </Grid2>
+                    <Grid2>
+                      {endTitleElement}
+                    </Grid2>
                     <Grid2>
                       {setSearchText &&<Box className={classes.searchContainer}>
                         {searchBar()}