@mrii/react-table-builder/dist/components/core-component/index.mjs

library to easily build tables using MUI grid

import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { DataGrid } from '@mui/x-data-grid';
import { memo, forwardRef, useCallback, useMemo, useEffect } from 'react';
import get from 'lodash.get';
import { stringToLabel } from '../../utils/string-to-label/index.mjs';
import { CustomGridToolbar } from '../custom/custom-grid-toolbar/index.mjs';
import { CustomGridFilterPanel } from '../custom/custom-grid-filter-panel/index.mjs';
import { useTableBuilderColumns } from '../../context/table-builder/provider.mjs';
import { useTableBuilderFilters } from '../../context/filter/provider.mjs';
import { useTranslation } from '../../context/translation/provider.mjs';

const CoreTableBuilder = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(({ onFilterChange , children , ...props }, ref)=>{
    const columns = useTableBuilderColumns((s)=>s.columns);
    const filters = useTableBuilderFilters((s)=>s.filters);
    const getLabel = useTranslation((s)=>s.getFieldLabel);
    const resolveColumnProps = useCallback((col)=>({
            ...col,
            valueGetter: (params)=>{
                const value = get(params.row, col.field, '-');
                return col.valueGetter?.({
                    ...params,
                    value
                }) ?? value;
            },
            headerName: col.headerName ?? getLabel(col.field) ?? stringToLabel(col.field)
        }), [
        getLabel
    ]);
    const resultColumns = useMemo(()=>columns.map(resolveColumnProps), [
        columns,
        resolveColumnProps
    ]);
    const components = useMemo(()=>({
            Toolbar: CustomGridToolbar,
            FilterPanel: CustomGridFilterPanel,
            ...props.components
        }), [
        props.components
    ]);
    useEffect(()=>{
        onFilterChange?.(filters);
    }, [
        filters,
        onFilterChange
    ]);
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            /*#__PURE__*/ jsx(DataGrid, {
                ref: ref,
                ...props,
                columns: resultColumns,
                components: components
            }),
            children
        ]
    });
}));

export { CoreTableBuilder };
//# sourceMappingURL=index.mjs.map