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