@etsoo/materialui/lib/mjs/DataTable.js

TypeScript Material-UI Implementation

import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import { useAppContext } from "./app/ReactApp";
import { DataGrid } from "@mui/x-data-grid/DataGrid";
/**
 * Data table
 * @param props Props
 * @returns Component
 */
export function DataTable(props) {
    // Global app
    const app = useAppContext();
    // Destructor
    const { localeText = {}, onCellSelection, onProcessRowUpdateError = (error) => console.log("onProcessRowUpdateError", error), slotProps, ...rest } = props;
    // Labels
    const noRows = app?.get("noRows");
    if (noRows && !localeText.noRowsLabel)
        localeText.noRowsLabel = noRows;
    const [cellModesModel, setCellModesModel] = React.useState({});
    const handleCellFocus = React.useCallback((event) => {
        // event.target is the element that triggered the event
        // event.currentTarget is the element that the event listener is attached to
        const cell = event.currentTarget;
        const row = cell.parentElement;
        if (row == null)
            return;
        const id = row.dataset.id;
        const index = row.dataset.rowindex;
        const field = cell.dataset.field;
        if (id == null || index == null || field == null)
            return;
        const params = {
            id,
            field,
            index: parseInt(index)
        };
        if (onCellSelection) {
            if (onCellSelection(params) === false)
                return;
        }
    }, []);
    return (_jsx(DataGrid, { disableColumnMenu: true, hideFooter: true, localeText: localeText, cellModesModel: cellModesModel, onCellModesModelChange: (model) => setCellModesModel(model), onProcessRowUpdateError: onProcessRowUpdateError, slotProps: {
            ...slotProps,
            cell: {
                onFocus: handleCellFocus
            }
        }, ...rest }));
}