Translate mui Data Grid column headers

Question

I use MUI Data Grid froa table and now I am working on i18n localization. I encountered a trouble where I can't translate column headers due to them being a static object and not a react component. Applying t hook doesnt work on lanuage change. How can I change translation when triggering language change?

Here's the file which I export to table react component file and use in column props.

import { Box, Tooltip } from "@mui/material";
import {
  deliverTruckBulk,
  pickupTruckBulk,
} from "assets/img/statuses/statusImages";
import { dateComparator, localizeDate, localizeTime } from "helpers/helpers";
import i18next from "i18next";
import StatusIcon from "../../../../StatusIcon/StatusIcon";
import {
  OrderTableCaption,
  OrderTableText,
} from "../../../../Typography/OrderList";

// const t = (string) => i18next.t(string);

export const OrderTableColumns = [
  {
    field: "shippingDate",
    headerName: "Requested Date",
    sortComparator: dateComparator,
    renderCell: (params) => (
      <Box>
        <OrderTableText sx={{ fontWeight: 500 }}>
          {localizeDate(params.value.date)}
        </OrderTableText>
        <OrderTableCaption>
          {`${localizeTime(params.value.startTime)} - ${localizeTime(
            params.value.endTime
          )}`}
        </OrderTableCaption>
      </Box>
    ),
    flex: 0,
  },
  {
    field: "po-order",
    headerName: i18next.t("order.orderNumber"),
    renderCell: (params) => (
      <Box>
        <OrderTableText>{params.value.customerReference}</OrderTableText>
        <OrderTableCaption>{params.value.orderNumber}</OrderTableCaption>
      </Box>
    ),
    flex: 1,
    sortable: false,
  },
  {
    field: "destination",
    headerName: "Destination",
    renderCell: (params) => (
      <Box sx={{ display: "flex", flexDirection: "column" }}>
        <OrderTableText>{params.value.siteName}</OrderTableText>
        <OrderTableCaption>{params.value.street}</OrderTableCaption>
      </Box>
    ),
    flex: 1,
    sortable: false,
  },
  {
    field: "material",
    headerName: "Material",
    renderCell: (params) => <OrderTableText>{params.value}</OrderTableText>,
    flex: 1,
    sortable: false,
  },
  {
    field: "ordered-delivered",
    headerName: "Ordered/Delivered",
    renderCell: ({ value }) => {
      const isShippingTypeCollect = value.shippingType === "collect";
      const shippingType = isShippingTypeCollect
        ? pickupTruckBulk
        : deliverTruckBulk;

      const tooltipTitle = `${
        isShippingTypeCollect ? "Pick-up" : "Delivery"
      } by bulk carrier`;

      return (
        <Box sx={{ display: "flex", columnGap: "5px" }}>
          <OrderTableText>
            {value.quantity} {i18next.t("capacityTons1")}
          </OrderTableText>
          <Tooltip title={tooltipTitle}>
            <img src={shippingType} alt={shippingType} width="24px" />
          </Tooltip>
        </Box>
      );
    },
    flex: 0,
    sortable: false,
  },
  {
    field: "status",
    headerName: i18next.t("order.orderStatus"),
    renderCell: (params) => <StatusIcon status={params.value} />,
    flex: 0,
    maxWidth: 60,
    sortable: false,
  },
];

Answer 1

Moved column object into a custom hook where I got the access to t hook from i18n. Futher refactor required but at lteast it works.