add ExportButton for CustomDataGrid component

src/components/CustomDataGrid.tsx

@@ -1,5 +1,7 @@
 import {DataGrid, type DataGridProps, type GridColumnVisibilityModel} from '@mui/x-data-grid'
 import {Stack, Button} from '@mui/material'
+import {ExportButton} from '@refinedev/mui'
+import {useExport} from '@refinedev/core'
 import React, {useState, useEffect, useMemo} from 'react'
 import Cookies from 'js-cookie'
 
@@ -7,12 +9,18 @@ import {localeText} from '../locales/ru/localeText'
 
 interface CustomDataGridProps extends DataGridProps {
   hasCoordinates?: boolean
+  resource?: string // Add this prop
 }
 
 const DEV_FIELDS = ['id', 'code', 'country_code', 'city_id', 'carrier_id'] as const
 
-export const CustomDataGrid = ({hasCoordinates = false, columns = [], ...props}: CustomDataGridProps) => {
+export const CustomDataGrid = ({hasCoordinates = false, columns = [], resource, ...props}: CustomDataGridProps) => {
   const isDev = import.meta.env.DEV
+  const {triggerExport, isLoading: exportLoading} = useExport({
+    resource: resource ?? '',
+    // pageSize: 100, #*
+    // maxItemCount: 100, #*
+  })
 
   const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
   const initialShowDevData = Cookies.get('showDevData') === 'true'
@@ -90,6 +98,8 @@ export const CustomDataGrid = ({hasCoordinates = false, columns = [], ...props}:
         }}
         pageSizeOptions={[10, 25, 50, 100]}
       />
+
+      <Stack direction="row" spacing={2} justifyContent="space-between" mb={2}>
         <Stack direction="row" spacing={2} sx={{mb: 2}}>
           {hasCoordinates && (
             <Button variant="contained" onClick={toggleCoordinates}>
@@ -103,6 +113,9 @@ export const CustomDataGrid = ({hasCoordinates = false, columns = [], ...props}:
             </Button>
           )}
         </Stack>
+
+        <ExportButton onClick={triggerExport} loading={exportLoading} />
+      </Stack>
     </Stack>
   )
 }

src/pages/sight/show.tsx

@@ -99,8 +99,8 @@ export const SightShow = () => {
   const fields = [
     // {label: 'ID', data: 'id'},
     {label: 'Название', data: 'name'},
-    // {label: 'Широта', data: 'latitude'}, #
+    // {label: 'Широта', data: 'latitude'}, #*
-    // {label: 'Долгота', data: 'longitude'}, #
+    // {label: 'Долгота', data: 'longitude'}, #*
     // {label: 'ID города', data: 'city_id'},
     {label: 'Город', data: 'city'},
   ]

src/pages/station/show.tsx

@@ -100,16 +100,16 @@ export const StationShow = () => {
   const fields = [
     // {label: 'ID', data: 'id'},
     {label: 'Название', data: 'name'},
-    // {label: 'Широта', data: 'latitude'}, #
+    // {label: 'Широта', data: 'latitude'}, #*
-    // {label: 'Долгота', data: 'longitude'}, #
+    // {label: 'Долгота', data: 'longitude'}, #*
     {label: 'Описание', data: 'description'},
   ]
 
   const sightFields: Array<{label: string; data: keyof SightItem}> = [
     // {label: 'ID', data: 'id'},
     {label: 'Название', data: 'name'},
-    // {label: 'Широта', data: 'latitude'}, #
+    // {label: 'Широта', data: 'latitude'}, #*
-    // {label: 'Долгота', data: 'longitude'}, #
+    // {label: 'Долгота', data: 'longitude'}, #*
     // {label: 'ID города', data: 'city_id'},
     {label: 'Город', data: 'city'},
   ]