Table of Contents

• Features
  • Props
  • Virtualized Grid Example
  • Virtualized List Example

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>