@ohaidukova/react-tree-list

react-tree-list

react-tree-list is a lightweight react library for big lists and big tree lists

Demo

https://ohaidukova.github.io/react-tree-list/

Installation

npm i @ohaidukova/react-tree-list

Example

import { List, IRowRenderer, TDataBase } from '@ohaidukova/react-tree-list';
import { treeData } from '../data';

interface IData extends TDataBase<'id'> {
    deep: string;
    name: string;
    type: string;
    count: number;
    children?: IData[];
}

const rowRenderer: IRowRenderer<IData> = ({ rowData, style }) => {
    return (
        <div
            style={{
                ...style,
                paddingTop: '5px',
                paddingBottom: '5px',
                borderBottom: '2px solid gray',
                width: '100%',
            }}
        >
            <span
                style={{ padding: '0 10px' }}
            >{`${rowData.name}, ${rowData.id}`}</span>
        </div>
    );
};

export const App = () => {
    return (
        <div
            style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
        >
            <div style={{ padding: '50px' }}>React tree data</div>
            <div style={{ flex: 'auto' }}>
                <List<'id', IData>
                    data={treeData}
                    height={500}
                    rowHeight={30}
                    rowRenderer={rowRenderer}
                    uniqueFieldName="id"
                    childrenFieldName="children"
                />
            </div>
        </div>
    );
};

API

Property	Type	Required	Description
data	array	+	Array of objects with a unique field name, interface IData extends TDataBase<'id'>
height	number	+	Height of the block for the table
rowHeight	number	+	Height of the row
overscanRowCount	number		How many rows we need to render below the visible area, by default 10
uniqueFieldName	string	+	Name of the field with unique data
childrenFieldName	string	+	Name of the field with nested data
rowRenderer	function	+	Function for displaying rows, interface IRowRenderer
expandedData	object		Object with data of expanded rows, interface IExpandedChildrenData