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}