无法让React Grid Ag-grid在屏幕宽度时自动调整自身大小

Question

因此，正如标题所说，我在调整网格上的列大小以适应较小的屏幕时遇到了问题。我一直在尝试使用this.gridApi.sizeColumnsToFit()，但是它似乎没有任何作用。我还希望将屏幕上的列数减少到4列，如果不调用this.gridApi.sizeColumnsToFit()就可以做到这一点。当我调用sizeColumnsToFit时，它会填充所有列。(还尝试调整大小，然后隐藏列)

import React, { Component, Fragment } from 'react';

import { AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-theme-bootstrap.min.css'
import '../Review/ag-grid.css';
import { AuthorizeService } from '../api-authorization/AuthorizeService';
import { AllCommunityModules } from "@ag-grid-community/all-modules";
import "@ag-grid-community/all-modules/dist/styles/ag-grid.css";
import "@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css";
import ImageRenderer from '../UI/imageRenderer';
import CharacteristicRenderer from '../UI/characteristicRenderer';
import ShippingRenderer from '../UI/shippingRenderer';
import { fetchAssets } from '../../utils/fetchAsset';

export class Approve extends Component {
    constructor() {
        super();
        this.state = {
            ColumnDefs: [
                { headerName: "Inventory Tag Number", field: "inventoryTagNumber", sortable: true, filter: true },
                { headerName: "Locations", field: "location.locationName", sortable: true, filter: true },
                { headerName: "Sequence", field: "transaction.sequence", sortable: true, filter: true },
                { headerName: "Item #", field: "transaction.item", sortable: true, filter: true },
                { headerName: "Quantity", field: "quantity", sortable: true, filter: true },
                { headerName: "Make", field: "make", sortable: true, filter: true },
                { headerName: "Model", field: "model", sortable: true, filter: true },
                { headerName: "Serial #", field: "serialNumber", sortable: true, filter: true },
                { headerName: "Category", field: "category", sortable: true, filter: true },
                { headerName: "SubCategory", field: "subCategory", sortable: true, filter: true },
                { headerName: "Description", field: "description", sortable: true, filter: true },
                { headerName: "Characteristics", field: "characteristics", cellRenderer: "characteristicRenderer" },
                { headerName: "Images", field: "images", cellRenderer: "imageRenderer" },
                { headerName: "Condition", field: "condition", sortable: true, filter: true },
                { headerName: "Shipping Info", field: "shipping", cellRenderer: "shippingRenderer" },
                { headerName: "Notes", field: "notes" },
            ],
            frameworkComponents: {
                imageRenderer: ImageRenderer,
                characteristicRenderer: CharacteristicRenderer,
                shippingRenderer: ShippingRenderer
            },

            rowDefs: [
                // default rows
            ]
        };
        this.onGridReady = this.onGridReady.bind(this);


        this.onFirstDataRendered = this.onFirstDataRendered.bind(this);
        fetchAssets().then(data => {
            this.setState({
                rowDefs: data
            });
        }).catch(err => {
            console.dir(err);
            throw err;
        });
    }

    onGridReady = params => {
        this.gridApi = params.api;
        this.gridColumnApi = params.columnApi;
    } 

    mapImages(imgData) {
        console.log(imgData);
        return imgData;
    }

    onFirstDataRendered = params => {
        // params.api.sizeColumnsToFit();
    };

    onGridReady(gridOptions) {
            gridOptions.api.addGlobalListener(function(type, event) {
                if (type.indexOf('column') >= 0) {
                    console.log('Got column event: ', event);
                }
            });
            var widthWindow = window.innerWidth;
            if (widthWindow < 376) {
                console.log("its smaller");
                gridOptions.columnApi.setColumnsVisible(['transaction.sequence', 'transaction.item','quantity', 'make', 'serialNumber', 'category', 'subCategory', 'characteristics', 'images', 'condition', 'shipping', 'notes'], false);
                this.gridApi.sizeColumnsToFit();
            }

    }
    render() {
        return (<Fragment>
            <h1>Asset Approve</h1>
            <div
                className="ag-theme-bootstrap"
                style={{
                    height: '90vh',
                    width: '90vw',
                    marginTop: '3em'
                }}>
                <AgGridReact
                    pagination={true}
                    columnDefs={this.state.ColumnDefs}
                    rowData={this.state.rowDefs}
                    frameworkComponents={this.state.frameworkComponents}
                    onGridReady={this.onGridReady}
                ></AgGridReact>
            </div>
        </Fragment>);
    }
}

那么，我们如何才能既调整列的大小以适应需要，又隐藏其他列呢？

Answer 1

好的，这就是对我有效的方法

<AgGridReact
  rowData={data}
  columnDefs={columns}
  // this is where the magic happens
  onGridColumnsChanged={() => columnApi && columnApi.autoSizeAllColumns()}
  onGridReady={params =>setColumnApi(params.columnApi)}
/>

所以基本上我会调整所有列的大小，如果有任何列改变了，如果你需要它，还有一个onCellValueChanged事件，你可以传递一个函数来调整它的大小。

我知道现在回复有点晚，但是嘿！也许另一个开发者朋友也需要帮助。