complete header of table and pages with a new component and styling in responsive design of them

src/core/components/DataTable/Main.js

@@ -11,7 +11,17 @@ import { flattenObjectOfObjects } from "@/core/utils/flattenObjectOfObjects";
 const DataTable_Main = (props) => {
     const request = useRequest();
     const { filterData, sortData, setSortData, hideData } = useDataTable();
-    const { need_filter, table_url, user_id, page_name, table_name, columns, initialStateProps, TableToolbar } = props;
+    const {
+        need_filter,
+        table_url,
+        user_id,
+        page_name,
+        table_name,
+        columns,
+        initialStateProps,
+        TableToolbar,
+        table_title,
+    } = props;
     const flatColumns = flattenArrayOfObjects(columns, "columns");
     const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
     const flattenHideData = flattenObjectOfObjects(hideData);
@@ -109,6 +119,7 @@ const DataTable_Main = (props) => {
     return (
         <DataTable_Paper
             table={table}
+            table_title={table_title}
             need_filter={need_filter}
             mutate={mutate}
             table_url={table_url}

src/core/components/DataTable/table/Paper.js

@@ -5,16 +5,17 @@ import DataTable_TopToolbar from "../toolbar/TopToolbar";
 import DataTable_TableContainer from "./TableContainer";
 
 const DataTable_Paper = ({
-    table,
-    table_name,
-    columns,
-    user_id,
-    page_name,
-    mutate,
-    need_filter,
-    table_url,
-    ...rest
-}) => {
+                             table,
+                             table_name,
+                             columns,
+                             user_id,
+                             page_name,
+                             mutate,
+                             need_filter,
+                             table_url,
+                             table_title,
+                             ...rest
+                         }) => {
     const {
         getState,
         options: {
@@ -49,19 +50,19 @@ const DataTable_Paper = ({
             style={{
                 ...(isFullScreen
                     ? {
-                          bottom: 0,
-                          height: "100dvh",
-                          left: 0,
-                          margin: 0,
-                          maxHeight: "100dvh",
-                          maxWidth: "100dvw",
-                          padding: 0,
-                          position: "fixed",
-                          right: 0,
-                          top: 0,
-                          width: "100dvw",
-                          zIndex: 999,
-                      }
+                        bottom: 0,
+                        height: "100dvh",
+                        left: 0,
+                        margin: 0,
+                        maxHeight: "100dvh",
+                        maxWidth: "100dvw",
+                        padding: 0,
+                        position: "fixed",
+                        right: 0,
+                        top: 0,
+                        width: "100dvw",
+                        zIndex: 999,
+                    }
                     : {}),
                 ...paperProps?.style,
             }}
@@ -84,6 +85,7 @@ const DataTable_Paper = ({
                         user_id={user_id}
                         page_name={page_name}
                         table_name={table_name}
+                        table_title={table_title}
                     />
                 ))}
             <DataTable_TableContainer table={table} />

src/core/components/DataTable/toolbar/TopToolbar.js

@@ -1,5 +1,5 @@
 import { getCommonToolbarStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
-import { Box, useMediaQuery } from "@mui/material";
+import { Box, Typography, useMediaQuery } from "@mui/material";
 import DataTable_LinearProgressBar from "./LinearProgressBar";
 import DataTable_TablePagination from "./TablePagination";
 import FilterColumn from "@/core/components/DataTable/filter";
@@ -7,7 +7,17 @@ import UpdateTable from "@/core/components/DataTable/update/UpdateTable";
 import ResetStorage from "@/core/components/DataTable/reset/ResetStorage";
 import HideColumn from "@/core/components/DataTable/hide";
 
-const DataTable_TopToolbar = ({ mutate, need_filter, table, columns, table_url, user_id, page_name, table_name }) => {
+const DataTable_TopToolbar = ({
+                                  mutate,
+                                  need_filter,
+                                  table,
+                                  columns,
+                                  table_url,
+                                  user_id,
+                                  page_name,
+                                  table_name,
+                                  table_title,
+                              }) => {
     const {
         getState,
         options: {
@@ -47,11 +57,12 @@ const DataTable_TopToolbar = ({ mutate, need_filter, table, columns, table_url,
         >
             <Box
                 sx={{
-                    alignItems: "flex-start",
+                    flexWrap: { xs: "wrap", sm: "no-wrap" },
                     boxSizing: "border-box",
                     display: "flex",
                     gap: "0.5rem",
                     justifyContent: "space-between",
+                    alignItems: "center",
                     py: "0.5rem",
                     position: stackAlertBanner ? "relative" : "absolute",
                     right: 0,
@@ -59,15 +70,22 @@ const DataTable_TopToolbar = ({ mutate, need_filter, table, columns, table_url,
                     width: "100%",
                 }}
             >
-                {renderTopToolbarCustomActions?.({ table }) ?? <span />}
+                <Box sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    order: { xs: 2, sm: 1 },
+                }}>{renderTopToolbarCustomActions?.({ table })}</Box>
+                <Typography sx={{ textAlign: "center", order: { xs: 1, sm: 2 }, width: { xs: "100%", sm: "unset" } }}
+                            fontWeight={600}>{table_title || ""}</Typography>
                 {enableToolbarInternalActions && (
                     <Box
                         sx={{
-                            alignItems: "center",
-                            display: "flex",
-                            flexWrap: "wrap-reverse",
                             gap: "0.5rem",
+                            flexWrap: "wrap-reverse",
+                            display: "flex",
+                            alignItems: "center",
                             justifyContent: "flex-end",
+                            order: 3,
                         }}
                     >
                         <ResetStorage user_id={user_id}