station edit in the route edit page

src/pages/city/list.tsx

@@ -1,78 +1,100 @@
-import {type GridColDef} from '@mui/x-data-grid'
-import {CustomDataGrid} from '../../components/CustomDataGrid'
-import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import React from 'react'
+import { type GridColDef } from "@mui/x-data-grid";
+import { CustomDataGrid } from "../../components/CustomDataGrid";
+import {
+  DeleteButton,
+  EditButton,
+  List,
+  ShowButton,
+  useDataGrid,
+} from "@refinedev/mui";
+import React, { useEffect } from "react";
 
-export const CityList = () => {
-  const {dataGridProps} = useDataGrid({})
+import { observer } from "mobx-react-lite";
+import { languageStore } from "../../store/LanguageStore";
+
+export const CityList = observer(() => {
+  const { language } = languageStore;
+
+  const { dataGridProps } = useDataGrid({
+    resource: "city",
+    meta: {
+      headers: {
+        "Accept-Language": language,
+      },
+    },
+  });
 
   const columns = React.useMemo<GridColDef[]>(
     () => [
       {
-        field: 'id',
-        headerName: 'ID',
-        type: 'number',
+        field: "id",
+        headerName: "ID",
+        type: "number",
         minWidth: 50,
-        align: 'left',
-        headerAlign: 'left',
+        align: "left",
+        headerAlign: "left",
       },
       {
-        field: 'country_code',
-        headerName: 'Код страны',
-        type: 'string',
+        field: "country_code",
+        headerName: "Код страны",
+        type: "string",
         minWidth: 150,
-        align: 'left',
-        headerAlign: 'left',
+        align: "left",
+        headerAlign: "left",
       },
       {
-        field: 'country',
-        headerName: 'Cтрана',
-        type: 'string',
+        field: "country",
+        headerName: "Cтрана",
+        type: "string",
         minWidth: 150,
-        align: 'left',
-        headerAlign: 'left',
+        align: "left",
+        headerAlign: "left",
       },
       {
-        field: 'name',
-        headerName: 'Название',
-        type: 'string',
+        field: "name",
+        headerName: "Название",
+        type: "string",
         minWidth: 150,
         flex: 1,
       },
       {
-        field: 'arms',
-        headerName: 'Герб',
-        type: 'string',
+        field: "arms",
+        headerName: "Герб",
+        type: "string",
         flex: 1,
       },
       {
-        field: 'actions',
-        headerName: 'Действия',
-        cellClassName: 'city-actions',
+        field: "actions",
+        headerName: "Действия",
+        cellClassName: "city-actions",
         minWidth: 120,
-        display: 'flex',
-        align: 'right',
-        headerAlign: 'center',
+        display: "flex",
+        align: "right",
+        headerAlign: "center",
         sortable: false,
         filterable: false,
         disableColumnMenu: true,
-        renderCell: function render({row}) {
+        renderCell: function render({ row }) {
           return (
             <>
               <EditButton hideText recordItemId={row.id} />
               <ShowButton hideText recordItemId={row.id} />
-              <DeleteButton hideText confirmTitle="Вы уверены?" recordItemId={row.id} />
+              <DeleteButton
+                hideText
+                confirmTitle="Вы уверены?"
+                recordItemId={row.id}
+              />
             </>
-          )
+          );
         },
       },
     ],
-    [],
-  )
+    []
+  );
 
   return (
     <List>
-      <CustomDataGrid {...dataGridProps} columns={columns} />
+      <CustomDataGrid {...dataGridProps} columns={columns} languageEnabled />
     </List>
-  )
-}
+  );
+});