diff --git a/src/app/page.js b/src/app/page.js
index af32e3b..ea420f9 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,11 +1,93 @@
 import DataTableTest from "@/components/DataTableTest";
 import FilterColumn from "@/components/FilterColumn";
+import {useMemo} from "react";
 
 function page() {
+
+    const columns = useMemo(
+        () => [
+            {
+                accessorKey: 'name.firstName',
+                header: 'نام',
+                size: 150,
+                id: "firstName",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
+            },
+            {
+                accessorKey: 'name.lastName',
+                header: 'نام خانوادگی',
+                size: 150,
+                id: "lastName",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
+            },
+            {
+                accessorKey: 'address',
+                header: 'آدرس',
+                size: 200,
+                id: "address",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
+            },
+            {
+                accessorKey: 'city',
+                header: 'شهر',
+                size: 150,
+                id: "city",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+
+            },
+            {
+                accessorKey: 'state',
+                header: 'وضعیت',
+                size: 150,
+                id: "state",
+                text:'نام',
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
+            },
+        ],
+        [],
+    );
     return (
         <>
-            <FilterColumn />
-            <DataTableTest/>
+            <DataTableTest  columns={columns}/>
+            <FilterColumn column={columns}/>
         </>
 
     );
diff --git a/src/components/DataTableTest.jsx b/src/components/DataTableTest.jsx
index d255aaa..7b988ae 100644
--- a/src/components/DataTableTest.jsx
+++ b/src/components/DataTableTest.jsx
@@ -53,92 +53,13 @@ const data = [
     },
 ];
 
-const TestDataTable = () => {
+const TestDataTable = ({columns}) => {
     const [userId, setUserId] = useState(2);
     const [pageName, setPageName] = useState('loan');
     const [tableName, setTableName] = useState('loan_table');
     const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting();
 
-    const columns = useMemo(
-        () => [
-            {
-                accessorKey: 'name.firstName',
-                header: 'نام',
-                size: 150,
-                id: "firstName",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
-            },
-            {
-                accessorKey: 'name.lastName',
-                header: 'نام خانوادگی',
-                size: 150,
-                id: "lastName",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
-            },
-            {
-                accessorKey: 'address',
-                header: 'آدرس',
-                size: 200,
-                id: "address",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
-            },
-            {
-                accessorKey: 'city',
-                header: 'شهر',
-                size: 150,
-                id: "city",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains",
-                    "lessThan",
-                    "greaterThan",
-                    "between",
-                ],
 
-            },
-            {
-                accessorKey: 'state',
-                header: 'وضعیت',
-                size: 150,
-                id: "state",
-                text:'نام',
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
-            },
-        ],
-        [],
-    );
     const onColumnVisibilityChange = (event) => {
         const settingValue = event();
         hideAction(userId, pageName, tableName, settingValue, columns);
diff --git a/src/components/FilterColumn.jsx b/src/components/FilterColumn.jsx
index 08ab968..37aa24a 100644
--- a/src/components/FilterColumn.jsx
+++ b/src/components/FilterColumn.jsx
@@ -9,13 +9,18 @@ import {
 import {useFormik} from 'formik';
 import TextFieldWithFnBox from "@/components/TextFieldWithFnBox";
 import {useEffect, useState} from "react";
+import useTableSetting from "@/lib/hooks/useTableSetting";
 
-function FilterColumn({ onSubmit , column  }) {
+function FilterColumn({ onSubmit , column }) {
     const [selectedFilters, setSelectedFilters] = useState([]);
+    const [userId, setUserId] = useState(2);
+    const [pageName, setPageName] = useState('loan');
+    const [tableName, setTableName] = useState('loan_table');
+    const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting();
 
     useEffect(() => {
         const initialFilters = column
-            .filter(col => col.ColumnFiterStatus)
+            .filter(col => col.enableColumnFilter)
             .map(col => ({ id: col.field, fn: col.filterFn }));
         setSelectedFilters(initialFilters);
     }, [column]);
@@ -33,7 +38,7 @@ function FilterColumn({ onSubmit , column  }) {
 
     const formik = useFormik({
         initialValues: column.reduce((acc, column) => {
-            if (column.ColumnFiterStatus) {
+            if (column.enableColumnFilter) {
                 acc[column.field] = '';
             }
             return acc;
@@ -44,50 +49,7 @@ function FilterColumn({ onSubmit , column  }) {
             //     { "id": "navgan_id", "value": values.name2, "fn": values.nameFn, "datatype": values.nameDatatype }
             // ];
 
-            const user_id = 456;
-            const page_name = 'loan';
-            const table_name = "amir_table";
 
-            let prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {};
-
-            const existingFilters = prevLocalStorage[user_id]?.[page_name]?.[table_name]?.filters || [];
-
-            const updatedFilters = selectedFilters.reduce((acc, filter) => {
-                const currentValue = values[filter.id];
-                const prevValue = formik.initialValues[filter.id];
-                console.log(acc, filter)
-                // Check if the current value is empty and the previous value was not empty
-                if ((currentValue === '' || currentValue === undefined || currentValue === null) && prevValue !== '' && prevValue !== undefined && prevValue !== null) {
-                    // Remove filter data from localStorage
-                    const filterIndex = existingFilters.findIndex(f => f.id === filter.id);
-                    console.log({filterIndex})
-                    if (filterIndex !== -1) {
-                        existingFilters.splice(filterIndex, 1);
-                    }
-                } else {
-                    acc.push({
-                        ...filter,
-                        value: currentValue,
-                        datatype: column.find(col => col.field === filter.id).datatype
-                    });
-                }
-
-                return acc;
-            }, []);
-
-
-            updatedFilters.forEach(newFilter => {
-                const existingFilterIndex = existingFilters.findIndex(filter => filter.id === newFilter.id);
-                existingFilterIndex !== -1 ? existingFilters[existingFilterIndex] = newFilter : existingFilters.push(newFilter);
-            });
-
-            prevLocalStorage[user_id] = prevLocalStorage[user_id] || {};
-            prevLocalStorage[user_id][page_name] = prevLocalStorage[user_id][page_name] || {};
-            prevLocalStorage[user_id][page_name][table_name] = { hides: {}, filters: existingFilters };
-
-            localStorage.setItem('_setting-app', JSON.stringify(prevLocalStorage));
-
-            onSubmit(updatedFilters);
         }
     });
 
@@ -98,7 +60,7 @@ function FilterColumn({ onSubmit , column  }) {
             <DialogContent>
                 <FormControl fullWidth>
                     {column.map((column, index) => (
-                        column.ColumnFiterStatus &&
+                        column.enableColumnFilter &&
                         <TextFieldWithFnBox
                             key={index}
                             formik={formik}