luna-data-grid/esm/data-grid/react.js

Grid for displaying datasets

import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import DataGrid from './index';
import each from 'licia/each';
import { useEvent, useNonInitialEffect, useOption, usePrevious, } from '../share/hooks';
const LunaDataGrid = (props) => {
    const containerRef = useRef(null);
    const dataGridRef = useRef();
    const prevProps = usePrevious(props);
    useEffect(() => {
        dataGridRef.current = new DataGrid(containerRef.current, {
            columns: props.columns,
            height: props.height,
            maxHeight: props.maxHeight,
            minHeight: props.minHeight,
            filter: props.filter,
            selectable: props.selectable,
            headerContextMenu: props.headerContextMenu,
            theme: props.theme,
        });
        props.onCreate && props.onCreate(dataGridRef.current);
        dataGridRef.current.setData(props.data, props.uniqueId);
        return () => dataGridRef.current?.destroy();
    }, []);
    useNonInitialEffect(() => {
        if (dataGridRef.current) {
            dataGridRef.current.setData(props.data, props.uniqueId);
        }
    }, [props.data]);
    useEvent(dataGridRef, 'select', prevProps?.onSelect, props.onSelect);
    useEvent(dataGridRef, 'deselect', prevProps?.onDeselect, props.onDeselect);
    useEvent(dataGridRef, 'click', prevProps?.onClick, props.onClick);
    useEvent(dataGridRef, 'dblclick', prevProps?.onDoubleClick, props.onDoubleClick);
    useEvent(dataGridRef, 'contextmenu', prevProps?.onContextMenu, props.onContextMenu);
    useEvent(dataGridRef, 'changeColumn', prevProps?.onColumnChange, props.onColumnChange);
    each(['theme', 'height', 'maxHeight', 'minHeight', 'filter', 'columns'], (key) => {
        useOption(dataGridRef, key, props[key]);
    });
    return _jsx("div", { className: props.className || '', ref: containerRef });
};
export default LunaDataGrid;