How to create a table where some columns have x rows but others have >x rows

Dash Python
1

I want to create something like this in dash
sim_matrix_example

2

Hi @ssingh80

See the Row Spanning section of the Dash AG Grid docs:

3

I want this applied to 3 of the headers?

4

Oh, your description said rows. OK, the easiest way to format the headers is to use css

This example will show how you can use \n to make line breaks in the headers.

Put the following in a .css file in the /assets folder:


.header-pre .ag-header-cell-text {
    white-space: pre;
}

then add the \n in the header text where you want:


import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)


columnDefs = [
    {
        "field": "latin_text",
        "headerName": "Latin \nText With \nWord Breaks",
        "width": 200,
        "autoHeaderHeight": True,
    },
    {
        "field": "latin_text",
        "headerName": "Latin Text Without Word Breaks",
        "width": 200,
        "wrapText": True,
        "cellStyle": {"lineHeight": "unset"},
    },
]

latinText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'

data = [{"latin_text": latinText} for i in range(5)]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="row-height-wrapping-wordbreak",
            rowData=data,
            columnDefs=columnDefs,
            defaultColDef={"resizable": True, "sortable": True, "filter": True, },
            dashGridOptions={"rowHeight": 120},
            
        ),
    ],
    className="header-pre"
)

if __name__ == "__main__":
    app.run(debug=True)

image
image968×608 48.6 KB

Here is more information on formattingheadings in the docs:

This example shows how to set word breaks in the header and the rows:

This section has more information on formatting the headers with css:

dag-docs

1 Like