AgGrid not populating all columns

Question

When i run a test the table stops being built at d2. For the most part this is pretty basic code, could someone explain why i cant get it to work correctly?

When i do the jest test it passed the params from the test to the table and back down, but it seems to lose the path there.

import DataTable from '@components/DataCard/DataTable';

import { AgGridReact } from 'ag-grid-react';
import { ensureGridApiHasBeenSet } from '@src/utils/AGGridTestUtils';

describe('Testing <Table /> test suit', () => {

    let data = [{
        d1:'name',
        d2:'123',
        d4:'good',
        d5:'',
        d6:'',
        d7:'foo'
    }]

    let component = null;
    let AgGridReact = null

    beforeEach((done) => {
        component = mount((<DataTable.WrappedComponent data={data}/>));
        agGridReact = component.find(AgGridReact).instance();
        ensureGridApiHasBeenSet(component)
        .then(() => done(), () => fail("Grid API not set within expected time limits"));
    
    });
    
    it('AG Grid Render Test', async () => {
        expect(agGridReact.api).toBeTruthy();
        let html = component.html();
        expect(html.indexOf("Foo")).toBeGreaterThanOrEqual(0);
    });
})

I apologize for the delay, here is the additional component

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

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

import classNames from 'classnames';

class DataTable extends Component {
    construtor(data) {
        super(data);
    }

    onGridReady = (params) => {
        this.api = params.api;
        params.api.sizeColumnsToFit()

        window.addEventListener('resize', function () {
            setTimeout(function () {
                params.api.sizeColumnsToFit();
            });
        });
    }

    render() {
        const columns = [
            {
                header: 'A',
                field: 'User',
                sortable: true,
                filter: true,
            },
            {
                header: 'B',
                field: 'Manager',
                sortable: true,
                filter: true,
            },
            {
                header: 'C',
                field: 'Cost',
                sortable: true,
                filter: true,
            },
            {
                header: 'D',
                field: 'Distance',
                sortable: true,
                filter: true,
            },
        ];
        return (
            <>
                <h3 className={classNames(h3, 'sO')}>Sort information as required</h3>
                <div className={'ag-theme-alpine DataTable'} style={{ marginBottom: '60px' }} />
                <AgGridReact
                    domLayout={'autoHeight'}
                    columnDefs={columns}
                    defaultColDef={{ flex: 1, sortable: true, resiazble: true, filter: true }}
                    rowData={this.props.data}
                    onGridReady={this.onGridReady}>
                </AgGridReact>
            </>
        );
    }
}

export default withRouter(DataTable);

Answer 1

Ag-grid is using under hood columns virtualization, that prevents the grid from rendering all columns.

You can disable this behavior by setting suppressColumnVirtualisation to true as discussed here

https://stackoverflow.com/a/64734376/193063