-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6f964f9
commit e4bc305
Showing
14 changed files
with
492 additions
and
128 deletions.
There are no files selected for viewing
17 changes: 17 additions & 0 deletions
17
docs/src/pages/components/data-grid/rendering/AntDesignGrid.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import * as React from 'react'; | ||
import { DataGrid } from '@material-ui/data-grid'; | ||
import { useDemoData } from '@material-ui/x-grid-data-generator'; | ||
|
||
export default function AntDesignGrid() { | ||
const { data } = useDemoData({ | ||
dataSet: 'Commodity', | ||
rowLength: 1000, | ||
maxColumns: 6, | ||
}); | ||
|
||
return ( | ||
<div style={{ height: 400, width: '100%' }}> | ||
<DataGrid {...data} /> | ||
</div> | ||
); | ||
} |
142 changes: 142 additions & 0 deletions
142
docs/src/pages/components/data-grid/rendering/AntDesignGrid.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,142 @@ | ||
import * as React from 'react'; | ||
import { DataGrid, ComponentProps } from '@material-ui/data-grid'; | ||
import { useDemoData } from '@material-ui/x-grid-data-generator'; | ||
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; | ||
import Pagination from '@material-ui/lab/Pagination'; | ||
import PaginationItem from '@material-ui/lab/PaginationItem'; | ||
|
||
function customCheckbox(theme) { | ||
return { | ||
'& .MuiCheckbox-root svg': { | ||
width: 16, | ||
height: 16, | ||
backgroundColor: 'transparent', | ||
border: `1px solid ${ | ||
theme.palette.type === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)' | ||
}`, | ||
borderRadius: 2, | ||
}, | ||
'& .MuiCheckbox-root svg path': { | ||
display: 'none', | ||
}, | ||
'& .MuiCheckbox-root.Mui-checked:not(.MuiCheckbox-indeterminate) svg': { | ||
backgroundColor: '#1890ff', | ||
borderColor: '#1890ff', | ||
}, | ||
'& .MuiCheckbox-root.Mui-checked .MuiIconButton-label:after': { | ||
position: 'absolute', | ||
display: 'table', | ||
border: '2px solid #fff', | ||
borderTop: 0, | ||
borderLeft: 0, | ||
transform: 'rotate(45deg) translate(-50%,-50%)', | ||
opacity: 1, | ||
transition: 'all .2s cubic-bezier(.12,.4,.29,1.46) .1s', | ||
content: '""', | ||
top: '50%', | ||
left: '39%', | ||
width: 5.71428571, | ||
height: 9.14285714, | ||
}, | ||
'& .MuiCheckbox-root.MuiCheckbox-indeterminate .MuiIconButton-label:after': { | ||
width: 8, | ||
height: 8, | ||
backgroundColor: '#1890ff', | ||
transform: 'none', | ||
top: '39%', | ||
border: 0, | ||
}, | ||
}; | ||
} | ||
|
||
const useStyles = makeStyles((theme: Theme) => | ||
createStyles({ | ||
root: { | ||
border: 0, | ||
color: | ||
theme.palette.type === 'light' | ||
? 'rgba(0,0,0,.85)' | ||
: 'rgba(255,255,255,0.85)', | ||
fontFamily: [ | ||
'-apple-system', | ||
'BlinkMacSystemFont', | ||
'"Segoe UI"', | ||
'Roboto', | ||
'"Helvetica Neue"', | ||
'Arial', | ||
'sans-serif', | ||
'"Apple Color Emoji"', | ||
'"Segoe UI Emoji"', | ||
'"Segoe UI Symbol"', | ||
].join(','), | ||
WebkitFontSmoothing: 'auto', | ||
letterSpacing: 'normal', | ||
'& .MuiDataGrid-columnsContainer': { | ||
backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', | ||
}, | ||
'& .MuiDataGrid-iconSeparator': { | ||
display: 'none', | ||
}, | ||
'& .MuiDataGrid-colCell, .MuiDataGrid-cell': { | ||
borderRight: `1px solid ${ | ||
theme.palette.type === 'light' ? '#f0f0f0' : '#303030' | ||
}`, | ||
}, | ||
'& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { | ||
borderBottom: `1px solid ${ | ||
theme.palette.type === 'light' ? '#f0f0f0' : '#303030' | ||
}`, | ||
}, | ||
'& .MuiDataGrid-cell': { | ||
color: | ||
theme.palette.type === 'light' | ||
? 'rgba(0,0,0,.85)' | ||
: 'rgba(255,255,255,0.65)', | ||
}, | ||
'& .MuiPaginationItem-root': { | ||
borderRadius: 0, | ||
}, | ||
...customCheckbox(theme), | ||
}, | ||
}), | ||
); | ||
|
||
function CustomPagination(props: ComponentProps) { | ||
const { paginationProps } = props; | ||
|
||
return ( | ||
<Pagination | ||
color="primary" | ||
variant="outlined" | ||
shape="rounded" | ||
page={paginationProps.page} | ||
count={paginationProps.pageCount} | ||
// @ts-expect-error | ||
renderItem={(props2) => <PaginationItem {...props2} disableRipple />} | ||
onChange={(event, value) => paginationProps.setPage(value)} | ||
/> | ||
); | ||
} | ||
|
||
export default function AntDesignGrid() { | ||
const { data } = useDemoData({ | ||
dataSet: 'Commodity', | ||
rowLength: 10, | ||
maxColumns: 10, | ||
}); | ||
const classes = useStyles(); | ||
|
||
return ( | ||
<div style={{ height: 400, width: '100%' }}> | ||
<DataGrid | ||
className={classes.root} | ||
checkboxSelection | ||
pageSize={5} | ||
components={{ | ||
pagination: CustomPagination, | ||
}} | ||
{...data} | ||
/> | ||
</div> | ||
); | ||
} |
101 changes: 101 additions & 0 deletions
101
docs/src/pages/components/data-grid/rendering/CustomEmptyOverlayGrid.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
import * as React from 'react'; | ||
import { GridOverlay, DataGrid } from '@material-ui/data-grid'; | ||
import { useDemoData } from '@material-ui/x-grid-data-generator'; | ||
import { createStyles, makeStyles } from '@material-ui//core/styles'; | ||
|
||
const useStyles = makeStyles((theme) => ({ | ||
root: { | ||
'& .MuiDataGrid-overlayContent': { | ||
flexDirection: 'column', | ||
alignItems: 'center', | ||
}, | ||
'& .ant-empty-img-1': { | ||
fill: theme.palette.type === 'light' ? '#aeb8c2' : '#262626', | ||
}, | ||
'& .ant-empty-img-2': { | ||
fill: theme.palette.type === 'light' ? '#f5f5f7' : '#595959', | ||
}, | ||
'& .ant-empty-img-3': { | ||
fill: theme.palette.type === 'light' ? '#dce0e6' : '#434343', | ||
}, | ||
'& .ant-empty-img-4': { | ||
fill: theme.palette.type === 'light' ? '#fff' : '#1c1c1c', | ||
}, | ||
'& .ant-empty-img-5': { | ||
fillOpacity: theme.palette.type === 'light' ? '0.8' : '0.08', | ||
fill: theme.palette.type === 'light' ? '#f5f5f5' : '#fff', | ||
}, | ||
}, | ||
label: { | ||
marginTop: theme.spacing(1), | ||
}, | ||
})); | ||
|
||
function CustomNoRowsOverlay() { | ||
const classes = useStyles(); | ||
|
||
return ( | ||
<GridOverlay className={classes.root}> | ||
<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> | ||
<div className={classes.label}>No Rows</div> | ||
</GridOverlay> | ||
); | ||
} | ||
|
||
export default function CustomEmptyOverlayGrid() { | ||
const { data } = useDemoData({ | ||
dataSet: 'Commodity', | ||
rowLength: 100, | ||
maxColumns: 6, | ||
}); | ||
|
||
return ( | ||
<div style={{ height: 400, width: '100%' }}> | ||
<DataGrid | ||
components={{ | ||
noRowsOverlay: CustomNoRowsOverlay, | ||
}} | ||
rows={[]} | ||
columns={data.columns} | ||
/> | ||
</div> | ||
); | ||
} |
103 changes: 103 additions & 0 deletions
103
docs/src/pages/components/data-grid/rendering/CustomEmptyOverlayGrid.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,103 @@ | ||
import * as React from 'react'; | ||
import { GridOverlay, DataGrid } from '@material-ui/data-grid'; | ||
import { useDemoData } from '@material-ui/x-grid-data-generator'; | ||
import { createStyles, Theme, makeStyles } from '@material-ui//core/styles'; | ||
|
||
const useStyles = makeStyles((theme: Theme) => | ||
createStyles({ | ||
root: { | ||
'& .MuiDataGrid-overlayContent': { | ||
flexDirection: 'column', | ||
alignItems: 'center', | ||
}, | ||
'& .ant-empty-img-1': { | ||
fill: theme.palette.type === 'light' ? '#aeb8c2' : '#262626', | ||
}, | ||
'& .ant-empty-img-2': { | ||
fill: theme.palette.type === 'light' ? '#f5f5f7' : '#595959', | ||
}, | ||
'& .ant-empty-img-3': { | ||
fill: theme.palette.type === 'light' ? '#dce0e6' : '#434343', | ||
}, | ||
'& .ant-empty-img-4': { | ||
fill: theme.palette.type === 'light' ? '#fff' : '#1c1c1c', | ||
}, | ||
'& .ant-empty-img-5': { | ||
fillOpacity: theme.palette.type === 'light' ? '0.8' : '0.08', | ||
fill: theme.palette.type === 'light' ? '#f5f5f5' : '#fff', | ||
}, | ||
}, | ||
label: { | ||
marginTop: theme.spacing(1), | ||
}, | ||
}), | ||
); | ||
|
||
function CustomNoRowsOverlay() { | ||
const classes = useStyles(); | ||
|
||
return ( | ||
<GridOverlay className={classes.root}> | ||
<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> | ||
<div className={classes.label}>No Rows</div> | ||
</GridOverlay> | ||
); | ||
} | ||
|
||
export default function CustomEmptyOverlayGrid() { | ||
const { data } = useDemoData({ | ||
dataSet: 'Commodity', | ||
rowLength: 100, | ||
maxColumns: 6, | ||
}); | ||
|
||
return ( | ||
<div style={{ height: 400, width: '100%' }}> | ||
<DataGrid | ||
components={{ | ||
noRowsOverlay: CustomNoRowsOverlay, | ||
}} | ||
rows={[]} | ||
columns={data.columns} | ||
/> | ||
</div> | ||
); | ||
} |
Oops, something went wrong.