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.

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

It is currently under development

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

If you find any bugs, they are being fixed.