A react component to virtualize very long lists

- Getting Started
- Import
- Use Example Code
- Properties
- Initial setup
- Suggestion

Getting Started

Install wvl-virtualized-list using npm.

``bash
npm i wvl-virtualized-list

or

yarn add wvl-virtualized-list
`

Import component

`javascript
import { VirtualizedList } from 'wvl-virtualized-list'
`

Use Example Code

`javascript
const [columns, setColumns] = useState([])

// Initial state columns
useEffect(() => {
setColumns([
{ name: '#', fixed: true, orderable: false, getValue: (row, index) => index+1, width: 50 },
{ name: 'AGE', accessor: 'age', width: 30, styles: { textAlign: 'right' } },
{ name: 'LENGTH', width: 40, getValue: row => Length is: ${ row.length } },
{ name: 'IDENTITY', width: 30, accessor: 'example.identity', styles: { textAlign: 'right' } },
])
}, [data])
`
`javascript
//Use Component

data={data}
columns={columns}
serverSide
loading={loadPromissory}
requestAmount={40}
missingToMakeRequest={1}
onFetch={handleFetch}
orderable
noDuplicateKeys
identifierId='id-row'
onContextMenu={handleContextMenu}
// pagination
onKeyDown={(e, _row, i) => {
e.preventDefault()
handleKeyDown(e, i)
}}
onClick={handleClick}
/>
`
---

Properties

| Name | Type | Default |
|------------------------|:--------------:|---------:|
| columns | array | [] |
| data | array | [] |
| header | boolean | false |
| identifierId | string | '' |
| loading | boolean | false |
| missingToMakeRequest | number | 4 |
| noDuplicateKeys | boolean | false |
| onClick | func | void |
| onContextMenu | func | void |
| onFetch | func | void |
| onKeyDown | func | void |
| onOrder | func | void |
| onRowEntered | func | void |
| orderable | boolean | false |
| pagination | boolean | false |
| requestAmount | number | 40 |
| serverSide | boolean | false |
| widthColMode | rest / no-rest | no-rest |

Initial setup

Change the initial configuration of the table.
You can do it in the app.js or index.js to globally change all the tables, Or you can configure independently for each component.

`javascript
InitConfigTable.configStyles({
body: {
fontSize: 13,
fontFamily: 'Roboto-Regular',
colors: {
font: '#343534',
background: '#dfdfdf',
}
},
header: {
fontSize: 14,
fontFamily: 'Roboto-Medium',
textTransform: 'uppercase',
colors: {
font: '#000000',
background: '#ffffff',
hover: '#4b80ea10',
active: '#4b80ea10',
}
},
loading: {
fontSize: 16,
fontWeight: 'normal',
fontFamily: 'Roboto-Medium',
}
})
``

It is currently under development

actually we're working at server side functions and design.

If you find any bugs, they are being fixed.