@lsky/v-table v0.0.4

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

Adaptive

WindowScroller