Add newline in Dash table values

Dash Python
1

Hi. I have a Dash table with values like $3 (+29%) and I want to make it more readable by moving the parenthesis below. I’m currently using the function below:

def value_format(row):
    value1 = row['value1_df']
    value2 = row['value2_df]
    value3 = '+'
    return f'{value1} ({value3}{value2})'

I tried using ‘\n’ in the f-string but even though it works if I print the returned value my changes are not displayed in the table.

Thanks in advance for any suggestions.

2

Hi @Emanon

Here are two ways to add newline in cells of a datatable:

using style_cell : Creating New Line Within Datatable Cell - #3 by cufflink

or by using markdown: Dash print dataframe with multiple line in one cell - #2 by AnnMarieW

3

Thank you for your response. So I can do it through the database only? Is there maybe a way through my format function?

4

Sure, you can use a function for format the data. But I may not be understanding your question. If you post a minimal example, I can help you with the formatting.

5

Yeah so in my example in the f-string: value1=3, value3=’+’ and value2=29%. As it is I get: 3 (+29%). I would like the parenthesis to go in the next line. I tried using return f'{value1}\n({value3}{value2})' but it’s not working even though if I hit print(f'{value1}\n({value3}{value2})' I get the intended result.

6

Sorry, that’s not a MWE. What I mean is to provide a minimal example of what you are trying to do that includes some sample data that can be copied and run. Then I can see where the problem is. For example, the problem may be where and how you return the formatted string. I can’t tell that from your example.

Here is a MWE. Where would you put your function to update the data?


import dash
import dash_table
import pandas as pd

df = pd.DataFrame(
    {
        "date": ["20210613", "20210614", "20210615"],
        "user": ["3 \n (29%)", "3 \n (29%)", "3 \n (29%)"],
        "machine": [1, 0, 3],
    }
)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id="table",
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict("records"),
    style_cell={"whiteSpace": "pre-line"},
)

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

image

7

Hi. Unfortunately can’t help, but I have the same problem considering adding newlines in Dash. Tried both solution listed by @AnnMarieW, but no success. The only difference in comparison to code in solutions is that I bring the dataframe from sql query (pd.read_sql_query, pyodbc) in app_data file. In solution, used df is create manually.

Tried it with "\n, \n, \\n, \r\n and br-s but nothing works.

1 Like
8

Hi @baller1 ,

Just to be clear, if you copy and paste the MWE and run it without any changes, do you see the data displayed with the line breaks like in the image above?

If the MWE is working for you, but it’s not working with your data, you could try inspecting the element with the browser dev tools to see if the new line is in the table. Like in this example, you can see the data (highlighted in blue) is on two lines. This means that you have updated the data correctly to include the line break. If it shows on one line, then the data is not right.

image
image1399×264 55.9 KB

9

In case you don’t want to use dash DataTable, just pure HTML table, you need to set Td() children as array with html.Br() in order to break lines. Adding just \n or
to string did nothing in my case. So I did:

table_rows = []

braking_ranges_str = ["All traces:", html.Br(),
					  "(-inf, -10) km/h - (30, 70) cm", html.Br(),
					  "[-10, -6) km/h - (30, 60) cm\n", html.Br(),
					  "[-60, +inf) km/h - (30, 50) cm"]

table_rows.append(html.Tr([
        html.Td("Braking ranges"),
        html.Td(braking_ranges_str)
    ]))

table = html.Tbody(table_rows, style={"font-size": "small"})