1.0.1 • Published 5 years ago
react-virtualized-infinite-table v1.0.1
react-virtualized-infinite-table
A virtualized infinite scrolling table for react.
Install
npm install --save react-virtualized-infinite-table
yarn add react-virtualized-infinite-table --saveExample
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 | undefined | ☑ | An array of items for the body rows |
| itemHeight | number | 75 | height of the body rows | |
| isLoading | bool | false | ☑ | loading flag for fetching more |
| fetchMore | func | undefined | ☑ | () => any |
| itemsTotalLength | number | undefined | ☑ | 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
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