create custom components for fileds and start to get hand dirty on datepicker (step2)

src/components/home/index.jsx

@@ -14,7 +14,7 @@ function HomeComponent() {
                         accessorKey: 'name.firstName',
                         header: 'نام',
                         id: "firstName",
-                        enableColumnFilter: false,
+                        enableColumnFilter: true,
                         datatype: "text",
                         filterFn: "contains",
                         enableClickToCopy: true,
@@ -67,7 +67,6 @@ function HomeComponent() {
                     "greaterThan",
                     "fuzzy"
                 ],
-
             },
             {
                 accessorKey: 'state',
@@ -87,7 +86,7 @@ function HomeComponent() {
                 header: 'محدوده',
                 id: "price",
                 enableColumnFilter: true,
-                datatype: "nemeric",
+                datatype: "numeric",
                 filterFn: "between",
                 columnFilterModeOptions: [
                     "equals",
@@ -102,23 +101,18 @@ function HomeComponent() {
                 enableColumnFilter: true,
                 datatype: "date",
                 filterFn: "between",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "between"
-                ],
             },
             {
                 accessorKey: 'company',
                 header: 'نام شرکت',
                 id: "company",
                 enableColumnFilter: true,
-                datatype: "select2",
+                datatype: "numeric",
                 filterFn: "equals",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
+                columnSelectOption: [
+                    {value: 1, label: "وایتل"},
+                    {value: 2, label: "اسنپ"},
+                    {value: 3, label: "تپسی"}
                 ],
             },
             {
@@ -126,12 +120,12 @@ function HomeComponent() {
                 header: 'منطقه',
                 id: "area",
                 enableColumnFilter: true,
-                datatype: "text",
+                datatype: "numeric",
                 filterFn: "equals",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
+                columnSelectOption: [
+                    {value: 1, label: "وایتل"},
+                    {value: 2, label: "اسنپ"},
+                    {value: 3, label: "تپسی"}
                 ],
             },
         ],