diff --git a/src/components/dashboard/commercial-chief/index.jsx b/src/components/dashboard/commercial-chief/index.jsx index 4ac03b3..9f84193 100644 --- a/src/components/dashboard/commercial-chief/index.jsx +++ b/src/components/dashboard/commercial-chief/index.jsx @@ -1,15 +1,12 @@ import DashboardLayouts from "@/layouts/dashboardLayouts"; -import {Box, IconButton, Typography} from "@mui/material"; -import ClearIcon from "@mui/icons-material/Clear"; +import {Box, Typography} from "@mui/material"; import {useMemo} from "react"; import {GET_COMMERCIAL_CHIEF} from "@/core/data/apiRoutes"; import {useTranslations} from "next-intl"; import TableRowActions from "./TableRowActions"; -import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers"; -import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; import moment from "jalali-moment"; -import {faIR} from "@mui/x-date-pickers/locales"; import DataTable from "@/core/components/DataTable"; +import MuiDatePicker from "@/core/components/MuiDatePicker"; function DashboardCommercialChiefComponent() { const t = useTranslations(); @@ -96,56 +93,10 @@ function DashboardCommercialChiefComponent() { Cell: ({renderedCellValue}) => { return {renderedCellValue}; }, - Header: ({column}) => {column.columnDef.header}, + Header: ({column}) => <>{column.columnDef.header}, Filter: ({column}) => { - const filterFnValue = column.columnDef._filterFn; return ( - - - { - const date = new Date(newValue); - const formattedDate = moment(date) - .locale("en") - .format("YYYY-MM-DD HH:mm"); - column.setFilterValue(formattedDate); - }} - slotProps={{ - textField: { - placeholder: "تاریخ خود را وارد کنید", - helperText: `${t("filter_mode")}: ${t(filterFnValue)}`, - sx: {minWidth: "120px"}, - variant: "standard", - }, - }} - value={ - column.getFilterValue() - ? new Date(column.getFilterValue()) - : null - } - /> - - { - column.setFilterValue(null); - }} - sx={{ - color: column.getFilterValue() - ? "rgba(0, 0, 0, 0.54)" - : "#bfbfbf", - }} - > - - - + ); }, }, diff --git a/src/components/dashboard/development-assistant/index.jsx b/src/components/dashboard/development-assistant/index.jsx index e54daab..ed46fb0 100644 --- a/src/components/dashboard/development-assistant/index.jsx +++ b/src/components/dashboard/development-assistant/index.jsx @@ -1,15 +1,12 @@ import DashboardLayouts from "@/layouts/dashboardLayouts"; -import {Box, IconButton, Typography} from "@mui/material"; -import ClearIcon from "@mui/icons-material/Clear"; +import {Box, Typography} from "@mui/material"; import {useMemo} from "react"; import {GET_DEVELOPMENT_ASSISTANT} from "@/core/data/apiRoutes"; import {useTranslations} from "next-intl"; import TableRowActions from "./TableRowActions"; -import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers"; -import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; import moment from "jalali-moment"; -import {faIR} from "@mui/x-date-pickers/locales"; import DataTable from "@/core/components/DataTable"; +import MuiDatePicker from "@/core/components/MuiDatePicker"; function DashboardDevelopmentAssistantComponent() { const t = useTranslations(); @@ -97,56 +94,10 @@ function DashboardDevelopmentAssistantComponent() { Cell: ({renderedCellValue}) => { return {renderedCellValue}; }, - Header: ({column}) => {column.columnDef.header}, + Header: ({column}) => <>{column.columnDef.header}, Filter: ({column}) => { - const filterFnValue = column.columnDef._filterFn; return ( - - - { - const date = new Date(newValue); - const formattedDate = moment(date) - .locale("en") - .format("YYYY-MM-DD HH:mm"); - column.setFilterValue(formattedDate); - }} - slotProps={{ - textField: { - placeholder: "تاریخ خود را وارد کنید", - helperText: `${t("filter_mode")}: ${t(filterFnValue)}`, - sx: {minWidth: "120px"}, - variant: "standard", - }, - }} - value={ - column.getFilterValue() - ? new Date(column.getFilterValue()) - : null - } - /> - - { - column.setFilterValue(null); - }} - sx={{ - color: column.getFilterValue() - ? "rgba(0, 0, 0, 0.54)" - : "#bfbfbf", - }} - > - - - + ); }, }, diff --git a/src/components/dashboard/inspector-expert/index.jsx b/src/components/dashboard/inspector-expert/index.jsx index 5eeb329..1be98ed 100644 --- a/src/components/dashboard/inspector-expert/index.jsx +++ b/src/components/dashboard/inspector-expert/index.jsx @@ -1,15 +1,12 @@ import DashboardLayouts from "@/layouts/dashboardLayouts"; -import {Box, IconButton, Typography} from "@mui/material"; -import ClearIcon from "@mui/icons-material/Clear"; +import {Box, Typography} from "@mui/material"; import {useMemo} from "react"; import {GET_INSPECTOR_EXPERT} from "@/core/data/apiRoutes"; import {useTranslations} from "next-intl"; import TableRowActions from "./TableRowActions"; -import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers"; -import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; import moment from "jalali-moment"; -import {faIR} from "@mui/x-date-pickers/locales"; import DataTable from "@/core/components/DataTable"; +import MuiDatePicker from "@/core/components/MuiDatePicker"; function DashboardInspectorExpertComponent() { const t = useTranslations(); @@ -96,56 +93,10 @@ function DashboardInspectorExpertComponent() { Cell: ({renderedCellValue}) => { return {renderedCellValue}; }, - Header: ({column}) => {column.columnDef.header}, + Header: ({column}) => <>{column.columnDef.header}, Filter: ({column}) => { - const filterFnValue = column.columnDef._filterFn; return ( - - - { - const date = new Date(newValue); - const formattedDate = moment(date) - .locale("en") - .format("YYYY-MM-DD HH:mm"); - column.setFilterValue(formattedDate); - }} - slotProps={{ - textField: { - placeholder: "تاریخ خود را وارد کنید", - helperText: `${t("filter_mode")}: ${t(filterFnValue)}`, - sx: {minWidth: "120px"}, - variant: "standard", - }, - }} - value={ - column.getFilterValue() - ? new Date(column.getFilterValue()) - : null - } - /> - - { - column.setFilterValue(null); - }} - sx={{ - color: column.getFilterValue() - ? "rgba(0, 0, 0, 0.54)" - : "#bfbfbf", - }} - > - - - + ); }, }, diff --git a/src/components/dashboard/machinary-office/index.jsx b/src/components/dashboard/machinary-office/index.jsx index 8f68209..73c373c 100644 --- a/src/components/dashboard/machinary-office/index.jsx +++ b/src/components/dashboard/machinary-office/index.jsx @@ -1,15 +1,12 @@ import DashboardLayouts from "@/layouts/dashboardLayouts"; -import {Box, IconButton, Typography} from "@mui/material"; -import ClearIcon from "@mui/icons-material/Clear"; +import {Box, Typography} from "@mui/material"; import {useMemo} from "react"; import {GET_MACHINARY_OFFICE} from "@/core/data/apiRoutes"; import {useTranslations} from "next-intl"; import TableRowActions from "./TableRowActions"; -import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers"; -import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; import moment from "jalali-moment"; -import {faIR} from "@mui/x-date-pickers/locales"; import DataTable from "@/core/components/DataTable"; +import MuiDatePicker from "@/core/components/MuiDatePicker"; function DashboardMachinaryOfficeComponent() { const t = useTranslations(); @@ -96,56 +93,10 @@ function DashboardMachinaryOfficeComponent() { Cell: ({renderedCellValue}) => { return {renderedCellValue}; }, - Header: ({column}) => {column.columnDef.header}, + Header: ({column}) => <>{column.columnDef.header}, Filter: ({column}) => { - const filterFnValue = column.columnDef._filterFn; return ( - - - { - const date = new Date(newValue); - const formattedDate = moment(date) - .locale("en") - .format("YYYY-MM-DD HH:mm"); - column.setFilterValue(formattedDate); - }} - slotProps={{ - textField: { - placeholder: "تاریخ خود را وارد کنید", - helperText: `${t("filter_mode")}: ${t(filterFnValue)}`, - sx: {minWidth: "120px"}, - variant: "standard", - }, - }} - value={ - column.getFilterValue() - ? new Date(column.getFilterValue()) - : null - } - /> - - { - column.setFilterValue(null); - }} - sx={{ - color: column.getFilterValue() - ? "rgba(0, 0, 0, 0.54)" - : "#bfbfbf", - }} - > - - - + ); }, }, diff --git a/src/components/dashboard/navgan-province-manager/index.jsx b/src/components/dashboard/navgan-province-manager/index.jsx index 702175c..8823e37 100644 --- a/src/components/dashboard/navgan-province-manager/index.jsx +++ b/src/components/dashboard/navgan-province-manager/index.jsx @@ -1,15 +1,12 @@ import DashboardLayouts from "@/layouts/dashboardLayouts"; -import {Box, IconButton, Typography} from "@mui/material"; -import ClearIcon from "@mui/icons-material/Clear"; +import {Box, Typography} from "@mui/material"; import {useMemo} from "react"; import {GET_NAVGAN_PROVINCE_MANAGER} from "@/core/data/apiRoutes"; import {useTranslations} from "next-intl"; import TableRowActions from "./TableRowActions"; -import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers"; -import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; import moment from "jalali-moment"; -import {faIR} from "@mui/x-date-pickers/locales"; import DataTable from "@/core/components/DataTable"; +import MuiDatePicker from "@/core/components/MuiDatePicker"; function DashboardNavganProvinceManagerComponent() { const t = useTranslations(); @@ -97,56 +94,10 @@ function DashboardNavganProvinceManagerComponent() { Cell: ({renderedCellValue}) => { return {renderedCellValue}; }, - Header: ({column}) => {column.columnDef.header}, + Header: ({column}) => <>{column.columnDef.header}, Filter: ({column}) => { - const filterFnValue = column.columnDef._filterFn; return ( - - - { - const date = new Date(newValue); - const formattedDate = moment(date) - .locale("en") - .format("YYYY-MM-DD HH:mm"); - column.setFilterValue(formattedDate); - }} - slotProps={{ - textField: { - placeholder: "تاریخ خود را وارد کنید", - helperText: `${t("filter_mode")}: ${t(filterFnValue)}`, - sx: {minWidth: "120px"}, - variant: "standard", - }, - }} - value={ - column.getFilterValue() - ? new Date(column.getFilterValue()) - : null - } - /> - - { - column.setFilterValue(null); - }} - sx={{ - color: column.getFilterValue() - ? "rgba(0, 0, 0, 0.54)" - : "#bfbfbf", - }} - > - - - + ); }, }, diff --git a/src/components/dashboard/passenger-boss/index.jsx b/src/components/dashboard/passenger-boss/index.jsx index 5fe7342..ad6848f 100644 --- a/src/components/dashboard/passenger-boss/index.jsx +++ b/src/components/dashboard/passenger-boss/index.jsx @@ -1,15 +1,12 @@ import DashboardLayouts from "@/layouts/dashboardLayouts"; -import {Box, IconButton, Typography} from "@mui/material"; -import ClearIcon from "@mui/icons-material/Clear"; +import {Box, Typography} from "@mui/material"; import {useMemo} from "react"; import {GET_PASSENGER_BOSS} from "@/core/data/apiRoutes"; import {useTranslations} from "next-intl"; import TableRowActions from "./TableRowActions"; -import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers"; -import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; import moment from "jalali-moment"; -import {faIR} from "@mui/x-date-pickers/locales"; import DataTable from "@/core/components/DataTable"; +import MuiDatePicker from "@/core/components/MuiDatePicker"; function DashboardPassengerOfficeComponent() { const t = useTranslations(); @@ -97,56 +94,10 @@ function DashboardPassengerOfficeComponent() { Cell: ({renderedCellValue}) => { return {renderedCellValue}; }, - Header: ({column}) => {column.columnDef.header}, + Header: ({column}) => <>{column.columnDef.header}, Filter: ({column}) => { - const filterFnValue = column.columnDef._filterFn; return ( - - - { - const date = new Date(newValue); - const formattedDate = moment(date) - .locale("en") - .format("YYYY-MM-DD HH:mm"); - column.setFilterValue(formattedDate); - }} - slotProps={{ - textField: { - placeholder: "تاریخ خود را وارد کنید", - helperText: `${t("filter_mode")}: ${t(filterFnValue)}`, - sx: {minWidth: "120px"}, - variant: "standard", - }, - }} - value={ - column.getFilterValue() - ? new Date(column.getFilterValue()) - : null - } - /> - - { - column.setFilterValue(null); - }} - sx={{ - color: column.getFilterValue() - ? "rgba(0, 0, 0, 0.54)" - : "#bfbfbf", - }} - > - - - + ); }, }, diff --git a/src/components/dashboard/passenger-office/index.jsx b/src/components/dashboard/passenger-office/index.jsx index d36acff..3f50345 100644 --- a/src/components/dashboard/passenger-office/index.jsx +++ b/src/components/dashboard/passenger-office/index.jsx @@ -1,15 +1,12 @@ import DashboardLayouts from "@/layouts/dashboardLayouts"; -import {Box, IconButton, Typography} from "@mui/material"; -import ClearIcon from "@mui/icons-material/Clear"; +import {Box, Typography} from "@mui/material"; import {useMemo} from "react"; -import {faIR} from "@mui/x-date-pickers/locales"; import {GET_PASSENGER_OFFICE} from "@/core/data/apiRoutes"; import {useTranslations} from "next-intl"; import TableRowActions from "./TableRowActions"; -import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers"; -import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; import moment from "jalali-moment"; import DataTable from "@/core/components/DataTable"; +import MuiDatePicker from "@/core/components/MuiDatePicker"; function DashboardPassengerOfficeComponent() { const t = useTranslations(); @@ -97,57 +94,10 @@ function DashboardPassengerOfficeComponent() { Cell: ({renderedCellValue}) => { return {renderedCellValue}; }, - Header: ({column}) => {column.columnDef.header}, + Header: ({column}) => <>{column.columnDef.header}, Filter: ({column}) => { - const filterFnValue = column.columnDef._filterFn; return ( - - - { - const date = new Date(newValue); - const formattedDate = moment(date) - .locale("en") - .format("YYYY-MM-DD HH:mm"); - column.setFilterValue(formattedDate); - }} - slotProps={{ - textField: { - placeholder: "تاریخ خود را وارد کنید", - helperText: `${t("filter_mode")}: ${t(filterFnValue)}`, - sx: {minWidth: "120px"}, - variant: "standard", - actionbar: {actions: ["accept", "today"]}, - }, - }} - value={ - column.getFilterValue() - ? new Date(column.getFilterValue()) - : null - } - /> - - { - column.setFilterValue(null); - }} - sx={{ - color: column.getFilterValue() - ? "rgba(0, 0, 0, 0.54)" - : "#bfbfbf", - }} - > - - - + ); }, }, diff --git a/src/components/dashboard/province-head-expert/index.jsx b/src/components/dashboard/province-head-expert/index.jsx index ded6eef..c76c96d 100644 --- a/src/components/dashboard/province-head-expert/index.jsx +++ b/src/components/dashboard/province-head-expert/index.jsx @@ -1,15 +1,12 @@ import DashboardLayouts from "@/layouts/dashboardLayouts"; -import {Box, IconButton, Typography} from "@mui/material"; -import ClearIcon from "@mui/icons-material/Clear"; +import {Box, Typography} from "@mui/material"; import {useMemo} from "react"; import {GET_PROVINCE_HEAD_EXPERT} from "@/core/data/apiRoutes"; import {useTranslations} from "next-intl"; -import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers"; -import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; import moment from "jalali-moment"; -import {faIR} from "@mui/x-date-pickers/locales"; import DataTable from "@/core/components/DataTable"; import TableRowActions from "./TableRowActions" +import MuiDatePicker from "@/core/components/MuiDatePicker"; function DashboardProvinceHeadExpertComponent() { const t = useTranslations(); @@ -97,56 +94,10 @@ function DashboardProvinceHeadExpertComponent() { Cell: ({renderedCellValue}) => { return {renderedCellValue}; }, - Header: ({column}) => {column.columnDef.header}, + Header: ({column}) => <>{column.columnDef.header}, Filter: ({column}) => { - const filterFnValue = column.columnDef._filterFn; return ( - - - { - const date = new Date(newValue); - const formattedDate = moment(date) - .locale("en") - .format("YYYY-MM-DD HH:mm"); - column.setFilterValue(formattedDate); - }} - slotProps={{ - textField: { - placeholder: "تاریخ خود را وارد کنید", - helperText: `${t("filter_mode")}: ${t(filterFnValue)}`, - sx: {minWidth: "120px"}, - variant: "standard", - }, - }} - value={ - column.getFilterValue() - ? new Date(column.getFilterValue()) - : null - } - /> - - { - column.setFilterValue(null); - }} - sx={{ - color: column.getFilterValue() - ? "rgba(0, 0, 0, 0.54)" - : "#bfbfbf", - }} - > - - - + ); }, }, diff --git a/src/components/dashboard/refahi-province-manager/index.jsx b/src/components/dashboard/refahi-province-manager/index.jsx index 8122fcf..740f6e7 100644 --- a/src/components/dashboard/refahi-province-manager/index.jsx +++ b/src/components/dashboard/refahi-province-manager/index.jsx @@ -1,15 +1,12 @@ import DashboardLayouts from "@/layouts/dashboardLayouts"; -import {Box, IconButton, Typography} from "@mui/material"; -import ClearIcon from "@mui/icons-material/Clear"; +import {Box, Typography} from "@mui/material"; import {useMemo} from "react"; -import {faIR} from "@mui/x-date-pickers/locales"; import {GET_REFAHI_PROVINCE_MANAGER} from "@/core/data/apiRoutes"; import {useTranslations} from "next-intl"; import TableRowActions from "./TableRowActions"; -import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers"; -import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; import moment from "jalali-moment"; import DataTable from "@/core/components/DataTable"; +import MuiDatePicker from "@/core/components/MuiDatePicker"; function DashboardRefahiProvinceManagerComponent() { const t = useTranslations(); @@ -97,57 +94,10 @@ function DashboardRefahiProvinceManagerComponent() { Cell: ({renderedCellValue}) => { return {renderedCellValue}; }, - Header: ({column}) => {column.columnDef.header}, + Header: ({column}) => <>{column.columnDef.header}, Filter: ({column}) => { - const filterFnValue = column.columnDef._filterFn; return ( - - - { - const date = new Date(newValue); - const formattedDate = moment(date) - .locale("en") - .format("YYYY-MM-DD HH:mm"); - column.setFilterValue(formattedDate); - }} - slotProps={{ - textField: { - placeholder: "تاریخ خود را وارد کنید", - helperText: `${t("filter_mode")}: ${t(filterFnValue)}`, - sx: {minWidth: "120px"}, - variant: "standard", - actionbar: {actions: ["accept", "today"]}, - }, - }} - value={ - column.getFilterValue() - ? new Date(column.getFilterValue()) - : null - } - /> - - { - column.setFilterValue(null); - }} - sx={{ - color: column.getFilterValue() - ? "rgba(0, 0, 0, 0.54)" - : "#bfbfbf", - }} - > - - - + ); }, }, diff --git a/src/components/dashboard/transportation-assistance/index.jsx b/src/components/dashboard/transportation-assistance/index.jsx index 8f96ed4..01314d1 100644 --- a/src/components/dashboard/transportation-assistance/index.jsx +++ b/src/components/dashboard/transportation-assistance/index.jsx @@ -1,15 +1,12 @@ import DashboardLayouts from "@/layouts/dashboardLayouts"; -import {Box, IconButton, Typography} from "@mui/material"; -import ClearIcon from "@mui/icons-material/Clear"; +import {Box, Typography} from "@mui/material"; import {useMemo} from "react"; import {GET_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes"; import {useTranslations} from "next-intl"; import TableRowActions from "./TableRowActions"; -import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers"; -import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; -import {faIR} from "@mui/x-date-pickers/locales"; import moment from "jalali-moment"; import DataTable from "@/core/components/DataTable"; +import MuiDatePicker from "@/core/components/MuiDatePicker"; function DashboardTransportationAssistanceComponent() { const t = useTranslations(); @@ -97,56 +94,10 @@ function DashboardTransportationAssistanceComponent() { Cell: ({renderedCellValue}) => ( {renderedCellValue} ), - Header: ({column}) => {column.columnDef.header}, + Header: ({column}) => <>{column.columnDef.header}, Filter: ({column}) => { - const filterFnValue = column.columnDef._filterFn; return ( - - - { - const date = new Date(newValue); - const formattedDate = moment(date) - .locale("en") - .format("YYYY-MM-DD HH:mm"); - column.setFilterValue(formattedDate); - }} - slotProps={{ - textField: { - placeholder: "تاریخ خود را وارد کنید", - helperText: `${t("filter_mode")}: ${t(filterFnValue)}`, - sx: {minWidth: "120px"}, - variant: "standard", - }, - }} - value={ - column.getFilterValue() - ? new Date(column.getFilterValue()) - : null - } - /> - - { - column.setFilterValue(null); - }} - sx={{ - color: column.getFilterValue() - ? "rgba(0, 0, 0, 0.54)" - : "#bfbfbf", - }} - > - - - + ); }, }, diff --git a/src/core/components/MuiDatePicker.jsx b/src/core/components/MuiDatePicker.jsx index de6c5d5..18be3cc 100644 --- a/src/core/components/MuiDatePicker.jsx +++ b/src/core/components/MuiDatePicker.jsx @@ -1,35 +1,61 @@ -import {DatePicker, LocalizationProvider} from "@mui/x-date-pickers"; +import {LocalizationProvider, MobileDateTimePicker} from "@mui/x-date-pickers"; import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; import moment from "jalali-moment"; +import {faIR} from "@mui/x-date-pickers/locales"; +import {Box, IconButton} from "@mui/material"; +import ClearIcon from "@mui/icons-material/Clear"; import {useTranslations} from "next-intl"; -export default function MuiDatePicker({ - setFieldValue, - selectType, - error, - helperText, - }) { +export default function MuiDatePicker({column}) { const t = useTranslations(); - - const handleDateChange = (date) => { - const selectedDate = moment(date).locale("fa"); // should add .format() at the end to format the data - setFieldValue(selectType, selectedDate); - }; + const filterFnValue = column.columnDef._filterFn; return ( - - + + { + const date = new Date(newValue); + const formattedDate = moment(date) + .locale("en") + .format("YYYY-MM-DD HH:mm"); + column.setFilterValue(formattedDate); + }} + slotProps={{ + textField: { + placeholder: "تاریخ خود را وارد کنید", + helperText: `${t("filter_mode")}: ${t(filterFnValue)}`, + sx: {minWidth: "120px"}, + variant: "standard", + }, + }} + value={ + column.getFilterValue() + ? new Date(column.getFilterValue()) + : null + } + /> + + { + column.setFilterValue(null); }} - onChange={handleDateChange} - /> - + sx={{ + color: column.getFilterValue() + ? "rgba(0, 0, 0, 0.54)" + : "#bfbfbf", + }} + > + + + ); }