diff --git a/src/components/Apprenant.js b/src/components/Apprenant.js index 99a7884..91fc2be 100644 --- a/src/components/Apprenant.js +++ b/src/components/Apprenant.js @@ -53,6 +53,13 @@ import { IoAddCircleOutline, IoCloseCircleOutline } from "react-icons/io5"; import { gridClasses } from '@mui/x-data-grid'; import Link from '@mui/material/Link'; import { PiDotsThree } from "react-icons/pi"; +import { + GridToolbarContainer, GridToolbarExport, GridToolbarColumnsButton, + GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext, + gridFilteredSortedRowIdsSelector, + gridVisibleColumnFieldsSelector, + } from '@mui/x-data-grid'; + import * as XLSX from 'xlsx'; const Apprenant = (props) => { @@ -116,8 +123,8 @@ const Apprenant = (props) => { const columns = [ - { field: 'id', headerName: 'id', hide: true }, - { field: '_id', headerName: '_id', hide: true }, + { field: 'id', headerName: 'id', hide: true , disableExport: true,}, + { field: '_id', headerName: '_id', hide: true , disableExport: true,}, { field: 'civilite', headerName: 'Civ.', minWidth: 100, flex: 1, maxWidth: 100, hide: false, editable: false, editable: false, @@ -156,7 +163,7 @@ const Apprenant = (props) => { { - field: "Detail", headerName: 'Voir détail', + field: "Detail", headerName: 'Voir détail', disableExport: true, renderCell: (cellValues) => { return ( @@ -176,7 +183,7 @@ const Apprenant = (props) => { }, { - field: "delete", headerName: 'Supprimer', + field: "delete", headerName: 'Supprimer', disableExport: true, renderCell: (cellValues) => { return ( @@ -4822,6 +4829,115 @@ const Apprenant = (props) => { } + +// DEBUT EXPORT EXCEL DATAGRID + +function CustomToolbar(props) { + + console.log(" my props = ", props); + + return ( + + + + + + + + + + + ); +} + +function getExcelData(apiRef) { + // Select rows and columns + const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef); + const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef); + + // Format the data. Here we only keep the value + const data = filteredSortedRowIds.map((id) => { + const row = {}; + visibleColumnsField.forEach((field) => { + row[field] = apiRef.current.getCellParams(id, field).value; + }); + return row; + }); + + return data; +} + + +function ExportButton(props) { + return ( + + + + ); +} + +function handleExport(apiRef, data_colums) { + const data = getExcelData(apiRef); + + const local_config = { + keys: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { + if (mydata.field) + return mydata.field; + else + return ""; + }), + + + columnNames: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { + if (mydata.headerName) + return mydata.headerName; + else + return ""; + }), + + fileName: 'data_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_") + '.xlsx', + sheetName: 'Export_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_"), + }; + + const rows = data.map((row) => { + const mRow = {}; + for (const key of local_config.keys) { + mRow[key] = row[key]; + } + return mRow; + }); + + const worksheet = XLSX.utils.json_to_sheet(rows); + XLSX.utils.sheet_add_aoa(worksheet, [[...local_config.columnNames]], { + origin: 'A1', + }); + + const workbook = XLSX.utils.book_new(); + XLSX.utils.book_append_sheet(workbook, worksheet, local_config.sheetName); + XLSX.writeFile(workbook, local_config.fileName, { compression: true }); +} + +function ExportMenuItem(props) { + const apiRef = useGridApiContext(); + const { hideMenu } = props; + + return ( + { + handleExport(apiRef, props.data_colums); + // Hide the export menu after the export + hideMenu?.(); + }} + > + Export Excel + + ); +} + +// FIN EXPORT EXCEL DATAGRID + return (