diff --git a/components/DataGrid/excelUtils.tsx b/components/DataGrid/excelUtils.tsx new file mode 100644 index 00000000..f30786ae --- /dev/null +++ b/components/DataGrid/excelUtils.tsx @@ -0,0 +1,37 @@ +import ExcelJS from "exceljs"; +import { saveAs } from "file-saver"; + +function downloadExcel( + rows: any[], + columns: any[], + name: string, + user_id: string, + page_name: string +) { + const wb = new ExcelJS.Workbook(); + wb.creator = `${name} | ${user_id}`; + wb.lastModifiedBy = name; + wb.created = new Date(); + wb.lastPrinted = new Date(); + wb.modified = new Date(); + const ws = wb.addWorksheet("Sheet 1"); + + const headers = columns.map( + (column: { headerName: any }) => column.headerName + ); + ws.addRow(headers); + + rows.forEach((row: { [x: string]: any }) => { + const rowData = columns.map((column: { field: any }) => { + const { field } = column; + return row[field] || ""; + }); + ws.addRow(rowData); + }); + + wb.xlsx.writeBuffer().then((excelBuffer) => { + saveAs(new Blob([excelBuffer]), `${page_name}.xlsx`); + }); +} + +export default downloadExcel; diff --git a/components/DataGrid/index.tsx b/components/DataGrid/index.tsx index 5722794c..0ee9c51c 100644 --- a/components/DataGrid/index.tsx +++ b/components/DataGrid/index.tsx @@ -6,12 +6,24 @@ import { GridCellParams, GridColDef, // GridRowHeightParams, - GridToolbar, + GridToolbarColumnsButton, + GridToolbarContainer, + GridToolbarFilterButton, MuiEvent, } from "@mui/x-data-grid"; +import Button from "@mui/material/Button"; import Image from "next/image"; +import { useRouter } from "next/router"; import * as React from "react"; -import { useState } from "react"; +import { useEffect, useState } from "react"; +import DownloadIcon from "@mui/icons-material/Download"; + +import companyRequest from "@callbacks/company/company"; +import studentRequest from "@callbacks/student/student"; +import whoami from "@callbacks/auth/whoami"; +import useStore from "@store/store"; + +import downloadExcel from "./excelUtils"; const StyledGridOverlay = styled("div")(({ theme }) => ({ display: "flex", @@ -45,6 +57,16 @@ function CustomNoRowsOverlay() { ); } + +function CustomToolbar({ handleDownload }: { handleDownload: () => void }) { + return ( + + + +