AG-Grid sizing does not work

Dash Python
1

I am trying to make ag-grid occupy the full page (100% of visible space in browser). Below is css I use for that, but it is not doing what I expected. The result datatable seems to occupy 200% of page width and 50% of height. What should I do to make the table be 100%x100% of the page and not have the default browser scrollbars?
Dash version 2.13.0, Windows operating system.

CSS:

html,
body {
  margin: 0;
  padding: 0;
  overflow: auto;
}

/* use viewport-relative units to cover page fully */
html, body {
  height: 100vh;
  width: 100vw;
}

/* include border and padding in element width and height */
* {
  box-sizing: border-box;
}

/* full-sized  container that fills up the page */
div {
  height: 100%;
  width: 100%;
}

Python code sample:

from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd


# Make pandas dataframe
def make_main_df():
    return pd.DataFrame({"issue": [1, 2, 3], "assignee": ["Sam", "John", "Kim"]})


# Make ag-grid from pandas dataframe
def make_table_grid(df):
    grid = dag.AgGrid(
        id="main-df",
        rowData=df.to_dict("records"),
        columnDefs=[{"field": i} for i in df.columns],
        className="ag-theme-alpine-dark",
        columnSize="sizeToFit",
    )
    return grid


# App layout
def serve_layout():
    main_df = make_main_df()
    layout = html.Div(
        [
            make_table_grid(main_df),
        ],
        className="main-div",
        contentEditable="false",
    )
    return layout


app = Dash(__name__, title="Issues in progress", include_assets_files="toy.css")
app.layout = serve_layout
# Run the app
if __name__ == "__main__":
    app.run_server(debug=True, port=3010)

Result

aggrid
aggrid1920×1009 15.7 KB

2

Hello @EXzotick,

Welcome to community!

The issue is with your css, you are telling each div to take up 100%, this is what the grid uses for cells.

Once you take that out, you should be fine.

Also, I’d tried to view it without all the css styles and see what the app looks like.

1 Like
3

Indeed, removing div from css helped. Here are the code changes that got me what I wanted
CSS:

html,
body {
  margin: 0;
  padding: 0;
  overflow: auto;
}

html, body {
  height: 100vh;
  width: 100vw;
}

* {
  box-sizing: border-box;
}

Python:

#Make ag-grid from pandas dataframe
def make_table_grid(df):
    grid = dag.AgGrid(
        id="main-df",
        rowData=df.to_dict("records"),
        columnDefs=[{"field": i} for i in df.columns],
        className="ag-theme-alpine-dark",
        columnSize="sizeToFit",
        style={'height': '100vh'} #set height to occupy all space
    )
    return grid
4

To keep from managing your stylesheet like this, I might suggest using something like dmc or dbc to help. And then only make adjustments as you need them. :slight_smile: