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

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

import React, { useCallback } from 'react';
import countries from './countries.json';
import { AutoSizedStickyList } from '../src/';
const cities = countries.filter((node) => node.depth === 3).map((city, index) => ({ id: index, ...city }));
const CitiesList = () => {
    const rowRenderer = useCallback(({ node, style }) => {
        style = { ...style, backgroundColor: '#87ceeb' };
        return (React.createElement("div", { className: "node-row", style: style, key: node.id }, node.name));
    }, []);
    const getRowHeight = useCallback((node) => {
        return 30;
    }, []);
    return (React.createElement(AutoSizedStickyList, { className: "sticky-tree-wrapper", getRowHeight: getRowHeight, rowRenderer: rowRenderer, items: cities }));
};
export default CitiesList;