为了实现Ag grid侧边栏使用自定义工具面板，需要按照以下步骤操作：

1. 创建自定义组件用于工具面板。

例如：

import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { Checkbox, FormControlLabel, FormGroup, TextField, } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexDirection: 'column', padding: theme.spacing(2), }, textField: { marginBottom: theme.spacing(2), }, }));

const CustomToolBar = () => { const classes = useStyles(); const [state, setState] = React.useState({ filter: { text: '', }, floatingFilter: true, });

const handleChange = (event) => {
    setState({ ...state, [event.target.name]: event.target.checked });
};

const handleTextChange = (event) => {
    setState({ ...state, filter: { ...state.filter, text: event.target.value } });
};

return (
    

        
        
            }
                label="Floating Filter"
            />
        
    
);

};

2. 在AgGridReact组件中使用自定义组件。

例如：

import React from 'react'; import { AgGridReact } from 'ag-grid-react'; import 'ag-grid-community/dist/styles/ag-grid.css'; import 'ag-grid-community/dist/styles/ag-theme-alpine.css'; import CustomToolBar from './CustomToolBar';

const AgGrid = () => { const gridOptions = { columnDefs: [ { headerName: 'Make', field: 'make' }, { headerName: 'Model', field: 'model' }, { headerName: 'Price', field: 'price' }, ], rowData: [ { make: 'Toyota', model: 'Celica', price