[React] MUI DataGrid를 사용하여 Excel로 내보내기

이번에 Export data to Excel 기능을 처음 사용해보았는데 정리해두면 좋을 것 같아 포스팅을 남기기로 했다.

나는 피그마 디자인에 맞춰서 따로 테이블의 Footer 부분을 만들고 거기에 export 버튼을 추가했는데, 이 방법은 테이블의 상단 Toolbar 부분에 export 버튼을 추가해서 그 버튼에 기능을 구현하는 방법이다.

DataGrid의 기본 도구 모음을 사용자 정의 구현으로 교체

export default function App() {
  return (
  	<div style={{ height: '100vh', width: '100%' }}>
    	<DataGrid
			columns={data.columns}
			rows={data.rows}
			components={{
            	Toolbar: CustomToolbar,
        	}}
        />
	</div>
  );
}

• 여기서는 기본 도구 모음에서 모든 항목을 제거하고 Excel로 내보내는 사용자 정의 버튼만 포함한다.

function CustomToolbar(props) {
	return (
    	<GridToolbarContainer {...props}>
      		<ExportButton />
      	</GridToolbarContainer>
    );
}

• ExportButton MenuItem을 단순히 컨테이너에 포장한다.

export function ExportButton(props) {
	return (
    	<GridToolbarExportContainer {...props}>
      		<ExportMenuItem />
     	</GridToolbarExportContainer>
    );
}

• ExportMenuItem을 클릭하면 DataGrid에 있는 데이터가 다운로드된다. 이를 통해 useGridApiContext() 데이터에 액세스한다.

export function ExportMenuItem(props) {
	const apiRef = useGridApiContext();
  	const { hideMenu } = props;
  
  	return (
    	<MenuItem
      		onClick={() => {
    			handleExport(apiRef);
      			// Hide the export menu after the export
      			hideMenu?.();
    		}}
      	>
          	Download Excel
        </MenuItem>
    );
}

• handleExport : 몇 가지 기본 데이터 매핑을 수행하고, 워크시트 만들기 및 통합 문서에 워크시트 추가, 열 이름 추가 등 기본적인 기능을 추가하여 파일을 다운로드할 수 있도록 만든다.

function handleExport(apiRef) {
	const data = getExcelData(apiRef);
  
  	const rows = data.map((row) => {
    	const mRow = {};
      	for (const key of config.keys) {
        	mRow[key] = row[key];	
        }
      	return mRow;
    });
  
  	const worksheet = XLSX.utils.json-to_sheet(rows);
  	XLSX.utils.sheet_add_aoa(worksheet, [[...config.columnNames]], {
      origin: 'A1',
	});
  
  	const workbook = XLSX.utils.book_new();
  	XLSX.utils.book_append(sheet(workbook, worksheet, config.sheetName);
    XLSX.writeFile(workbook, config.fileName, { compression: true });

• getExcelData : DataGrid에 대한 참조를 사용하고 행과 열을 결합하여 DataGrid에서 데이터를 가져온다.

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;
}

• 참고로 config 부분도 따로 만들어주었다.

const config = {
	keys: [
    	"mailId",
      	"mailType",
      	"mailTitle",
      	"ismailUse",
      	"modificationDate",
    ],
  	columnNames: [
    	"NO",
      	"메일 유형",
      	"메일 제목",
      	"메일 사용여부",
      	"수정일",
    ],
  	sheetName: "Sheet 1",
  	fileName: "exported_data.xlsx",
};