Не удается получить Ag-сетку React Grid для автоматического изменения размера на ширине экрана

Question

Так же, как и в заголовке, у меня возникли проблемы с изменением размера столбцов в моей сетке, чтобы они соответствовали экранам меньшего размера. Я пытался использовать this.gridApi.sizeColumnsToFit(), однако, похоже, он ничего не делает. Я также хочу уменьшить количество столбцов на экране до четырех, что я могу сделать, если я не вызову 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>);
    }
}

Итак, как мы можем изменить размер столбцов, чтобы уместить их, и скрыть другие столбцы?