버글버글
[React] Mui-DataGrid의 NoRow Overlay 모듈화하기 본문
반응형
1. mui datagrid의 no-row-overlay를 모듈화하기
https://mui.com/x/react-data-grid/components/#no-rows-overlay
Data Grid - Components - MUI X
The grid is highly customizable. Override components using the <code>slots</code> prop.
mui.com
2. NoRows.js라는 이름으로 component 생성
import * as React from 'react';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
const StyledGridOverlay = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
'& .ant-empty-img-1': {
fill: theme.palette.mode === 'light' ? '#aeb8c2' : '#262626',
},
'& .ant-empty-img-2': {
fill: theme.palette.mode === 'light' ? '#f5f5f7' : '#595959',
},
'& .ant-empty-img-3': {
fill: theme.palette.mode === 'light' ? '#dce0e6' : '#434343',
},
'& .ant-empty-img-4': {
fill: theme.palette.mode === 'light' ? '#fff' : '#1c1c1c',
},
'& .ant-empty-img-5': {
fillOpacity: theme.palette.mode === 'light' ? '0.8' : '0.08',
fill: theme.palette.mode === 'light' ? '#f5f5f5' : '#fff',
},
}));
function NoRows() {
return (
<StyledGridOverlay>
<svg
width="120"
height="100"
viewBox="0 0 184 152"
aria-hidden
focusable="false"
>
<g fill="none" fillRule="evenodd">
<g transform="translate(24 31.67)">
<ellipse
className="ant-empty-img-5"
cx="67.797"
cy="106.89"
rx="67.797"
ry="12.668"
/>
<path
className="ant-empty-img-1"
d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
/>
<path
className="ant-empty-img-2"
d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
/>
<path
className="ant-empty-img-3"
d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
/>
</g>
<path
className="ant-empty-img-3"
d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
/>
<g className="ant-empty-img-4" transform="translate(149.65 15.383)">
<ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815" />
<path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" />
</g>
</g>
</svg>
<Box sx={{ mt: 1 }}>데이터가 없습니다.</Box>
</StyledGridOverlay>
);
}
export default NoRows;
3. 적용할 js에 import
import NoRows from '../modules/NoRows';
4. DataGrid에 입력해주기
<DataGrid
rows={rows}
columns={columns}
slots={{
noRowsOverlay: NoRows,
}}
/>
최종코드
더보기
1. Norows.js
import * as React from 'react';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
const StyledGridOverlay = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
'& .ant-empty-img-1': {
fill: theme.palette.mode === 'light' ? '#aeb8c2' : '#262626',
},
'& .ant-empty-img-2': {
fill: theme.palette.mode === 'light' ? '#f5f5f7' : '#595959',
},
'& .ant-empty-img-3': {
fill: theme.palette.mode === 'light' ? '#dce0e6' : '#434343',
},
'& .ant-empty-img-4': {
fill: theme.palette.mode === 'light' ? '#fff' : '#1c1c1c',
},
'& .ant-empty-img-5': {
fillOpacity: theme.palette.mode === 'light' ? '0.8' : '0.08',
fill: theme.palette.mode === 'light' ? '#f5f5f5' : '#fff',
},
}));
function NoRows() {
return (
<StyledGridOverlay>
<svg
width="120"
height="100"
viewBox="0 0 184 152"
aria-hidden
focusable="false"
>
<g fill="none" fillRule="evenodd">
<g transform="translate(24 31.67)">
<ellipse
className="ant-empty-img-5"
cx="67.797"
cy="106.89"
rx="67.797"
ry="12.668"
/>
<path
className="ant-empty-img-1"
d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
/>
<path
className="ant-empty-img-2"
d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
/>
<path
className="ant-empty-img-3"
d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
/>
</g>
<path
className="ant-empty-img-3"
d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
/>
<g className="ant-empty-img-4" transform="translate(149.65 15.383)">
<ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815" />
<path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" />
</g>
</g>
</svg>
<Box sx={{ mt: 1 }}>데이터가 없습니다.</Box>
</StyledGridOverlay>
);
}
export default NoRows;
2. List.js
import React from 'react';
import { DataGrid, gridPageCountSelector, gridPageSelector, useGridApiContext, useGridSelector } from '@mui/x-data-grid';
import Pagination from '@mui/material/Pagination';
import PaginationItem from '@mui/material/PaginationItem';
import NoRows from '../modules/NoRows';
// 1. datagrid 페이징 처리
function CustomPagination() {
const apiRef = useGridApiContext();
const page = useGridSelector(apiRef, gridPageSelector);
const pageCount = useGridSelector(apiRef, gridPageCountSelector);
return (
<Pagination
color="primary"
variant="outlined"
shape="rounded"
page={page + 1}
count={pageCount}
renderItem={(props2) => <PaginationItem {...props2} disableRipple />}
onChange={(event, value) => apiRef.current.setPage(value - 1)}
/>
);
}
const PAGE_SIZE = 10;
function List() {
// 1. columns
const columns = [
{ field: 'id', headerName: '순번', width: 100, align: 'center', headerAlign: 'center' },
{ field: 'title', headerName: '제목', width: 650, headerAlign: 'center' },
];
// 2. rows
const rows = [];
// 3. page size
const [paginationModel, setPaginationModel] = React.useState({
pageSize: PAGE_SIZE,
page: 0,
});
return (
<div className="dataGrid_style">
<DataGrid
style={{ height: 600 }}
rows={rows}
columns={columns}
disableColumnMenu
paginationModel={paginationModel}
onPaginationModelChange={setPaginationModel}
pageSizeOptions={[PAGE_SIZE]}
slots={{
pagination: CustomPagination,
noRowsOverlay: NoRows,
}}
{...rows}
/>
</div>
);
}
export default List;
반응형
'React > react 공부기록' 카테고리의 다른 글
| [React] 다른페이지로 파라미터 전달하기 (0) | 2023.06.07 |
|---|---|
| [React] windows 환경에서 react버전 다운그레이드하기 (0) | 2023.05.26 |
| [React] axios로 pdf 다운로드 받기 (0) | 2023.05.23 |
| [React] React에서 Font Awesome 사용하기 (0) | 2023.05.22 |
| [React] code-server에서 build한 프로젝트 nginx로 열기 (1) | 2023.05.12 |
'React/react 공부기록' Related Articles
more
