diff --git a/src/components/home/index.jsx b/src/components/home/index.jsx
index 659d11f..7af2edf 100644
--- a/src/components/home/index.jsx
+++ b/src/components/home/index.jsx
@@ -141,7 +141,7 @@ function HomeComponent() {
 
     return (
         <>
-            <DataTable columns={columns} userId={0} pageName={'testPage'} tableName={'testTable'}/>
+            <DataTable columns={columns} user_id={0} page_name={'testPage'} table_name={'testTable'}/>
         </>
 
     );
diff --git a/src/core/components/DataTable/Main.js b/src/core/components/DataTable/Main.js
index 09300df..2110b34 100644
--- a/src/core/components/DataTable/Main.js
+++ b/src/core/components/DataTable/Main.js
@@ -76,18 +76,18 @@ const data = [
 
 const DataTable_Main = (props) => {
     const {filterData} = useDataTable();
-    const {userId, pageName, tableName, columns, initialStateProps} = props
+    const {user_id, page_name, table_name, columns, initialStateProps} = props
 
     const flatColumns = flattenArrayOfObjects(columns, 'columns')
     const {settingStore, hideAction, sortAction} = useTableSetting();
 
     const onColumnVisibilityChange = (event) => {
         const settingValue = event();
-        hideAction(userId, pageName, tableName, settingValue, flatColumns);
+        hideAction(user_id, page_name, table_name, settingValue, flatColumns);
     };
     const onSortingChange = (event) => {
-        const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
-        sortAction(userId, pageName, tableName, settingValue, flatColumns);
+        const settingValue = event(settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || []);
+        sortAction(user_id, page_name, table_name, settingValue, flatColumns);
     }
 
     const table = useMaterialReactTable({
@@ -102,13 +102,13 @@ const DataTable_Main = (props) => {
         </>),
         initialState: {
             density: 'compact',
-            columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
-            sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [],
+            columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.['hides'],
+            sorting: settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || [],
             ...initialStateProps
         },
         state: {
-            columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
-            sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
+            columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.['hides'],
+            sorting: settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || []
         },
         muiTableHeadProps: {
             sx: {
@@ -141,8 +141,8 @@ const DataTable_Main = (props) => {
         ...props
     })
 
-    return <DataTable_Paper table={table} columns={flatColumns} userid={userId} pagename={pageName}
-                            tablename={tableName}/>;
+    return <DataTable_Paper table={table} columns={flatColumns} user_id={user_id} page_name={page_name}
+                            table_name={table_name}/>;
 };
 
 export default DataTable_Main;
diff --git a/src/core/components/DataTable/filter/FilterBody.jsx b/src/core/components/DataTable/filter/FilterBody.jsx
index 6d020a2..385981b 100644
--- a/src/core/components/DataTable/filter/FilterBody.jsx
+++ b/src/core/components/DataTable/filter/FilterBody.jsx
@@ -28,21 +28,20 @@ const ScrollBox = styled(Box)({
     }
 });
 
-function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tableName}) {
+function FilterBody({columns, drawerState, setDrawerState, user_id, page_name, table_name}) {
     const {settingStore, filterAction} = useTableSetting();
     const [initialValues, setInitialValues] = useState({});
     const [validationSchema, setValidationSchema] = useState({});
     const {filterData, setFilterData} = useDataTable();
-    const filterDataRef = useRef(filterData); // Create a ref to hold the latest filterData
-
+    const filterDataRef = useRef(filterData);
     useEffect(() => {
-        filterDataRef.current = filterData; // Update ref whenever filterData changes
+        filterDataRef.current = filterData;
     }, [filterData]);
 
     useEffect(() => {
         const values = columns.reduce((acc, column) => {
             if (!column.enableColumnFilter) return acc;
-            const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id);
+            const filter = settingStore?.[user_id]?.[page_name]?.[table_name]?.['filters']?.find((filter) => filter.id === column.id);
             if (column.datatype === 'array') {
                 acc[column.id] = {
                     id: column.id,
@@ -68,7 +67,7 @@ function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tab
             return acc;
         }, {});
         setInitialValues(Object.keys(filterData).length !== 0 ? filterData : values);
-    }, [columns, settingStore, userId, pageName, tableName, filterData]);
+    }, [columns, settingStore, user_id, page_name, table_name, filterData]);
 
 
     useEffect(() => {
@@ -119,7 +118,7 @@ function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tab
     };
 
     const onSaveFilter = () => {
-        const currentFilterData = filterDataRef.current; // Use the ref to get the latest filterData
+        const currentFilterData = filterDataRef.current;
         const arrayOfObjects = Object.keys(currentFilterData).map(key => {
             const value = currentFilterData[key].value;
             if (value !== "" &&
@@ -127,7 +126,7 @@ function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tab
                 return currentFilterData[key];
             }
         }).filter(Boolean);
-        console.log("arrayOfObjects", arrayOfObjects);
+        filterAction(user_id, page_name, table_name, arrayOfObjects, columns)
         toast.dismiss({containerId: "filtering"});
     };
 
diff --git a/src/core/components/DataTable/filter/index.jsx b/src/core/components/DataTable/filter/index.jsx
index faa01c9..65a93d2 100644
--- a/src/core/components/DataTable/filter/index.jsx
+++ b/src/core/components/DataTable/filter/index.jsx
@@ -4,14 +4,14 @@ import {useState} from "react";
 import FilterButton from "@/core/components/DataTable/filter/FilterButton";
 import FilterBody from "@/core/components/DataTable/filter/FilterBody";
 
-function FilterColumn({columns, userid, pagename, tablename}) {
+function FilterColumn({columns, user_id, page_name, table_name}) {
     const [open, setOpen] = useState(false);
 
     return (
         <>
             <FilterButton drawerState={open} setDrawerState={setOpen}/>
-            <FilterBody columns={columns} drawerState={open} setDrawerState={setOpen} userid={userid}
-                        pagename={pagename} tablename={tablename}/>
+            <FilterBody columns={columns} drawerState={open} setDrawerState={setOpen} user_id={user_id}
+                        page_name={page_name} table_name={table_name}/>
         </>
     );
 }
diff --git a/src/core/components/DataTable/table/Paper.js b/src/core/components/DataTable/table/Paper.js
index 7380cf0..d5431b7 100644
--- a/src/core/components/DataTable/table/Paper.js
+++ b/src/core/components/DataTable/table/Paper.js
@@ -65,9 +65,9 @@ const DataTable_Paper = ({table, ...rest}) => {
         >
             {enableTopToolbar &&
                 (parseFromValuesOrFunc(renderTopToolbar, {table}) ?? (
-                    <DataTable_TopToolbar table={table} columns={paperProps.columns} userid={paperProps.userid}
-                                          pagename={paperProps.pagename}
-                                          tablename={paperProps.tablename}/>
+                    <DataTable_TopToolbar table={table} columns={paperProps.columns} userId={paperProps.userId}
+                                          pageName={paperProps.pageName}
+                                          tableName={paperProps.tableName}/>
                 ))}
             <DataTable_TableContainer table={table}/>
             {enableBottomToolbar &&
diff --git a/src/core/components/DataTable/toolbar/TopToolbar.js b/src/core/components/DataTable/toolbar/TopToolbar.js
index 1adf4d3..eabe836 100644
--- a/src/core/components/DataTable/toolbar/TopToolbar.js
+++ b/src/core/components/DataTable/toolbar/TopToolbar.js
@@ -6,7 +6,7 @@ import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons";
 import FilterColumn from "@/core/components/DataTable/filter";
 import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable";
 
-const DataTable_TopToolbar = ({table, columns, userid, pagename, tablename}) => {
+const DataTable_TopToolbar = ({table, columns, user_id, page_name, table_name}) => {
     const {
         getState,
         options: {
@@ -73,7 +73,8 @@ const DataTable_TopToolbar = ({table, columns, userid, pagename, tablename}) =>
                         }}
                     >
                         <RefactorTable/>
-                        <FilterColumn columns={columns} userid={userid} pagename={pagename} tablename={tablename}/>
+                        <FilterColumn columns={columns} user_id={user_id} page_name={page_name}
+                                      table_name={table_name}/>
                         <DataTable_ToolbarInternalButtons table={table}/>
                     </Box>
                 )}