Formatting datatable user input in rows instead of columns DASH

Dash Python
1

Hi,

I have a table of different prices, the first column is the item, the second is the actual price and the third one is the unit (it can be anything like $$/liter, $$/kg, $/m2 and so).

I would like to get rid of the third column and have something like they do in Typing and User Input Processing | Dash for Python Documentation | Plotly where the unit is embedded in the price itself, the problem with my data is that the unit change for every row!

Is there any way I can do to have separate units for every row?

Thanks in advance!!

image
image917×499 10.9 KB

2

hi Juan (@jralvarezpa )
:wave: welcome to the community,

You could format the cell data based on CSS but I haven’t found a way to format the data cell by cell, using the dash_table.FormatTemplate.

This example shows how to format data cell by cell by using conditional statements, however, I think you are limited to CSS formatting, and therefor cannot use the dash.dash_table.Format.

What kind of unites would you like to display? something like this: 6.99/kg ?

You might be able to add a css sheet to the assets folder and refer to that sheet as you do your conditional cell formatting.

3

Hi Juan,

I have two additional proposals.

  1. Preprocess your data by merging the columns Price and Unit before creating the DataTable. Comes with its own downsides, e.g. the column is not numeric anymore
  2. Use DataTable tooltips to show the Unit: DataTable Tooltips | Dash for Python Documentation | Plotly
4

Hi Adam,

Thank you for your suggestion. I need it to show different units, for example euros/kilo, euros/liter and so on.

I have this project, very amateur skills (https://small-opex-7wvhiazera-lz.a.run.app/ user: dan.landstrom pass: dan.landstrom2022) and I wanted to make it a bit more frienly, removing some of the columns. I already have tooltips on the rows explaining what they are so I wanted to remove the third column and unify the units with their value and in the example from Dash, but it gets complicated when it’s by row and not column.

I thought there would be a way to define the table as in the examples and then transpose it when displaying it, but I guess it’s not a easy as that.

Thanks again!

5

Hi Yanboe,

Thanks for your answer. Unfortunately I need the the column to be numeric, this is an editable table and after the user has changed some values it will display other things in my dashboard.

I already have a tooltip explaining the meaning of each row, but I think for user experience it’s much better if they have it right there.