Skip to main content

Grid

Grid quickstart

0,0
0,1
0,2
0,3
0,4
0,5
0,6
0,7
0,8
0,9
0,10
0,11
0,12
0,13
0,14
1,0
1,1
1,2
1,3
1,4
1,5
1,6
1,7
1,8
1,9
1,10
1,11
1,12
1,13
1,14
2,0
2,1
2,2
2,3
2,4
2,5
2,6
2,7
2,8
2,9
2,10
2,11
2,12
2,13
2,14
3,0
3,1
3,2
3,3
3,4
3,5
3,6
3,7
3,8
3,9
3,10
3,11
3,12
3,13
3,14
4,0
4,1
4,2
4,3
4,4
4,5
4,6
4,7
4,8
4,9
4,10
4,11
4,12
4,13
4,14
5,0
5,1
5,2
5,3
5,4
5,5
5,6
5,7
5,8
5,9
5,10
5,11
5,12
5,13
5,14
6,0
6,1
6,2
6,3
6,4
6,5
6,6
6,7
6,8
6,9
6,10
6,11
6,12
6,13
6,14
7,0
7,1
7,2
7,3
7,4
7,5
7,6
7,7
7,8
7,9
7,10
7,11
7,12
7,13
7,14
8,0
8,1
8,2
8,3
8,4
8,5
8,6
8,7
8,8
8,9
8,10
8,11
8,12
8,13
8,14
9,0
9,1
9,2
9,3
9,4
9,5
9,6
9,7
9,8
9,9
9,10
9,11
9,12
9,13
9,14
10,0
10,1
10,2
10,3
10,4
10,5
10,6
10,7
10,8
10,9
10,10
10,11
10,12
10,13
10,14
11,0
11,1
11,2
11,3
11,4
11,5
11,6
11,7
11,8
11,9
11,10
11,11
11,12
11,13
11,14
12,0
12,1
12,2
12,3
12,4
12,5
12,6
12,7
12,8
12,9
12,10
12,11
12,12
12,13
12,14
13,0
13,1
13,2
13,3
13,4
13,5
13,6
13,7
13,8
13,9
13,10
13,11
13,12
13,13
13,14
14,0
14,1
14,2
14,3
14,4
14,5
14,6
14,7
14,8
14,9
14,10
14,11
14,12
14,13
14,14
import { Grid } from "@resembli/react-virtualized-window"

const data = Array(2000)
.fill(0)
.map((_, i) => {
return Array(200)
.fill(0)
.map((_, j) => [i, j])
})

const CellItem = ({ style, data: [row, column] }) => {
return (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
background: (row + column) % 2 === 1 ? "black" : "white",
color: (row + column) % 2 === 1 ? "white" : "black",
...style,
}}
>
{row},{column}
</div>
)
}

export function BasicGridExample() {
return (
<div style={{ width: "100%", height: 500 }}>
<Grid data={data} defaultColumnWidth={100} defaultRowHeight={100}>
{CellItem}
</Grid>
</div>
)
}

Props

Required

Property NameTypeDescription
dataT[]An array of data items. Individual items can be any type.
defaultRowHeightNumberOrPercentThe px height per row item, or the percent height per row item. Percent height is based on window height less any gap height applied.
defaultColumnWidthNumberOrPercentThe px width per column item, or the percent width per row item. Percent width is based on window width less any gap width applied.
childrenRenderItemThe component for rendering each item. Should accept a property called style of type CSSProperties.

Optional

Property NameTypeDescription
columnWidthsNumberOrPercent[]An array of widths to use for individual items. Used to support variable width items.
rowHeightsNumberOrPercent[]An array of heights to use for individual items. Used to support variable height items.
getKey(data: T) => stringA function that is provided with a data item, and should return a string to use as a key for an render item.
tabIndexnumberTab index for the containing window div.
overscannumberHow many items out of view to overscan, useful when sticky position is disabled, or tab index is enabled.
apiRefMutableRefObjectA ref object to capture the window api for imperative actions.
classNamestringClassName to apply to containing window div.
styleCSSPropertiesCSSProperties style object.
disableStickybooleanDisables the sticky div handling, which means content may flash in when the user scrolls quickly.
onScrollUIEventHandlerUser provided onScroll callback.
widthCSSProperties['Width']Width value to use for sizing the component.
heightCSSProperties['Height']Height value to use for sizing the component.
data-testidstringA string for finding the window when testing.

Row and Column Pinning Props

You can specify any of the following props:

  • pinnedTopCount: the number of rows to pin at the top of the grid
  • pinnedBottomCount: the number of rows to pin at the bottom of the grid
  • pinnedLeftCount: the number of columns to pin left of the grid
  • pinnedRightCount: the number of columns to pint right of the grid

Pinned rows will use the the items from the beginning of the data array provided, starting with pinnedTopCount, then pinnedBottomCount. Pinned columns will use the items from the beginning of the individual data items from the data array provided, starting with pinnedLeftCount, then pinnedRightCount