如何更改 ag-grid (JavaScript) 侧边栏的宽度？

Question

I need to change my ag-grid sidebar's width default to 1000px. Please check the configuration and image. Thanks

const listingGridOptions = {
    columnDefs: listingColumnDefs,
    icons: {
        'custom-stats': '<span class="ag-icon ag-icon-custom-stats"></span>'
    },
    sideBar: {
        maxWidth:600,
        toolPanels: [
            {
                id: 'columns',
                labelDefault: 'Columns',
                labelKey: 'columns',
                iconKey: 'columns',
                toolPanel: 'agColumnsToolPanel',
            },
            {
                id: 'filters',
                labelDefault: 'Filters',
                labelKey: 'filters',
                iconKey: 'filter',
                toolPanel: 'agFiltersToolPanel',
            },
            {
                id: 'customStats',
                labelDefault: 'Custom Stats',
                labelKey: 'customStats',
                iconKey: 'custom-stats',
                toolPanel: 'customStatsToolPanel',
            },
        ],
        //defaultToolPanel: 'customStats'
    },
    components: {
        imageRenderer: imageRenderer,
        customStatsToolPanel: CustomStatsToolPanel
    },
    defaultColDef: {
        flex: 1,
        minWidth: 150,
        filter: true,
        resizable: true,
        sortable: true,
        enableRowGroup: true,
        floatingFilter: true
    },
    rowSelection: 'single',
    autoGroupColumnDef: {
        minWidth: 200
    },
    rowGroupPanelShow: 'always',
    onSelectionChanged: onSelectionChanged,
    // use the server-side row model
    rowModelType: 'serverSide',
    serverSideStoreType: 'full',
    animateRows: true,
};

Answer 1

Override the tool panel width with css and set the width to 1000px like so:

    .ag-tool-panel-wrapper {
        width: 1000px !important;
    }

Demo .

Answer 2

You set each sideBar toolPanel's width . You need to set default width per panel, not globally under sideBar. This will set the default sidebar width per panel, and still allow for expanding or condensing the bar once opened. If you use the css override the size will be fixed. And only using maxWidth/minWidth per tool panel will force a snap-to effect, without opening the panel in your desired width.

sideBar: {
    toolPanels: [
        {
            id: 'columns',
            labelDefault: 'Columns',
            labelKey: 'columns',
            iconKey: 'columns',
            toolPanel: 'agColumnsToolPanel',
            width: 1000
        },
        {
            id: 'filters',
            labelDefault: 'Filters',
            labelKey: 'filters',
            iconKey: 'filter',
            toolPanel: 'agFiltersToolPanel',
            width: 250,
            minWidth: 100,
            maxWidth: 300
        },
        {
            id: 'customStats',
            labelDefault: 'Custom Stats',
            labelKey: 'customStats',
            iconKey: 'custom-stats',
            toolPanel: 'customStatsToolPanel',
            width: 400
        },
    ],
    //defaultToolPanel: 'customStats'
},