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>