Wvl-virtualized-list NPM

A react component to virtualize very long lists

Getting Started

Install wvl-virtualized-list using npm.

npm i wvl-virtualized-list
# or
yarn add wvl-virtualized-list

Import component

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

Use Example Code

    const [columns, setColumns] = useState<TVColumns[]>([])

    // 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])

    //Use Component

    <VirtualizedList
        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.

    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',
        }
    })