# react-virtualized-infinite-table

> A virtualized infinite scrolling table for react.

Latest version **1.0.1** (published 2020-11-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-virtualized-infinite-table
pnpm add react-virtualized-infinite-table
yarn add react-virtualized-infinite-table
bun add react-virtualized-infinite-table
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-11-05 |
| First published | 2020-11-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 36 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | ZeroCool-85 |
| Maintainers | zerocool-85 |
| Keywords | react, table, infinite, scrolling, virtualized |

## Links

- npm: https://www.npmjs.com/package/react-virtualized-infinite-table
- Repository: https://github.com/ZeroCool-85/react-virtualized-infinite-table
- Homepage: https://github.com/ZeroCool-85/react-virtualized-infinite-table#readme
- Issues: https://github.com/ZeroCool-85/react-virtualized-infinite-table/issues
- npm.io page: https://npm.io/package/react-virtualized-infinite-table

## 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

- 1.0.1 (latest) — 2020-11-05
- 1.0.0 — 2020-11-05

## README

# react-virtualized-infinite-table

> A virtualized infinite scrolling table for react.

[![NPM](https://img.shields.io/npm/v/react-virtualized-infinite-table.svg)](https://www.npmjs.com/package/react-virtualized-infinite-table) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-virtualized-infinite-table
yarn add react-virtualized-infinite-table --save
```

## Example

[example table](https://zerocool-85.github.io/react-virtualized-infinite-table/)

## Props

Prop | type | default | required | description
--- | --- | --- | --- | ---
tableContainerClassName | string | undefined | | Add a class to the table wrapper div
tableClassName | string | undefined | | Add a class to the table
headerRowRenderer | func | undefined | ☑ | Rendering the header
bodyRowRenderer | func | undefined | ☑ | Rendering the bodyRow (item: any, index: number) => any
height | number | 500 | | height of the table
stickyHeader | bool | false | | Made the header sticky
items | array<any> | undefined | &#9745; | An array of items for the body rows
itemHeight | number | 75 | | height of the body rows
isLoading | bool | false | &#9745; | loading flag for fetching more
fetchMore | func | undefined | &#9745; | () => any
itemsTotalLength | number | undefined | &#9745; | total amount of items for the table
loadingComponent | React.FC | LoadingAnimation | | A component to indicate if loading is active
nodePadding | number | 6 | | amount of items before and after the visible window


## Usage

```tsx
import React, { Component } from 'react'

import { InfiniteTable } from 'react-virtualized-infinite-table'
import 'react-virtualized-infinite-table/dist/index.css'

class Example extends Component {
  render() {
    return (
      <InfiniteTable
         tableClassName={"table"}
         height={800}
         bodyRowRenderer={bodyRowRenderer}
         headerRowRenderer={headerRowRenderer}
         fetchMore={fetchMore}
         isLoading={isLoading}
         itemHeight={75}
         items={items}
         itemsTotalLength={itemsTotalLength}
         stickyHeader
      />
    )
  }
}
```

## License

MIT © [ZeroCool-85](https://github.com/ZeroCool-85)

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