# react-css-grid-virtualized

> A simple library to display one-dimensional data in a two-dimensional layout.

Latest version **0.1.1** (published 2019-07-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-css-grid-virtualized
pnpm add react-css-grid-virtualized
yarn add react-css-grid-virtualized
bun add react-css-grid-virtualized
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2019-07-26 |
| First published | 2019-07-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 18.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | mgansler |
| Keywords | react, grid, virtualized |

## Links

- npm: https://www.npmjs.com/package/react-css-grid-virtualized
- Repository: https://github.com/mgansler/react-css-grid-virtualized
- npm.io page: https://npm.io/package/react-css-grid-virtualized

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.8.6
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2019-07-26
- 0.1.0 — 2019-07-26

## README

# React CSS Grid Virtualized

This library is for showing one-dimensional data in a two-dimensional way, at least for now.

## Quick Start

```bash
yarn add react-css-grid-virtualized
```

Plain JavaScript:

```javascript
import Grid from "react-css-grid-virtualized"

// `id` is a placeholder for your item props
function ItemComponent({ gridColumnStart, gridRowStart, id }) {
  return <div style={{ gridColumnStart, gridRowStart }}>{id}</div>
}

const data = [{ id: 1 }, { id: 2 }]

function YourComponent() {
  return (
    <Grid Item={ItemComponent} items={data} minItemWidth={300} minItemHeight={300}/>
  )
}
```

TypeScript:

```typescript jsx
import Grid, { GridPosition } from "react-css-grid-virtualized"

interface ItemProps {
  id: number
}

const ItemComponent: React.FC<ItemProps & GridPosition> = ({ gridColumnStart, gridRowStart, id }) => {
  return <div style={{ gridColumnStart, gridRowStart }}>{id}</div>
}

const data: ItemProps[] = [{ id: 1 }, { id: 2 }]

function YourComponent() {
  return (
    <Grid<ItemProps> Item={ItemComponent} items={data}/>
  )
}
```

## Props

name | type | required | default value | description
--- | --- | --- | --- | ---
`className` | string | no | "" | CSS class(es) to be attached to the grid
`Item` | React.FC<T & GridPosition> | yes | - | The component used to render the items
`items` | T[] | yes | - | The data to be rendered
`minItemHeight` | number | no | 0 | The items won't be smaller than this
`minItemWidth` | number | no | 0 | The items won't be narrower than this
`gridGap` | number | no | 0 | The space between rows and columns
`padding` | number | no | 0 | The space around the outmost items
`preload` | number | no | 0 | The number of rows rendered before/after the visible area

## Examples

See [EXAMPLES.md](examples/EXAMPLES.md)

---
_Source: https://npm.io/package/react-css-grid-virtualized · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._