@mrii/react-table-builder/dist/components/custom/custom-grid-filter-panel/index.mjs

library to easily build tables using MUI grid

import { useGridApiContext } from '@mui/x-data-grid';
import { useEffect } from 'react';
import { useTableBuilderFilters } from '../../../context/filter/provider.mjs';
import { useTableBuilderColumns } from '../../../context/table-builder/provider.mjs';

const CustomGridFilterPanel = ()=>{
    const apiRef = useGridApiContext();
    const [filters, addFilter, deleteFilter] = useTableBuilderFilters((s)=>[
            s.filters,
            s.addFilter,
            s.deleteFilter
        ]);
    const columns = useTableBuilderColumns((s)=>s.columns);
    useEffect(()=>{
        const source = apiRef.current.state.tabIndex.columnHeader?.field;
        if (!source) return;
        const active = filters.findIndex((e)=>e.field === source) !== -1;
        const columnDef = columns.find((c)=>c.field === source);
        if (active) return deleteFilter(source);
        if (!columnDef) return;
        addFilter({
            field: source,
            column: columnDef,
            value: columnDef.type === 'date' ? [
                null,
                null
            ] : ''
        });
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    return null;
};

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