@lsky/v-table

Virtual Table

React components for render table with virtual

Installing

npm

$ npm i @lsky/v-table

yarn

$ yarn add @lsky/v-table

And you need to React and ReactDom

$ npm i react react-dom

Example

Basic usage

import React from 'react'
import VTable from '@lsky/v-table'

class Index extends React.PureComponent {
  tableRender({
    rowIndex, columnIndex, key, style,
  }) {
    return (
      <div key={key} style={style}>{`row-${rowIndex}-col-${columnIndex}`}</div>
    )
  }

  render() {
    return (
      <VTable
        width={860}
        height={600}
        rowHeight={40}
        columnWidth={100}
        columnCount={100}
        rowCount={1000}
        render={this.tableRender}
      />
    )
  }
}

Wrap Adaptive

Adaptive component will adapt the container width and height, and return the width and height value.

Warning: The parent element must have relative attr.

import React from 'react'
import VTable, { Adaptive } from '@lsky/v-table'

class Index extends React.PureComponent {
  tableRender({
    rowIndex, columnIndex, key, style,
  }) {
    return (
      <div key={key} style={style}>{`row-${rowIndex}-col-${columnIndex}`}</div>
    )
  }

  render() {
    return (
      <Adaptive>
        {({ width, height }) => (
          <VTable
            width={width}
            height={height}
            rowHeight={40}
            columnWidth={100}
            columnCount={100}
            rowCount={1000}
            render={this.tableRender}
          />
        )}
      </Adaptive>
    )
  }
}

Wrap WindowScroller

*Warning: * WindowScroller cannot be mixed with Adaptive.

import React from 'react'
import VTable, { WindowScroller } from '@lsky/v-table'

class Index extends React.PureComponent {
  tableRender({
    rowIndex, columnIndex, key, style,
  }) {
    return (
      <div key={key} style={style}>{`row-${rowIndex}-col-${columnIndex}`}</div>
    )
  }

  render() {
    return (
      <WindowScroller>
        {({ scrollTop, scrollLeft }) => (
          <VTable
            width={860}
            height={600}
            scrollTop={scrollTop}
            scrollLeft={scrollLeft}
            rowHeight={40}
            columnWidth={100}
            columnCount={100}
            rowCount={1000}
            render={this.tableRender}
          />
        )}
      </WindowScroller>
    )
  }
}

Component Props

VTable

attr	type	default value	required	desc
columnWidth	number | ((columnIndex) => number)	null	true	column width
columnCount	number	null	true	column count
rowHeight	number | ((rowIndex) => number)	null	true	row height
rowCount	number	null	true	row count
width	number	null	true	container width
height	number	null	true	container height
scrollTop	number	null	false	scrollTop. if passed in, change to controlled component
scrollLeft	number	null	false	scrollLeft. if passed in, change to controlled component
render	(({rowIndex, columnIndex, key, style}) => React.node)	null	true	render cell
onScroll	(({scrollTop, scrollLeft}) => void)	null	false	onScroll
isWindowScroller	boolean	null	false	is use WindowScroller component wrap

Adaptive

attr	type	default value	required	desc
defaultWidth	number	null	false	default width
defaultHeight	number	null	false	default height
children	(({width, height}) => React.node)	null	true	children

WindowScroller

attr	type	default value	required	desc
scrollLeft	number	null	false	scroll left
scrollTop	number	null	false	scroll top
children	(({scrollLeft, scrollTop}) => React.node)	null	true	children