diff --git a/src/components/home/index.jsx b/src/components/home/index.jsx
index b059e6a..2682b64 100644
--- a/src/components/home/index.jsx
+++ b/src/components/home/index.jsx
@@ -17,6 +17,7 @@ function HomeComponent() {
                         enableColumnFilter: true,
                         datatype: "text",
                         filterFn: "contains",
+                        inputType: "textField",
                         enableClickToCopy: true,
                         columnFilterModeOptions: [
                             "equals",
@@ -30,7 +31,8 @@ function HomeComponent() {
                         id: "lastName",
                         enableColumnFilter: true,
                         datatype: "text",
-                        filterFn: "contains",
+                        filterFn: "equals",
+                        inputType: "textField",
                         columnFilterModeOptions: [
                             "equals",
                             "notEquals",
@@ -38,14 +40,6 @@ function HomeComponent() {
                         ],
                     },
                 ],
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
             },
             {
                 accessorKey: 'address',
@@ -53,7 +47,8 @@ function HomeComponent() {
                 id: "address",
                 enableColumnFilter: true,
                 datatype: "text",
-                filterFn: "contains",
+                filterFn: "notEquals",
+                inputType: "textField",
                 columnFilterModeOptions: [
                     "equals",
                     "notEquals",
@@ -66,14 +61,15 @@ function HomeComponent() {
                 id: "city",
                 enableColumnFilter: true,
                 datatype: "text",
-                filterFn: "contains",
+                filterFn: "equals",
+                inputType: "textField",
                 columnFilterModeOptions: [
                     "equals",
                     "notEquals",
                     "contains",
                     "lessThan",
                     "greaterThan",
-                    "between",
+                    "fuzzy"
                 ],
 
             },
@@ -81,10 +77,10 @@ function HomeComponent() {
                 accessorKey: 'state',
                 header: 'وضعیت',
                 id: "state",
-                text: 'نام',
                 enableColumnFilter: true,
                 datatype: "text",
                 filterFn: "contains",
+                inputType: "textField",
                 columnFilterModeOptions: [
                     "equals",
                     "notEquals",
@@ -92,46 +88,40 @@ function HomeComponent() {
                 ],
             },
             {
-                accessorKey: 'state',
+                accessorKey: 'price',
                 header: 'محدوده',
-                id: "betweenNum",
-                text: 'محدوده',
+                id: "price",
                 enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "betweenNum",
-                columnFilterModeOptions: [],
+                datatype: "nemeric",
+                filterFn: "between",
+                inputType: "betweenNum",
             },
             {
-                accessorKey: 'state',
-                header: 'تاریخ',
-                id: "betweenDate",
-                text: 'تاریخ',
+                accessorKey: 'updated_at',
+                header: 'تاریخ بروزرسانی',
+                id: "updated_at",
                 enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "betweenDate",
-                columnFilterModeOptions: [],
+                datatype: "date",
+                filterFn: "between",
+                inputType: "betweenDate",
             },
             {
-                accessorKey: 'state',
-                header: 'شلکت',
-                id: "select2",
-                text: 'تاریخ',
-                type: 'select2',
+                accessorKey: 'company',
+                header: 'نام شرکت',
+                id: "company",
                 enableColumnFilter: true,
                 datatype: "text",
                 filterFn: "equals",
-                columnFilterModeOptions: [],
+                inputType: "select2",
             },
             {
-                accessorKey: 'state',
-                header: 'سلکت',
-                id: "select",
-                text: 'تنتنت',
-                type: 'select',
+                accessorKey: 'area',
+                header: 'منطقه',
+                id: "area",
                 enableColumnFilter: true,
                 datatype: "text",
                 filterFn: "equals",
-                columnFilterModeOptions: [],
+                inputType: "select",
             },
         ],
         [],
diff --git a/src/core/components/DataTable/filter/FilterColumn.jsx b/src/core/components/DataTable/filter/FilterColumn.jsx
index 1daa295..3c0a16c 100644
--- a/src/core/components/DataTable/filter/FilterColumn.jsx
+++ b/src/core/components/DataTable/filter/FilterColumn.jsx
@@ -1,7 +1,6 @@
 "use client"
 import {Box, Button, Divider, Drawer, FormControl, IconButton, styled, Tooltip, Typography} from '@mui/material';
 import {useFormik} from 'formik';
-import TextFieldWithFnBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox";
 import {useEffect, useState} from "react";
 import useTableSetting from "@/lib/hooks/useTableSetting";
 import BetweenNumberFilter from "@/core/components/DataTable/filter/BetweenNumberFilter";
@@ -10,13 +9,14 @@ import SelectBoxMultiple from "@/core/components/DataTable/filter/SelectBoxMulti
 import SelectBox from "@/core/components/DataTable/filter/SelectBox";
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import CloseIcon from '@mui/icons-material/Close';
+import TextFieldWithFnBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox";
 
 function FilterColumn({columns}) {
     const [open, setOpen] = useState(false);
     const [selectedFilters, setSelectedFilters] = useState([]);
-    const [userId, setUserId] = useState(2);
-    const [pageName, setPageName] = useState('loan');
-    const [tableName, setTableName] = useState('loan_table');
+    const [userId, setUserId] = useState(0);
+    const [pageName, setPageName] = useState('testPage');
+    const [tableName, setTableName] = useState('testTable');
     const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting();
 
     const DrawerHeader = styled('div')(({theme}) => ({
@@ -34,11 +34,13 @@ function FilterColumn({columns}) {
     useEffect(() => {
         const settingValue = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || [];
         setSelectedFilters(settingValue.length > 0 ? settingValue : []);
+        if (!settingValue.length > 0) {
+            formik.resetForm();
+        }
     }, [settingStore]);
 
     const handleSelectFilter = (fieldName, filterFn) => {
         const filterIndex = selectedFilters.findIndex(filter => filter.id === fieldName);
-
         if (filterIndex !== -1) {
             const updatedFilters = [...selectedFilters];
             updatedFilters[filterIndex].fn = filterFn;
@@ -98,7 +100,7 @@ function FilterColumn({columns}) {
         }
 
     });
-
+    console.log(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'])
     return (
         <>
             <Tooltip title="فیلتر">
@@ -139,36 +141,32 @@ function FilterColumn({columns}) {
                     <FormControl fullWidth>
                         {columns.map((column, index) => (
                             column.enableColumnFilter &&
-                            (column.filterFn === 'betweenDate' ?
+                            (column.inputType === 'betweenDate' ?
                                     <BetWeenDateFilter
                                         key={index}
                                         id={column.id}
                                         formik={formik}
-                                        onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
                                         defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
                                     />
-                                    : column.filterFn === 'betweenNum' ?
+                                    : column.inputType === 'betweenNum' ?
                                         <BetweenNumberFilter
                                             key={index}
                                             id={column.id}
                                             formik={formik}
-                                            onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
                                             defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ["", ""]}
                                         />
-                                        : column.type === 'select2' ?
+                                        : column.inputType === 'select2' ?
                                             <SelectBoxMultiple
                                                 key={index}
                                                 id={column.id}
                                                 formik={formik}
-                                                onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
                                                 defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || []}
                                             />
-                                            : column.type === 'select' ?
+                                            : column.inputType === 'select' ?
                                                 <SelectBox
                                                     key={index}
                                                     id={column.id}
                                                     formik={formik}
-                                                    onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
                                                     defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
                                                 />
                                                 :
@@ -177,7 +175,7 @@ function FilterColumn({columns}) {
                                                     id={column.id}
                                                     header={column.header}
                                                     formik={formik}
-                                                    defaultFilter={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column.filterFn}
+                                                    defaultFilter={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column._filterFn}
                                                     columnFilterModeOptions={column.columnFilterModeOptions}
                                                     onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
                                                     defaultValue={formik.values[column.id] || (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
diff --git a/src/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox.jsx b/src/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox.jsx
index f887918..3bba610 100644
--- a/src/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox.jsx
+++ b/src/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox.jsx
@@ -1,22 +1,38 @@
-import { Popper, Paper, List, ListItem, ListItemText, ClickAwayListener } from '@mui/material';
+import {ClickAwayListener, List, ListItem, ListItemText, Paper, Popper} from '@mui/material';
+import {useState} from "react";
 
-function FilterBox({anchorEl , open = false, handleClose = () => {} , columnFilterModeOptions , onSelectFilter , defaultFilter}) {
+const columnFilterModeOptionFa = {
+    equals: "برابر",
+    notEquals: "نابرابر",
+    contains: "شامل",
+    lessThan: "کوچکتر",
+    greaterThan: "بزرگتر",
+    fuzzy: "فازی",
+}
+
+function FilterBox({
+                       anchorEl, open = false, handleClose = () => {
+    }, columnFilterModeOptions, onSelectFilter, defaultFilter
+                   }) {
+    const [selectedFilter, setSelectedFilter] = useState(defaultFilter);
 
     const id = open ? 'simple-popper' : undefined;
     const handleSelectFilter = (filterFn) => {
+        setSelectedFilter(filterFn);
         onSelectFilter(filterFn);
         handleClose();
     };
 
     return (
         <div>
-            <Popper id={id} open={open} anchorEl={anchorEl} placement="bottom" style={{ zIndex: 1301 }}>
+            <Popper id={id} open={open} anchorEl={anchorEl} placement="bottom" style={{zIndex: 1301}}>
                 <ClickAwayListener onClickAway={handleClose}>
                     <Paper>
                         <List>
                             {columnFilterModeOptions.map((option, index) => (
-                                <ListItem key={index}  onClick={() => handleSelectFilter(option)} selected={option === defaultFilter}  sx={{ cursor: 'pointer' }}>
-                                    <ListItemText primary={option} />
+                                <ListItem key={index} onClick={() => handleSelectFilter(option)}
+                                          selected={option === selectedFilter} sx={{cursor: 'pointer'}}>
+                                    <ListItemText primary={columnFilterModeOptionFa[option]}/>
                                 </ListItem>
                             ))}
                         </List>
diff --git a/src/core/components/DataTable/head/TableHead.js b/src/core/components/DataTable/head/TableHead.js
index 055a4ed..5e5dd99 100644
--- a/src/core/components/DataTable/head/TableHead.js
+++ b/src/core/components/DataTable/head/TableHead.js
@@ -1,12 +1,12 @@
-import { parseFromValuesOrFunc } from "@/core/utils/utils";
-import { TableHead } from "@mui/material";
+import {parseFromValuesOrFunc} from "@/core/utils/utils";
+import {TableHead} from "@mui/material";
 import DataTable_TableHeadRow from "./TableHeadRow";
 
 const DataTable_TableHead = ({
-    columnVirtualizer,
-    table,
-    ...rest
-}) => {
+                                 columnVirtualizer,
+                                 table,
+                                 ...rest
+                             }) => {
     const {
         getState,
         options: {
@@ -15,12 +15,12 @@ const DataTable_TableHead = ({
             muiTableHeadProps,
             positionToolbarAlertBanner,
         },
-        refs: { tableHeadRef },
+        refs: {tableHeadRef},
     } = table;
-    const { isFullScreen, showAlertBanner } = getState();
+    const {isFullScreen, showAlertBanner} = getState();
 
     const tableHeadProps = {
-        ...parseFromValuesOrFunc(muiTableHeadProps, { table }),
+        ...parseFromValuesOrFunc(muiTableHeadProps, {table}),
         ...rest,
     };
 
@@ -47,12 +47,13 @@ const DataTable_TableHead = ({
         >
             {table
                 .getHeaderGroups()
-                .map((headerGroup) => (
+                .map((headerGroup, index) => (
                     <DataTable_TableHeadRow
                         columnVirtualizer={columnVirtualizer}
                         headerGroup={headerGroup}
                         key={headerGroup.id}
                         table={table}
+                        index={index}
                     />
                 ))
             }
diff --git a/src/core/components/DataTable/head/TableHeadCell.js b/src/core/components/DataTable/head/TableHeadCell.js
index 78a9933..6248d63 100644
--- a/src/core/components/DataTable/head/TableHeadCell.js
+++ b/src/core/components/DataTable/head/TableHeadCell.js
@@ -1,16 +1,16 @@
-import { getCommonMRTCellStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
-import { useTheme } from "@emotion/react";
-import { Box, TableCell } from "@mui/material";
-import { MRT_TableHeadCellSortLabel } from "material-react-table";
-import { useMemo } from "react";
+import {getCommonMRTCellStyles, parseFromValuesOrFunc} from "@/core/utils/utils";
+import {useTheme} from "@emotion/react";
+import {Box, TableCell} from "@mui/material";
+import {MRT_TableHeadCellSortLabel} from "material-react-table";
+import {useMemo} from "react";
 
 const DataTable_TableHeadCell = ({
-    columnVirtualizer,
-    header,
-    staticColumnIndex,
-    table,
-    ...rest
-}) => {
+                                     columnVirtualizer,
+                                     header,
+                                     staticColumnIndex,
+                                     table,
+                                     ...rest
+                                 }) => {
     const theme = useTheme();
     const {
         getState,
@@ -24,10 +24,10 @@ const DataTable_TableHeadCell = ({
             enableGrouping,
             enableMultiSort,
             layoutMode,
-            mrtTheme: { draggingBorderColor },
+            mrtTheme: {draggingBorderColor},
             muiTableHeadCellProps,
         },
-        refs: { tableHeadCellRefs },
+        refs: {tableHeadCellRefs},
         setHoveredColumn,
     } = table;
     const {
@@ -38,12 +38,12 @@ const DataTable_TableHeadCell = ({
         hoveredColumn,
         showColumnFilters,
     } = getState();
-    const { column } = header;
-    const { columnDef } = column;
-    const { columnDefType } = columnDef;
+    const {column} = header;
+    const {columnDef} = column;
+    const {columnDefType} = columnDef;
 
     const tableCellProps = {
-        ...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }),
+        ...parseFromValuesOrFunc(muiTableHeadCellProps, {column, table}),
         ...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
             column,
             table,
@@ -93,8 +93,8 @@ const DataTable_TableHeadCell = ({
 
         if (showResizeBorder) {
             return columnResizeDirection === 'ltr'
-                ? { borderRight: borderStyle }
-                : { borderLeft: borderStyle };
+                ? {borderRight: borderStyle}
+                : {borderLeft: borderStyle};
         }
         const draggingBorders = borderStyle
             ? {
@@ -172,47 +172,47 @@ const DataTable_TableHeadCell = ({
             }}
             {...tableCellProps}
             sx={(theme) => ({
-                '& :hover': {
-                    '.MuiButtonBase-root': {
-                        opacity: 1,
+                    '& :hover': {
+                        '.MuiButtonBase-root': {
+                            opacity: 1,
+                        },
                     },
-                },
-                flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined,
-                fontWeight: 'bold',
-                overflow: 'visible',
-                p:
-                    density === 'compact'
-                        ? '0.5rem'
-                        : density === 'comfortable'
-                            ? columnDefType === 'display'
-                                ? '0.75rem'
-                                : '1rem'
-                            : columnDefType === 'display'
-                                ? '1rem 1.25rem'
-                                : '1.5rem',
-                pb:
-                    columnDefType === 'display'
-                        ? 0
-                        : showColumnFilters || density === 'compact'
-                            ? '0.4rem'
-                            : '0.6rem',
-                pt:
-                    columnDefType === 'group' || density === 'compact'
-                        ? '0.25rem'
-                        : density === 'comfortable'
-                            ? '.75rem'
-                            : '1.25rem',
-                userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
-                verticalAlign: 'middle',
-                ...getCommonMRTCellStyles({
-                    column,
-                    header,
-                    table,
-                    tableCellProps,
-                    theme,
-                }),
-                ...draggingBorders,
-            }
+                    flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined,
+                    fontWeight: 'bold',
+                    overflow: 'visible',
+                    p:
+                        density === 'compact'
+                            ? '0.5rem'
+                            : density === 'comfortable'
+                                ? columnDefType === 'display'
+                                    ? '0.75rem'
+                                    : '1rem'
+                                : columnDefType === 'display'
+                                    ? '1rem 1.25rem'
+                                    : '1.5rem',
+                    pb:
+                        columnDefType === 'display'
+                            ? 0
+                            : showColumnFilters || density === 'compact'
+                                ? '0.4rem'
+                                : '0.6rem',
+                    pt:
+                        columnDefType === 'group' || density === 'compact'
+                            ? '0.25rem'
+                            : density === 'comfortable'
+                                ? '.75rem'
+                                : '1.25rem',
+                    userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
+                    verticalAlign: 'middle',
+                    ...getCommonMRTCellStyles({
+                        column,
+                        header,
+                        table,
+                        tableCellProps,
+                        theme,
+                    }),
+                    ...draggingBorders,
+                }
             )}
         >
             {tableCellProps.children ?? (
@@ -225,7 +225,7 @@ const DataTable_TableHeadCell = ({
                             tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
                         justifyContent:
                             columnDefType === 'group' ||
-                                tableCellProps?.align === 'center'
+                            tableCellProps?.align === 'center'
                                 ? 'center'
                                 : column.getCanResize()
                                     ? 'space-between'
@@ -262,6 +262,9 @@ const DataTable_TableHeadCell = ({
                                 minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
                                 overflow: columnDefType === 'data' ? 'hidden' : undefined,
                                 textOverflow: 'ellipsis',
+                                color: "#fff",
+                                fontSize: "14px",
+                                fontWeight: "500",
                                 whiteSpace:
                                     (columnDef.header?.length ?? 0) < 20
                                         ? 'nowrap'
@@ -271,7 +274,8 @@ const DataTable_TableHeadCell = ({
                             {HeaderElement}
                         </Box>
                         {(column.getCanSort() && columnDefType !== 'group') && (
-                            <MRT_TableHeadCellSortLabel sx={{ width: 20 }} header={header} table={table} />
+                            <MRT_TableHeadCellSortLabel sx={{width: 20, color: "#fff"}} header={header}
+                                                        table={table}/>
                         )}
                     </Box>
                 </Box>
diff --git a/src/core/components/DataTable/head/TableHeadRow.js b/src/core/components/DataTable/head/TableHeadRow.js
index f876cf1..33a23e2 100644
--- a/src/core/components/DataTable/head/TableHeadRow.js
+++ b/src/core/components/DataTable/head/TableHeadRow.js
@@ -1,24 +1,25 @@
-import { parseFromValuesOrFunc } from "@/core/utils/utils";
-import { TableRow } from "@mui/material";
+import {parseFromValuesOrFunc} from "@/core/utils/utils";
+import {TableRow} from "@mui/material";
 import DataTable_TableHeadCell from "./TableHeadCell";
 
 const DataTable_TableHeadRow = ({
-    columnVirtualizer,
-    headerGroup,
-    table,
-    ...rest
-}) => {
+                                    columnVirtualizer,
+                                    headerGroup,
+                                    table,
+                                    index, // Add index prop
+                                    ...rest
+                                }) => {
     const {
         options: {
             enableStickyHeader,
             layoutMode,
-            mrtTheme: { baseBackgroundColor },
             muiTableHeadRowProps,
         },
     } = table;
+    const {virtualColumns, virtualPaddingLeft, virtualPaddingRight} =
+    columnVirtualizer ?? {};
 
-    const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
-        columnVirtualizer ?? {};
+    const backgroundColor = index % 2 === 0 ? '#015688' : '#ff5c0f';
 
     const tableRowProps = {
         ...parseFromValuesOrFunc(muiTableHeadRowProps, {
@@ -26,51 +27,34 @@ const DataTable_TableHeadRow = ({
             table,
         }),
         ...rest,
+        sx: (theme) => ({ // Access theme from the sx function
+            ...(parseFromValuesOrFunc(muiTableHeadRowProps?.sx, theme) || {}),
+            backgroundColor, // Apply background color
+            display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+            position: enableStickyHeader && layoutMode === 'semantic' ? 'sticky' : 'relative',
+            top: 0,
+        }),
     };
 
     return (
-        <TableRow
-            {...tableRowProps}
-            sx={(theme) => ({
-                backgroundColor: baseBackgroundColor,
-                display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-                position:
-                    enableStickyHeader && layoutMode === 'semantic'
-                        ? 'sticky'
-                        : 'relative',
-                top: 0,
-                ...(parseFromValuesOrFunc(tableRowProps?.sx, theme)),
+        <TableRow {...tableRowProps}>
+            {virtualPaddingLeft && <th style={{display: 'flex', width: virtualPaddingLeft}}/>}
+            {(virtualColumns ?? headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
+                const header = columnVirtualizer ? headerGroup.headers[headerOrVirtualHeader.index] : headerOrVirtualHeader;
+
+                return header ? (
+                    <DataTable_TableHeadCell
+                        columnVirtualizer={columnVirtualizer}
+                        header={header}
+                        key={header.id}
+                        staticColumnIndex={staticColumnIndex}
+                        table={table}
+                    />
+                ) : null;
             })}
-        >
-            {virtualPaddingLeft ? (
-                <th style={{ display: 'flex', width: virtualPaddingLeft }} />
-            ) : null}
-            {(virtualColumns ?? headerGroup.headers).map(
-                (headerOrVirtualHeader, staticColumnIndex) => {
-                    let header = headerOrVirtualHeader;
-
-                    if (columnVirtualizer) {
-                        staticColumnIndex = (headerOrVirtualHeader)
-                            .index;
-                        header = headerGroup.headers[staticColumnIndex];
-                    }
-
-                    return header ? (
-                        <DataTable_TableHeadCell
-                            columnVirtualizer={columnVirtualizer}
-                            header={header}
-                            key={header.id}
-                            staticColumnIndex={staticColumnIndex}
-                            table={table}
-                        />
-                    ) : null;
-                },
-            )}
-            {virtualPaddingRight ? (
-                <th style={{ display: 'flex', width: virtualPaddingRight }} />
-            ) : null}
+            {virtualPaddingRight && <th style={{display: 'flex', width: virtualPaddingRight}}/>}
         </TableRow>
     );
+};
 
-}
-export default DataTable_TableHeadRow
\ No newline at end of file
+export default DataTable_TableHeadRow;
\ No newline at end of file
diff --git a/src/core/components/DataTable/index.js b/src/core/components/DataTable/index.js
index 408994a..aba1d1c 100644
--- a/src/core/components/DataTable/index.js
+++ b/src/core/components/DataTable/index.js
@@ -8,48 +8,68 @@ import Toolbar from "@/components/home/Toolbar";
 const data = [
     {
         name: {
-            firstName: 'John',
-            lastName: 'Doe',
+            firstName: 'امین',
+            lastName: 'قاسمپور',
         },
-        address: '261 Erdman Ford',
-        city: 'East Daphne',
-        state: 'Kentucky',
+        address: 'فلان جا',
+        city: 'تهران',
+        state: 'بررسی شده',
+        price: '20',
+        updated_at: '2024/05/02',
+        company: 'همراه اول',
+        area: 'منطقه 5',
     },
     {
         name: {
-            firstName: 'Jane',
-            lastName: 'Doe',
+            firstName: 'امیر حسین',
+            lastName: 'محمودی',
         },
-        address: '769 Dominic Grove',
-        city: 'Columbus',
-        state: 'Ohio',
+        address: 'فلان جا',
+        city: 'تهران',
+        state: 'تکمیل شده',
+        price: '27',
+        updated_at: '2024/05/02',
+        company: 'وایتل',
+        area: 'منطقه 27',
     },
     {
         name: {
-            firstName: 'Joe',
-            lastName: 'Doe',
+            firstName: 'یاسمن',
+            lastName: 'علی اکبری',
         },
-        address: '566 Brakus Inlet',
-        city: 'South Linda',
-        state: 'West Virginia',
+        address: 'فلان جا',
+        city: 'شیراز',
+        state: 'بررسی شده',
+        price: '32',
+        updated_at: '2024/05/02',
+        company: 'ایرانسل',
+        area: 'منطقه 23',
     },
     {
         name: {
-            firstName: 'Kevin',
-            lastName: 'Vandy',
+            firstName: 'حمیدرضا',
+            lastName: 'رنجبرپور',
         },
-        address: '722 Emie Stream',
-        city: 'Lincoln',
-        state: 'Nebraska',
+        address: 'فلان جا',
+        city: 'اصفهان',
+        state: 'بررسی شده',
+        price: '45',
+        updated_at: '2024/05/02',
+        company: 'ایرانول',
+        area: 'منطقه 21',
     },
     {
         name: {
-            firstName: 'Joshua',
-            lastName: 'Rolluffs',
+            firstName: 'محمد',
+            lastName: 'جلالی',
         },
-        address: '32188 Larkin Turnpike',
-        city: 'Charleston',
-        state: 'South Carolina',
+        address: 'فلان جا',
+        city: 'رشت',
+        state: 'درحال بررسی',
+        price: '8',
+        updated_at: '2024/05/02',
+        company: 'فیلیمو',
+        area: 'منطقه 8',
     },
 ];
 
@@ -116,7 +136,7 @@ const DataTable = (props) => {
         ...props
     })
 
-    return <DataTable_Main table={table} columns={columns}/>;
+    return <DataTable_Main table={table} columns={flatColumns}/>;
 };
 
 export default DataTable;
diff --git a/src/core/components/DataTable/refactor/RefactorTable.jsx b/src/core/components/DataTable/refactor/RefactorTable.jsx
new file mode 100644
index 0000000..06f75c1
--- /dev/null
+++ b/src/core/components/DataTable/refactor/RefactorTable.jsx
@@ -0,0 +1,28 @@
+"use client"
+import {IconButton, Tooltip} from '@mui/material';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import useTableSetting from "@/lib/hooks/useTableSetting";
+import {useState} from "react";
+
+function RefactorTable() {
+    const {refactorAction} = useTableSetting();
+    const [userId, setUserId] = useState(2);
+    const [pageName, setPageName] = useState('loan');
+    const [tableName, setTableName] = useState('loan_table');
+
+    const refactor = () => {
+        refactorAction(userId, pageName, tableName);
+    };
+
+    return (
+        <Tooltip title="بازنشانی اطلاعات">
+            <IconButton onClick={refactor} aria-label="refactor table">
+                <RestartAltIcon/>
+            </IconButton>
+        </Tooltip>
+    );
+}
+
+export default RefactorTable;
+
+
diff --git a/src/core/components/DataTable/toolbar/TopToolbar.js b/src/core/components/DataTable/toolbar/TopToolbar.js
index 46bae3e..2b9641c 100644
--- a/src/core/components/DataTable/toolbar/TopToolbar.js
+++ b/src/core/components/DataTable/toolbar/TopToolbar.js
@@ -4,6 +4,7 @@ import DataTable_LinearProgressBar from "./LinearProgressBar";
 import DataTable_TablePagination from "./TablePagination";
 import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons";
 import FilterColumn from "@/core/components/DataTable/filter/FilterColumn";
+import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable";
 
 const DataTable_TopToolbar = ({table, columns}) => {
     const {
@@ -71,6 +72,7 @@ const DataTable_TopToolbar = ({table, columns}) => {
                             justifyContent: 'flex-end',
                         }}
                     >
+                        <RefactorTable/>
                         <FilterColumn columns={columns}/>
                         <DataTable_ToolbarInternalButtons table={table}/>
                     </Box>
diff --git a/src/lib/contexts/tableSetting.jsx b/src/lib/contexts/tableSetting.jsx
index 0c2262d..abc2ad7 100644
--- a/src/lib/contexts/tableSetting.jsx
+++ b/src/lib/contexts/tableSetting.jsx
@@ -1,6 +1,5 @@
 'use client'
 import {createContext, useCallback, useEffect, useState} from "react";
-import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
 
 export const TableSettingContext = createContext();
 export const TableSettingProvider = ({children}) => {
@@ -53,7 +52,23 @@ export const TableSettingProvider = ({children}) => {
         localStorage.setItem("_setting-app", JSON.stringify(updatedLocalStorage));
         setSettingStore(updatedLocalStorage);
     }
-
+    const refactorAction = (user_id, page_name, table_name) => {
+        const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {};
+        const userSettings = prevLocalStorage[user_id] || {};
+        const pageSettings = userSettings[page_name] || {};
+        const refactorData = {
+            ...prevLocalStorage,
+            [user_id]: {
+                ...userSettings,
+                [page_name]: {
+                    ...pageSettings,
+                    [table_name]: {},
+                },
+            },
+        };
+        localStorage.setItem("_setting-app", JSON.stringify(refactorData));
+        setSettingStore(refactorData);
+    }
     const SummaryTextMessage = (values, columns) => {
         let SummaryText = "";
         let HideText = "";
@@ -122,7 +137,7 @@ export const TableSettingProvider = ({children}) => {
 
     return (
         <TableSettingContext.Provider
-            value={{settingStore, hideAction, sortAction, filterAction}}>
+            value={{settingStore, hideAction, sortAction, filterAction, refactorAction}}>
             {children}
         </TableSettingContext.Provider>
     );
diff --git a/src/lib/hooks/useTableSetting.jsx b/src/lib/hooks/useTableSetting.jsx
index 14d9d4e..7617655 100644
--- a/src/lib/hooks/useTableSetting.jsx
+++ b/src/lib/hooks/useTableSetting.jsx
@@ -1,10 +1,10 @@
-import { useContext } from "react";
-import { TableSettingContext } from "../contexts/tableSetting";
+import {useContext} from "react";
+import {TableSettingContext} from "../contexts/tableSetting";
 
 const useTableSetting = () => {
-  const { settingStore, hideAction, sortAction, filterAction } =
-    useContext(TableSettingContext);
-  return { settingStore, hideAction, sortAction, filterAction };
+    const {settingStore, hideAction, sortAction, filterAction, refactorAction} =
+        useContext(TableSettingContext);
+    return {settingStore, hideAction, sortAction, filterAction, refactorAction};
 };
 
 export default useTableSetting;