1.1.79 • Published 3 years ago

wvl-virtualized-list v1.1.79

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

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

NameTypeDefault
columnsarray[]
dataarray[]
headerbooleanfalse
identifierIdstring''
loadingbooleanfalse
missingToMakeRequestnumber4
noDuplicateKeysbooleanfalse
onClickfuncvoid
onContextMenufuncvoid
onFetchfuncvoid
onKeyDownfuncvoid
onOrderfuncvoid
onRowEnteredfuncvoid
orderablebooleanfalse
paginationbooleanfalse
requestAmountnumber40
serverSidebooleanfalse
widthColModerest / no-restno-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.

1.1.78

3 years ago

1.1.79

3 years ago

1.1.73

3 years ago

1.1.77

3 years ago

1.1.76

4 years ago

1.1.75

4 years ago

1.1.74

4 years ago

1.1.70

4 years ago

1.1.72

4 years ago

1.1.71

4 years ago

1.1.69

4 years ago

1.1.67

4 years ago

1.1.68

4 years ago

1.1.59

4 years ago

1.1.58

4 years ago

1.1.63

4 years ago

1.1.62

4 years ago

1.1.61

4 years ago

1.1.60

4 years ago

1.1.66

4 years ago

1.1.65

4 years ago

1.1.64

4 years ago

1.1.56

4 years ago

1.1.55

4 years ago

1.1.57

4 years ago

1.1.49

4 years ago

1.1.48

4 years ago

1.1.52

4 years ago

1.1.51

4 years ago

1.1.50

4 years ago

1.1.54

4 years ago

1.1.53

4 years ago

1.1.47

4 years ago

1.1.45

4 years ago

1.1.44

4 years ago

1.1.43

4 years ago

1.1.42

4 years ago

1.1.46

4 years ago

1.1.29

4 years ago

1.1.28

4 years ago

1.1.30

4 years ago

1.1.34

4 years ago

1.1.33

4 years ago

1.1.32

4 years ago

1.1.38

4 years ago

1.1.37

4 years ago

1.1.36

4 years ago

1.1.35

4 years ago

1.1.39

4 years ago

1.1.41

4 years ago

1.1.40

4 years ago

1.1.16

4 years ago

1.1.15

4 years ago

1.1.14

4 years ago

1.1.19

4 years ago

1.1.18

4 years ago

1.1.17

4 years ago

1.1.23

4 years ago

1.1.22

4 years ago

1.1.21

4 years ago

1.1.20

4 years ago

1.1.27

4 years ago

1.1.26

4 years ago

1.1.25

4 years ago

1.1.24

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.1.9

4 years ago

1.1.8

4 years ago

1.1.7

4 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.11

4 years ago

1.1.10

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago