init CustomDataGrid based on DataGrid mui

src/components/CustomDataGrid.tsx

@@ -0,0 +1,14 @@
+import {DataGrid, type DataGridProps} from '@mui/x-data-grid'
+import {Stack, Box} from '@mui/material'
+
+export const CustomDataGrid = (props: DataGridProps) => {
+  return (
+    <Stack spacing={2}>
+      <DataGrid {...props} />
+      <Box>
+        {/* Ваши дополнительные элементы */}
+        Дополнительный контент
+      </Box>
+    </Stack>
+  )
+}

src/pages/article/list.tsx

@@ -1,4 +1,5 @@
-import {DataGrid, type GridColDef} from '@mui/x-data-grid'
+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'
 
@@ -62,7 +63,7 @@ export const ArticleList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} />
+      <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} />
     </List>
   )
 }

src/pages/carrier/list.tsx

@@ -1,4 +1,5 @@
-import {DataGrid, type GridColDef} from '@mui/x-data-grid'
+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'
 
@@ -62,7 +63,7 @@ export const CarrierList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} localeText={localeText} />
+      <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} />
     </List>
   )
 }

src/pages/city/list.tsx

@@ -1,4 +1,5 @@
-import {DataGrid, type GridColDef} from '@mui/x-data-grid'
+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'
 
@@ -56,7 +57,7 @@ export const CityList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} localeText={localeText} />
+      <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} />
     </List>
   )
 }

src/pages/country/list.tsx

@@ -1,4 +1,5 @@
-import {DataGrid, type GridColDef} from '@mui/x-data-grid'
+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'
 
@@ -49,7 +50,7 @@ export const CountryList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.code} />
+      <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.code} />
     </List>
   )
 }

src/pages/media/list.tsx

@@ -1,4 +1,5 @@
-import {DataGrid, type GridColDef} from '@mui/x-data-grid'
+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'
 
@@ -60,7 +61,7 @@ export const MediaList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} />
+      <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} />
     </List>
   )
 }

src/pages/route/list.tsx

@@ -1,4 +1,5 @@
-import {DataGrid, type GridColDef} from '@mui/x-data-grid'
+import {type GridColDef} from '@mui/x-data-grid'
+import {CustomDataGrid} from '../../components/CustomDataGrid'
 import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
 import {Typography} from '@mui/material'
 import React from 'react'
@@ -73,7 +74,7 @@ export const RouteList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} />
+      <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} />
     </List>
   )
 }

src/pages/sight/list.tsx

@@ -1,5 +1,7 @@
 import React, {useState, useEffect} from 'react'
-import {DataGrid, type GridColDef, type GridColumnVisibilityModel} from '@mui/x-data-grid'
+import {type GridColDef, type GridColumnVisibilityModel} from '@mui/x-data-grid'
+import {CustomDataGrid} from '../../components/CustomDataGrid'
+
 import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
 import {Box, Button, Stack} from '@mui/material'
 
@@ -102,7 +104,7 @@ export const SightList = () => {
   return (
     <List>
       <Stack gap={2.5}>
-        <DataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} columnVisibilityModel={columnVisibilityModel} onColumnVisibilityModelChange={(model) => setColumnVisibilityModel(model)} />
+        <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} columnVisibilityModel={columnVisibilityModel} onColumnVisibilityModelChange={(model) => setColumnVisibilityModel(model)} />
 
         <Box sx={{mb: 2}}>
           <Button variant="contained" onClick={toggleCoordinates}>

src/pages/station/list.tsx

@@ -1,5 +1,7 @@
 import React, {useState, useEffect} from 'react'
-import {DataGrid, type GridColDef, type GridColumnVisibilityModel} from '@mui/x-data-grid'
+import {type GridColDef, type GridColumnVisibilityModel} from '@mui/x-data-grid'
+import {CustomDataGrid} from '../../components/CustomDataGrid'
+
 import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
 import {Box, Button, Stack} from '@mui/material'
 
@@ -100,7 +102,7 @@ export const StationList = () => {
   return (
     <List>
       <Stack gap={2.5}>
-        <DataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} columnVisibilityModel={columnVisibilityModel} onColumnVisibilityModelChange={(model) => setColumnVisibilityModel(model)} />
+        <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} columnVisibilityModel={columnVisibilityModel} onColumnVisibilityModelChange={(model) => setColumnVisibilityModel(model)} />
 
         <Box sx={{mb: 2}}>
           <Button variant="contained" onClick={toggleCoordinates}>

src/pages/vehicle/list.tsx

@@ -1,4 +1,5 @@
-import {DataGrid, type GridColDef} from '@mui/x-data-grid'
+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'
 
@@ -70,7 +71,7 @@ export const VehicleList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} />
+      <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} />
     </List>
   )
 }