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

JavaScript

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>
  )
}

TypeScript

import type { RenderItem } from "@resembli/react-virtualized-window"
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: RenderItem<number[]> = ({ 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 Name	Type	Description
data	T[]	An array of data items. Individual items can be any type.
defaultRowHeight	NumberOrPercent	The px height per row item, or the percent height per row item. Percent height is based on window height less any gap height applied.
defaultColumnWidth	NumberOrPercent	The px width per column item, or the percent width per row item. Percent width is based on window width less any gap width applied.
children	RenderItem	The component for rendering each item. Should accept a property called style of type CSSProperties.

Optional

Property Name	Type	Description
columnWidths	NumberOrPercent[]	An array of widths to use for individual items. Used to support variable width items.
rowHeights	NumberOrPercent[]	An array of heights to use for individual items. Used to support variable height items.
getKey	(data: T) => string	A function that is provided with a data item, and should return a string to use as a key for an render item.
tabIndex	number	Tab index for the containing window div.
overscan	number	How many items out of view to overscan, useful when sticky position is disabled, or tab index is enabled.
apiRef	MutableRefObject	A ref object to capture the window api for imperative actions.
className	string	ClassName to apply to containing window div.
style	CSSProperties	CSSProperties style object.
disableSticky	boolean	Disables the sticky div handling, which means content may flash in when the user scrolls quickly.
onScroll	UIEventHandler	User provided onScroll callback.
width	CSSProperties['Width']	Width value to use for sizing the component.
height	CSSProperties['Height']	Height value to use for sizing the component.
data-testid	string	A 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