thunder.tsx

const headCells: GridColDef[] = [
  {
    field: `reference`,
    headerName: `Tool reference`,
    sortable: true,
    minWidth: 270,
    flex: 1,
    renderCell: (params) => {
      return (
        <Tooltip title={params.value}>
          <Typography>
            {!params.value ? `No reference` : truncateString(params.value, 15)}
          </Typography>
        </Tooltip>
      );
    },
    renderHeader: (params) => {
      const [clearSearch, setClearSearch] = useState(false);
      const [searchState, setSearchState] = useState(``);
      const toolsState = useAppSelector(selectToolsState);

      const { setTableData } =
        useSafelyContext<SettingToolsInterface>(SettingToolsContext);

      const { setSelectedColumnHeader, requestSearch } =
        useSearchTableExperiment<ToolsTableListData>(
          toolsState.value,
          setTableData,
          searchState,
          [`name`],
        );

      useEffect(() => {
        requestSearch(toolsState.value);
      }, [toolsState.loading, toolsState.value, requestSearch]);

      useEffect(() => {
        if (searchState?.length > 0) {
          setClearSearch(true);
        }

        if (searchState?.length === 0) {
          setClearSearch(false);
        }
      }, [searchState]);

      useEffect(() => {
        setSelectedColumnHeader({ field: `reference` });
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, []);

      return (
        <Box display="flex" flexDirection="column" sx={{ py: 2 }}>
          <Typography
            sx={{
              color: (theme) => theme.palette.info.main,
              fontWeight: `600 !important`,
            }}
          >
            {params.colDef.headerName}
          </Typography>

          <TextField
            variant="standard"
            type="text"
            name="reference"
            placeholder="Search reference"
            InputProps={{
              endAdornment: clearSearch ? (
                <Tooltip title={`Clear search input`}>
                  <IconButton onClick={() => setSearchState(``)}>
                    <CloseIcon fontSize={`small`} sx={{ mr: 1 }} />
                  </IconButton>
                </Tooltip>
              ) : null,
              startAdornment: <SearchIcon />,
            }}
            onChange={(e) => setSearchState(e.target.value)}
            value={searchState}
            onKeyDown={(event) => event.stopPropagation()}
            onClick={(event) => event.stopPropagation()}
          />
        </Box>
      );
    },
  },
  {
    field: `name`,
    headerName: `Tool name`,
    minWidth: 270,
    flex: 2,
    renderCell: (params) => {
      return (
        <Tooltip title={params.value}>
          <Typography>
            {!params.value ? `No reference` : truncateString(params.value, 15)}
          </Typography>
        </Tooltip>
      );
    },
    renderHeader: (params) => {
      const [clearSearch, setClearSearch] = useState(false);
      const [searchState, setSearchState] = useState(``);
      const toolsState = useAppSelector(selectToolsState);

      const { setTableData } =
        useSafelyContext<SettingToolsInterface>(SettingToolsContext);

      const { setSelectedColumnHeader, requestSearch } =
        useSearchTableExperiment<ToolsTableListData>(
          toolsState.value,
          setTableData,
          searchState,
          [`name`],
        );

      useEffect(() => {
        requestSearch(toolsState.value);
      }, [toolsState.loading, toolsState.value, requestSearch]);

      useEffect(() => {
        if (searchState?.length > 0) {
          setClearSearch(true);
        }

        if (searchState?.length === 0) {
          setClearSearch(false);
        }
      }, [searchState]);

      useEffect(() => {
        setSelectedColumnHeader({ field: `name` });
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, []);

      return (
        <Box display="flex" flexDirection="column" sx={{ py: 2 }}>
          <Typography
            sx={{
              color: (theme) => theme.palette.info.main,
              fontWeight: `600 !important`,
            }}
          >
            {params.colDef.headerName}
          </Typography>

          <TextField
            variant="standard"
            type="text"
            name="name"
            placeholder="Search name"
            InputProps={{
              endAdornment: clearSearch ? (
                <Tooltip title={`Clear search input`}>
                  <IconButton onClick={() => setSearchState(``)}>
                    <CloseIcon fontSize={`small`} sx={{ mr: 1 }} />
                  </IconButton>
                </Tooltip>
              ) : null,
              startAdornment: <SearchIcon />,
            }}
            onChange={(e) => setSearchState(e.target.value)}
            value={searchState}
            onKeyDown={(event) => event.stopPropagation()}
            onClick={(event) => event.stopPropagation()}
          />
        </Box>
      );
    },
  },
  {
    field: `mobileAssetCategoryDto`,
    headerName: `Tool category`,
    minWidth: 270,
    flex: 1,
    sortable: false,
    renderCell: (params) => {
      return (
        <Button
          sx={{
            display: `flex`,
            gap: 1,
            px: 3,
          }}
          variant="outlined"
          size="small"
        >
          <FontAwesomeIcon icon={faSquare} size="lg" />
          {params.value.name}
        </Button>
      );
    },
    renderHeader: (params) => {
      const [selectFieldValue, setSelectFieldValue] =
        useState<CategoryMobileAssets | null>(null);
      const [searchState, setSearchState] = useState(``);
      const deferredSearch = useDeferredValue(searchState);
      const toolsState = useAppSelector(selectToolsState);

      const filteredCategory = useMemo(
        () =>
          toolsState.value.filter((item: any) =>
            item.name.toLowerCase().includes(deferredSearch.toLowerCase()),
          ),
        [deferredSearch, toolsState.value],
      );

      return (
        <Box display="flex" flexDirection="column" sx={{ py: 2 }}>
          <Typography
            sx={{
              color: (theme) => theme.palette.info.main,
              fontWeight: `600 !important`,
            }}
          >
            {params.colDef.headerName}
          </Typography>

          <Select
            size="small"
            name={params.colDef.field}
            fullWidth
            displayEmpty
            value={selectFieldValue?.name ?? ``}
            MenuProps={MenuProps}
            renderValue={(selected) => {
              if (selected !== ``) {
                return selected;
              }

              return (
                <span style={{ color: `grey` }}>
                  Filter {params.colDef.headerName}
                </span>
              );
            }}
            onChange={(event) => {
              event.stopPropagation();
              setSelectFieldValue(JSON.parse(event.target.value));
            }}
            onClose={() => setSearchState(``)}
            onKeyDown={(event) => event.stopPropagation()}
            onClick={(event) => event.stopPropagation()}
            onBlur={(event) => event.stopPropagation()}
          >
            <ListSubheader>
              <TextField
                size="small"
                autoFocus
                fullWidth
                onChange={(event) => {
                  setSearchState(event.target.value);
                }}
                onKeyDown={(event: any) => {
                  if (event.key !== `Escape`) {
                    event.stopPropagation();
                  }
                }}
              />
            </ListSubheader>
            {filteredCategory.length ? (
              filteredCategory?.map((item: any) => (
                <MenuItem
                  key={item.id}
                  value={JSON.stringify({
                    id: item.id,
                    type: item.type,
                    name: item.name,
                    icon: item.icon,
                  })}
                  onKeyDown={(event) => event.stopPropagation()}
                  onClick={(event) => event.stopPropagation()}
                  onBlur={(event) => event.stopPropagation()}
                >
                  {item.name}
                </MenuItem>
              ))
            ) : (
              <Box
                sx={{
                  height: `100px`,
                  display: `flex`,
                  justifyContent: `center`,
                  alignItems: `center`,
                }}
              >
                <Typography sx={{ color: `rgba(0, 0, 0, 0.23)` }}>
                  No data found
                </Typography>
              </Box>
            )}
          </Select>
        </Box>
      );
    },
  },
  {
    field: `groupsName`,
    headerName: `Group`,
    minWidth: 270,
    flex: 2,
    renderCell: (params) => {
      return <Typography>{params.value}</Typography>;
    },
    renderHeader: (params) => {
      const [clearSearch, setClearSearch] = useState(false);
      const [searchState, setSearchState] = useState(``);
      const toolsState = useAppSelector(selectToolsState);

      const { setTableData } =
        useSafelyContext<SettingToolsInterface>(SettingToolsContext);

      const { setSelectedColumnHeader, requestSearch } =
        useSearchTableExperiment<ToolsTableListData>(
          toolsState.value,
          setTableData,
          searchState,
          [`name`],
        );

      useEffect(() => {
        requestSearch(toolsState.value);
      }, [toolsState.loading, toolsState.value, requestSearch]);

      useEffect(() => {
        if (searchState?.length > 0) {
          setClearSearch(true);
        }

        if (searchState?.length === 0) {
          setClearSearch(false);
        }
      }, [searchState]);

      useEffect(() => {
        setSelectedColumnHeader({ field: `groupsName` });
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, []);

      return (
        <Box display="flex" flexDirection="column" sx={{ py: 2 }}>
          <Typography
            sx={{
              color: (theme) => theme.palette.info.main,
              fontWeight: `600 !important`,
            }}
          >
            {params.colDef.headerName}
          </Typography>

          <TextField
            variant="standard"
            type="text"
            name={params.colDef.headerName}
            placeholder="Search group"
            InputProps={{
              endAdornment: clearSearch ? (
                <Tooltip title={`Clear search input`}>
                  <IconButton onClick={() => setSearchState(``)}>
                    <CloseIcon fontSize={`small`} sx={{ mr: 1 }} />
                  </IconButton>
                </Tooltip>
              ) : null,
              startAdornment: <SearchIcon />,
            }}
            onChange={(e) => setSearchState(e.target.value)}
            value={searchState}
            onKeyDown={(event) => event.stopPropagation()}
            onClick={(event) => event.stopPropagation()}
          />
        </Box>
      );
    },
  },
  {
    field: `mobileAssetLithiumBattery`,
    headerName: `Lithium Battery`,
    minWidth: 270,
    sortable: false,
    flex: 2,
    renderHeader: (params) => {
      const [selectFieldValue, setSelectFieldValue] = useState<{
        lithium: boolean | null;
      }>({ lithium: null });

      const [searchState, setSearchState] = useState(``);
      const toolsState = useAppSelector(selectToolsState);

      const { setTableData } =
        useSafelyContext<SettingToolsInterface>(SettingToolsContext);

      const { setSelectedColumnHeader, requestSearch } =
        useSearchTableExperiment<ToolsTableListData>(
          toolsState.value,
          setTableData,
          searchState,
          [`name`],
          selectFieldValue.lithium as boolean,
        );

      useEffect(() => {
        requestSearch(toolsState.value);
      }, [toolsState.loading, toolsState.value, requestSearch]);

      useEffect(() => {
        setSelectedColumnHeader({ field: `mobileAssetLithiumBattery` });
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, []);

      return (
        <Box display="flex" flexDirection="column" sx={{ py: 2 }}>
          <Typography
            sx={{
              color: (theme) => theme.palette.info.main,
              fontWeight: `600 !important`,
            }}
          >
            {params.colDef.headerName}
          </Typography>

          <Select
            size="small"
            name={params.colDef.field}
            fullWidth
            displayEmpty
            value={selectFieldValue?.lithium}
            MenuProps={MenuProps}
            renderValue={(selected) => {
              if (selected !== null) {
                return (
                  <Button
                    sx={{
                      display: `flex`,
                      gap: 1,
                    }}
                    variant="outlined"
                    size="small"
                  >
                    <FontAwesomeIcon icon={faBattery} size="lg" />
                    {!selected ? `No Lithium` : `Lithium`}
                  </Button>
                );
              }

              return (
                <span style={{ color: `grey` }}>
                  Filter {params.colDef.headerName}
                </span>
              );
            }}
            onChange={(event) => {
              event.stopPropagation();
              setSelectFieldValue(JSON.parse(event.target.value as string));
            }}
            onKeyDown={(event) => event.stopPropagation()}
            onClick={(event) => event.stopPropagation()}
            onBlur={(event) => event.stopPropagation()}
          >
            <MenuItem
              key="With-lithium"
              value={JSON.stringify({ lithium: true })}
              onKeyDown={(event) => event.stopPropagation()}
              onClick={(event) => event.stopPropagation()}
              onBlur={(event) => event.stopPropagation()}
            >
              <Button
                fullWidth
                sx={{
                  display: `flex`,
                  gap: 1,
                }}
                variant="outlined"
                size="small"
              >
                <FontAwesomeIcon icon={faBattery} size="lg" />
                Lithium
              </Button>
            </MenuItem>
            <MenuItem
              key="No-lithium"
              value={JSON.stringify({ lithium: false })}
              onKeyDown={(event) => event.stopPropagation()}
              onClick={(event) => event.stopPropagation()}
            >
              <Button
                fullWidth
                sx={{
                  display: `flex`,
                  gap: 1,
                }}
                variant="outlined"
                size="small"
              >
                <FontAwesomeIcon icon={faBattery} size="lg" />
                No Lithium
              </Button>
            </MenuItem>
          </Select>
        </Box>
      );
    },
    renderCell: (params) => {
      return (
        <Button
          sx={{
            display: `flex`,
            gap: 1,
          }}
          variant="outlined"
          size="small"
        >
          <FontAwesomeIcon icon={faBattery} size="lg" />
          {!params.value ? `No Lithium` : `Lithium`}
        </Button>
      );
    },
  },
  {
    field: `mobileAssetBatteryPercentage`,
    headerName: `Battery Level`,
    minWidth: 270,
    flex: 1,
    sortable: false,
    renderCell: (params) => {
      const coloredValue =
        params.value === 0
          ? `red`
          : params.value >= 1 && params.value <= 20
          ? `yellow`
          : `green`;

      return (
        <Box sx={{ width: `100%` }}>
          <Typography sx={{ textAlign: `center`, color: coloredValue }}>
            {params.value}%
          </Typography>
        </Box>
      );
    },
    renderHeader: (params) => {
      const [clearSearch, setClearSearch] = useState(false);
      const [searchState, setSearchState] = useState(``);
      const toolsState = useAppSelector(selectToolsState);

      const { setTableData } =
        useSafelyContext<SettingToolsInterface>(SettingToolsContext);

      const { setSelectedColumnHeader, requestSearch } =
        useSearchTableExperiment<ToolsTableListData>(
          toolsState.value,
          setTableData,
          searchState,
          [`name`],
        );

      useEffect(() => {
        requestSearch(toolsState.value);
      }, [toolsState.loading, toolsState.value, requestSearch]);

      useEffect(() => {
        if (searchState?.length > 0) {
          setClearSearch(true);
        }

        if (searchState?.length === 0) {
          setClearSearch(false);
        }
      }, [searchState]);

      useEffect(() => {
        setSelectedColumnHeader({ field: `mobileAssetBatteryPercentage` });
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, []);
      1;
      return (
        <Box display="flex" flexDirection="column" sx={{ py: 2 }}>
          <Typography
            sx={{
              color: (theme) => theme.palette.info.main,
              fontWeight: `600 !important`,
            }}
          >
            {params.colDef.headerName}
          </Typography>

          <TextField
            variant="standard"
            type="text"
            name={params.colDef.headerName}
            placeholder="Filter battery level"
            InputProps={{
              endAdornment: clearSearch ? (
                <Tooltip title={`Clear search input`}>
                  <IconButton onClick={() => setSearchState(``)}>
                    <CloseIcon fontSize={`small`} sx={{ mr: 1 }} />
                  </IconButton>
                </Tooltip>
              ) : null,
              startAdornment: <SearchIcon />,
            }}
            onChange={(e) => setSearchState(e.target.value)}
            value={searchState}
            onKeyDown={(event) => event.stopPropagation()}
            onClick={(event) => event.stopPropagation()}
          />
        </Box>
      );
    },
  },
  {
    field: `active`,
    headerName: `Status`,
    minWidth: 200,
    sortable: false,
    flex: 1,
    renderCell: (params) => {
      return (
        <Box sx={{ width: `100%` }}>
          <Chip
            icon={
              params.value ? (
                <DoneAllIcon style={{ color: `white` }} />
              ) : (
                <BlockIcon style={{ color: `white` }} />
              )
            }
            label={params.value ? `Active` : `Inactive`}
            sx={{
              bgcolor: (theme) =>
                params.value
                  ? theme.palette.secondary.main
                  : theme.palette.error.main,
              color: `white`,
            }}
          />
        </Box>
      );
    },
    renderHeader: (params) => {
      const [selectFieldValue, setSelectFieldValue] = useState<{
        status: boolean | null;
      }>({ status: null });

      const [searchState, setSearchState] = useState(``);
      const toolsState = useAppSelector(selectToolsState);

      const { setTableData } =
        useSafelyContext<SettingToolsInterface>(SettingToolsContext);

      const { setSelectedColumnHeader, requestSearch } =
        useSearchTableExperiment<ToolsTableListData>(
          toolsState.value,
          setTableData,
          searchState,
          [`name`],
          selectFieldValue.status as boolean,
        );

      useEffect(() => {
        requestSearch(toolsState.value);
      }, [toolsState.loading, toolsState.value, requestSearch]);

      useEffect(() => {
        setSelectedColumnHeader({ field: `active` });
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, []);

      return (
        <Box display="flex" flexDirection="column" sx={{ py: 2 }}>
          <Typography
            sx={{
              color: (theme) => theme.palette.info.main,
              fontWeight: `600 !important`,
            }}
          >
            {params.colDef.headerName}
          </Typography>

          <Select
            size="small"
            name={params.colDef.field}
            fullWidth
            displayEmpty
            value={selectFieldValue?.status}
            MenuProps={MenuProps}
            renderValue={(selected) => {
              if (selected !== null) {
                return (
                  <Chip
                    icon={
                      selected ? (
                        <DoneAllIcon style={{ color: `white` }} />
                      ) : (
                        <BlockIcon style={{ color: `white` }} />
                      )
                    }
                    label={selected ? `Active` : `Inactive`}
                    sx={{
                      bgcolor: (theme) =>
                        selected
                          ? theme.palette.secondary.main
                          : theme.palette.error.main,
                      color: `white`,
                      width: `100%`,
                    }}
                  />
                );
              }

              return (
                <span style={{ color: `grey` }}>
                  Filter {params.colDef.headerName}
                </span>
              );
            }}
            onChange={(event) => {
              event.stopPropagation();
              setSelectFieldValue(JSON.parse(event.target.value as string));
            }}
            onKeyDown={(event) => event.stopPropagation()}
            onClick={(event) => event.stopPropagation()}
            onBlur={(event) => event.stopPropagation()}
          >
            <MenuItem
              key="With-statues-active"
              value={JSON.stringify({ status: true })}
            >
              <Chip
                icon={<DoneAllIcon style={{ color: `white` }} />}
                label={`Active`}
                sx={{
                  bgcolor: (theme) => theme.palette.secondary.main,
                  color: `white`,
                  width: `100%`,
                }}
              />
            </MenuItem>
            <MenuItem
              key="With-status-inactive"
              value={JSON.stringify({ status: false })}
            >
              <Chip
                icon={<BlockIcon style={{ color: `white` }} />}
                label={`Inactive`}
                sx={{
                  bgcolor: (theme) => theme.palette.error.main,
                  color: `white`,
                  width: `100%`,
                }}
              />
            </MenuItem>
          </Select>
        </Box>
      );
    },
  },
  {
    field: `columnButtonAction`,
    type: `action`,
    flex: 1,
    renderHeader: (_params) => {
      const theme = useTheme();
      const apiRef = useGridApiContext();
      const { open, openedPanelValue } = useGridSelector(
        apiRef,
        gridPreferencePanelStateSelector,
      );

      const showColumns = (_event: React.MouseEvent<HTMLButtonElement>) => {
        if (open && openedPanelValue === GridPreferencePanelsValue.columns) {
          apiRef.current.hidePreferences();
        } else {
          apiRef.current.showPreferences(GridPreferencePanelsValue.columns);
        }
      };

      return (
        <IconButton sx={{ width: 30 }} onClick={showColumns}>
          <FontAwesomeIcon
            color={theme.palette.text.primary}
            icon={faEllipsisV}
          />
        </IconButton>
      );
    },
    headerAlign: `right`,
    minWidth: 50,
    sortable: false,
  },
];