react-virtualized-sticky-tree/dist/mjs/example/CountriesTree.js

A React component for efficiently rendering tree like structures with support for position: sticky

import React, { useCallback, useMemo } from 'react';
import countries from './countries.json';
import { AutoSizedStickyTree } from '../src';
const backgroundColors = ['#45b3e0', '#5bbce4', '#71c5e7', '#87ceeb'];
const countryNodes = countries.map((country) => ({ ...country, id: country.index }));
const rootNode = countryNodes[0];
const CountriesTree = () => {
    const rowRenderer = useCallback(({ node, style }) => {
        style = { ...style, backgroundColor: backgroundColors[node.depth] };
        return (React.createElement("div", { className: "node-row", key: node.id, style: style }, node.name));
    }, []);
    const getChildren = useCallback((node, nodeInfo) => {
        if (node.children) {
            return node.children?.map((childId) => ({
                isSticky: !!countryNodes[childId].children,
                stickyTop: 30 * countryNodes[childId].depth,
                zIndex: 4 - countryNodes[childId].depth,
                node: countryNodes[childId],
            }));
        }
    }, []);
    const root = useMemo(() => ({ isSticky: true, stickyTop: 0, zIndex: 4, node: rootNode }), []);
    return (React.createElement(AutoSizedStickyTree, { className: "sticky-tree-wrapper", root: root, renderRoot: true, rowHeight: 30, rowRenderer: rowRenderer, getChildren: getChildren }));
};
export default CountriesTree;