AgGrid rendering blank

user_3151415 0
Viewed 434

I have been trying all ways but ag-grid with react is not rendering. It's there in elements but nothing is showing up.

See my below code it's exact replica of documentation with unnecessary code removed. Not able to get what's the diff in between two examples.

https://www.ag-grid.com/react-data-grid/reactui/

use strict';

import React, { useMemo, useEffect, useState } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from '@ag-grid-community/react';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';


function GridExample() {

    // never changes, so we can use useMemo
    const modules = useMemo( ()=> [ClientSideRowModelModule], []);

    // never changes, so we can use useMemo
    const columnDefs = useMemo( ()=> [
        { field: 'athlete' }
    ], []);

    // never changes, so we can use useMemo
    const defaultColDef = useMemo( ()=> ({
        resizable: true,
        sortable: true
    }), []);

    // changes, needs to be state
    const [rowData, setRowData] = useState();

    // gets called once, no dependencies, loads the grid data
    useEffect( ()=> {
        fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
            .then( resp => resp.json())
            .then( data => setRowData(data));
    }, []);

    return (
        <div>
            <h1>Main page</h1>
        <AgGridReact 
            className="ag-theme-alpine"
            modules={modules}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            rowData={rowData}
        />
        </div>
    );
}

export default GridExample;

Full Code: https://codesandbox.io/s/cocky-bhaskara-11sk1?file=/src/GridExample.jsx

ag-grid reactjs
2 Answers

The grid is rendering but the issue is that it does not have a height because the surrounding DIV does not have a height.

This could be fixed in your codesample example by amending App.js to provide a surrounding DIV with the height set.

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div style={{height:"400px"}}>
      <GridExample></GridExample>
      </div>
    </div>
  );
}

Or in the example in your question:

    return (
        <div style={{height:"400px"}}>
            <h1>Main page</h1>
        <AgGridReact 
            className="ag-theme-alpine"
            modules={modules}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            rowData={rowData}
        />
        </div>
    );

The AG Grid examples have height set on the HTML, BODY and <div id="app"> elements in CSS.

html, body, #app {
   height: 100%;
   width: 100%;
   margin: 0;
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
}
user_110560530

The way I understand is the grid doesn't have an intrinsic height, unlike other elements that you used to see like a p containing text, in which the height is the text height. So the grid has to rely on the container height, but by default the height of the html and body is 0, and it expects the child element which is the grid to handles the size based on its content.

A way to solve it is make sure all of the containers above the AgGridReact have 100% height.

<div style={{ height: "100%" }}>
  <AgGridReact
    reactUi="true"
    className="ag-theme-alpine"
    modules={modules}
    columnDefs={columnDefs}
    defaultColDef={defaultColDef}
    rowData={rowData}
  />
</div>

.App {
  font-family: sans-serif;
  text-align: center;
  height: 100%;
}

#root {
  height: 100%;
}

html,
body {
  height: 100%;
}

Codesandbox Demo

user_94494260
Related