1.0.2 • Published 3 years ago
mui-virtualized-grid v1.0.2
Table of Contents
Overview
Mui-Virtualized-Grid is a vertical scrolling virtualized grid/list component designed using material-ui. It's intention is to be used within pages that need to load large amounts of data in a grid or list format and remain performant. It does not have its own breakpoints for mobile-desktop but expect to be told when to change the number of columns.
import { useMediaQuery, useTheme } from '@material-ui/core';
const { breakpoints } = useTheme();
const mobile = useMediaQuery(breakpoints.down('sm'));
<VirtualizedMUIGrid
columns={mobile ? 2 : 4}
containerHeight="55vh"
data={lotsofdata}
preRenderRowCount={5}
renderItem={() => component}
rowHeight={75}
spacing={2}
/>Props
| Property | required/optional | type | default | Description |
|---|---|---|---|---|
| data | required | any[] | -- | An array of data to be appear in the grid/list |
| renderItem | required | (rowData: any, rowIndex: number) => ReactElement | -- | Function that takes the current row and row index and returns the component it should display |
| rowHeight | required | number | -- | Defines the height of each row within the grid/list |
| columns | optional | 1, 2, 3, 4, 6, 12 | 1 | Defines the total number of columns. Passing anything greater than 1 will assume Grid and not ListItem |
| containerHeight | optional | number / string | 300 | Defines the height of the wrapping Grid container |
| listItemProps | optional | ListItemTypeMap<{button?: false undefined;}, 'li'> | {} | Props to pass to the list item component if variant is List |
| localizationMessages | optional | { nothingToDisplay: string; } | { nothingToDisplay: "Nothiing to Display" } | Defined translations for builtin messaging |
| preRenderRowCount | optional | number | 3 | Defines the number of rows not in view to render |
| spacing | optional | GridSpacing | 0 | When variant is set to grid, this defines the spacing around the containers items |
| variant | optional | 'Grid' or 'List' | 'Grid' | Defines which component will be used for the grid. |
Virtualized Grid with 4 columns
import { Grid, Paper, Typography, useTheme } from '@material-ui/core';
const valueList = new Array(1000)
.fill(true)
.map(() => 25 + Math.round(Math.random() * 50));
const { spacing } = useTheme();
const Cell = (rowData, i) => (
<Paper key={`${i}_Grid`}>
<Typography variant="button">item cell {i}</Typography>
</Paper>
);
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="h4">Displaying 1000 products divided into 4 columns</Typography>
</Grid>
<Grid item xs={12}>
<VirtualizedMUIGrid
columns={4}
containerHeight="55vh"
data={valueList}
preRenderRowCount={5}
renderItem={Cell}
rowHeight={75}
spacing={2}
/>
</Grid>
</Grid>Virtualized List using the List and ListItem Components
import { Grid, Paper, Typography, useTheme } from '@material-ui/core';
const valueList = new Array(1000)
.fill(true)
.map(() => 25 + Math.round(Math.random() * 50));
const { spacing } = useTheme();
const ListCell = (rowData, i) => (
<Paper key={`${i}_List`}>
<Typography variant="button">item cell {i}</Typography>
</Paper>
);
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="h4">Displaying a list of 1000 products. 1 per row.</Typography>
</Grid>
<Grid item xs={12}>
<VirtualizedMUIGrid
containerHeight="55vh"
data={valueList}
preRenderRowCount={5}
renderItem={ListCell}
rowHeight={75}
spacing={2}
variant="List"
/>
</Grid>
</Grid>