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

Example

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