# cui-virtual-list

**Repository Path**: cqb325/cui-virtual-list

## Basic Information

- **Project Name**: cui-virtual-list
- **Description**: cui-virtual-list
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-06-28
- **Last Updated**: 2023-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: CUI, cui-solid, virtual-list, solid-js

## README

<p align="center">
    <a href="https://cqb325.gitee.io/cui-solid-doc">
        <img width="200" src="https://gitee.com/cqb325/cui-solid/raw/master/examples/assets/images/logo.svg">
    </a>
</p>

<h1>
CUI-Virtual-List
    <h3>A simple vertical Virtual List based on solidjs</h3>
</h1>

[![CUI SolidJS](https://img.shields.io/npm/v/cui-virtual-list.svg?style=flat-square)](https://www.npmjs.org/package/cui-virtual-list)
[![NPM downloads](https://img.shields.io/npm/dm/cui-virtual-list.svg?style=flat-square)](https://npmjs.org/package/cui-virtual-list)
[![NPM downloads](https://img.shields.io/npm/dt/cui-virtual-list.svg?style=flat-square)](https://npmjs.org/package/cui-virtual-list)
![JS gzip size](https://img.badgesize.io/https:/unpkg.com/cui-virtual-list/dist/cui-virtuallist.min.esm.js?label=gzip%20size%3A%20JS&compression=gzip&style=flat-square)

## Demo

[Demo](https://cqb325.gitee.io/cui-solid-doc/#/other/virtuallist "demo")

## Props
    
    // fixed height of container, choose between height/maxHeight
    height?: number
    // max height of container, choose between height/maxHeight
    maxHeight?: number
    // item estimated size, use to initialization content height
    itemEstimatedSize: number
    // prev or next number of items to show
    overscan?: number,
    // list data
    items: any[]

## Example

    export const createArray = (count: number) => {
        return new Array(count).fill(true).map(() => 1 + Math.round(Math.random() * 20))
    };

    export const ListItem = (props: any) : JSXElement => {
        const style = {...props.style}
        return <div
            style={style}
            role="listitem"
            classList={{
                "ListItemOdd": props.index % 2 === 0,
                "ListItemEven": props.index % 2 === 1,
            }}
            // can't be lacked  important!!!
            ref={props.ref}
            >
            <div> {new Array(props.item).fill(true).map(() => 'Row').join(" ")} Row {props.index}</div>
        </div>
    }

    <div style={{'250px', border: '1px solid #ccc'}}>
        <VirtualList height={250} items={createArray(10000)} itemEstimatedSize={20}>
            {ListItem}
        </VirtualList>
    </div>

## Install

    # npm
    npm install cui-virtual-list
    # yarn
    yarn add cui-virtual-list