Creating New Line Within Datatable Cell

Dash Python
1

Is it possible to create new/break lines within a DataTable cell? For example, for addresses in a DataTable, I would like to have breaks at the common name, address line 1, address line 2, and then city, state and zip. Currently, the addresses just wrap to the next line when the contents exceed the column width. So for the screenshot below, I’d like to have “Mt. Saini Baptist Church” on the first line, “3356 Clayton St” on the next line, and “Denver, CO 80205” on the last line.

image

1 Like
2

Hey, have you tried setting the column presentation as markdown and setting the content in markdown format to have these new lines?

3

I have not tried that, but I contacted Plotly support with the same question and received the answer below, which worked for me.

“You can make the datatable cells break when they encounter the \n character by setting the white-space CSS attribute for the cells in the table. E.g you would define your table like below:”

dash_table.DataTable(
 columns=[{"name": i, "id": i, "editable":True} for i in df.columns],
 data=df.to_dict('records'),
 style_cell={
 'whiteSpace': 'pre-line'
 }
)
6 Likes