React Ag-网格显示

Question

When I add simple table on my page:

...

    const [columnDefs] = useState([
        { headerName: "id", field: "id" },
        { headerName: "name", field: "name" },
        { headerName: "type", field: "type" },
    ]);

    const defaultColDef = useMemo(() => {
        return {
            flex: 1,
            minWidth: 140,
            resizable: true,
        };
    }, []);


    return (
        <>
            <div className="ag-theme-alpine" style={{ height: 400, width: 500 }}>
                <AgGridReact 
                    rowData={foundTemplates} 
                    columnDefs={columnDefs} 
                    getRowId={getRowId} 
                    defaultColDef={defaultColDef}></AgGridReact>
                    pagination={false}
            </div>
        </>
    );

foundTemplates has the following structure:

        { id: 1, name: "testName1", type: "TestRFQ", description: "description1", ownerCurrentUser: true, lastUsed: true },
        { id: 2, name: "testName2", type: "TestRFI", description: "description2", ownerCurrentUser: false, lastUsed: true },
        { id: 3, name: "testName3", type: "TestAuction", description: "description3", ownerCurrentUser: true, lastUsed: false },
        { id: 4, name: "testName4", type: "TestAuction", description: "description4", ownerCurrentUser: false, lastUsed: false },

I have a problem with displaying data in the right way: all data is displaying in one column (despite I have some kind of column definitions with 3 fields at least). Also I've tried to remove a pagination block ( pagination={false} ), but it is still displaying. How it looks now

In general I'm planning to use custom cell renderer for info displaying, but now I can't even display a simple data.

Answer 1

The root cause: I didn't import ag-grid css.