React components for render table with virtual
$ npm i @lsky/v-table
$ yarn add @lsky/v-table
$ npm i react react-dom
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}
/>
)
}
}
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>
)
}
}
*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>
)
}
}
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 |
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 |
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 |