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 dataGridRef = useRef(null);
    const dataGrid = useRef();
    const prevProps = usePrevious(props);
    useEffect(() => {
        dataGrid.current = new DataGrid(dataGridRef.current, {
            columns: props.columns,
            height: props.height,
            maxHeight: props.maxHeight,
            minHeight: props.minHeight,
            filter: props.filter,
            selectable: props.selectable,
            theme: props.theme,
        });
        props.onCreate && props.onCreate(dataGrid.current);
        dataGrid.current.setData(props.data, props.uniqueId);
        return () => dataGrid.current?.destroy();
    }, []);
    useNonInitialEffect(() => {
        if (dataGrid.current) {
            dataGrid.current.setData(props.data, props.uniqueId);
        }
    }, [props.data]);
    useEvent(dataGrid, 'select', prevProps?.onSelect, props.onSelect);
    useEvent(dataGrid, 'deselect', prevProps?.onDeselect, props.onDeselect);
    useEvent(dataGrid, 'click', prevProps?.onClick, props.onClick);
    useEvent(dataGrid, 'dblclick', prevProps?.onDoubleClick, props.onDoubleClick);
    useEvent(dataGrid, 'contextmenu', prevProps?.onContextMenu, props.onContextMenu);
    each(['theme', 'height', 'maxHeight', 'minHeight', 'filter'], (key) => {
        useOption(dataGrid, key, props[key]);
    });
    return _jsx("div", { className: props.className || '', ref: dataGridRef });
};
export default LunaDataGrid;