@deephaven/js-plugin-ag-grid/dist/AgGridWidget.js

Deephaven AG Grid plugin

import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useMemo, useState } from 'react';
import { LoadingOverlay } from '@deephaven/components';
import { useApi } from '@deephaven/jsapi-bootstrap';
import Log from '@deephaven/log';
import { getSettings } from '@deephaven/redux';
import { useSelector } from 'react-redux';
import { themeQuartz } from '@ag-grid-community/theming';
import { ViewportRowModelModule } from '@ag-grid-enterprise/viewport-row-model';
import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
import AgGridView from './AgGridView';
import AgGridDhTheme from './AgGridDhTheme';
const log = Log.module('@deephaven/js-plugin-ag-grid/AgGridView');
/**
 * Fetches an AgGrid widget from the server and fetches the underlying table provided by the widget.
 * Then passes the table to AgGridView to display the table in an AG Grid.
 */
export function AgGridWidget(props) {
    const dh = useApi();
    const settings = useSelector((getSettings));
    const { fetch } = props;
    const [table, setTable] = useState();
    const gridDensity = settings === null || settings === void 0 ? void 0 : settings.gridDensity;
    const themeParams = useMemo(() => AgGridDhTheme.getThemeParams(gridDensity), [gridDensity]);
    const theme = useMemo(() => themeQuartz.withParams(themeParams), [themeParams]);
    const agGridProps = useMemo(() => ({
        modules: [
            RowGroupingModule,
            ViewportRowModelModule,
            ColumnsToolPanelModule,
        ],
        defaultColDef: {
            filterParams: {
                buttons: ['reset', 'apply'],
            },
        },
        rowSelection: {
            mode: 'multiRow',
            checkboxes: false,
            headerCheckbox: false,
            enableClickSelection: true,
        },
        suppressCellFocus: true,
        theme,
        rowHeight: themeParams.rowHeight,
        rowStyle: {
            // Displays numbers as monospace figures. Keeps decimal alignment.
            fontVariantNumeric: 'tabular-nums',
        },
    }), [theme, themeParams]);
    /** First we load the widget object. This is the object that is sent from the server in AgGridMessageStream. */
    useEffect(() => {
        let cancelled = false;
        async function init() {
            log.debug('Fetching widget');
            const widget = await fetch();
            const newTable = (await widget.exportedObjects[0].fetch());
            if (!cancelled) {
                log.info('AgGridView loaded table', newTable);
                setTable(newTable);
            }
        }
        init();
        return () => {
            cancelled = true;
        };
    }, [dh, fetch]);
    return table != null ? (_jsx("div", Object.assign({ className: "ui-table-container" }, { children: _jsx(AgGridView, { table: table, settings: settings, agGridProps: agGridProps }) }))) : (_jsx(LoadingOverlay, {}));
}
export default AgGridWidget;
//# sourceMappingURL=AgGridWidget.js.map