Black Lives Matter. Please consider donating to Black Girls Code today.

DataTable column formatting/sorting issue

I have created a data table with numerical values. However I need to format the values to .2d and add textual characters like +, -, %. Doing so converts them to strings and then they are sorted as strings instead of numbers and come out in incorrect order (1, 100, 15, 2).

Is there any way to either load numbers and format within the Datatable to sort properly or to get the Datatable to perform numeric based sorting on the strings?

looking again, I think this is possible defining sort_action=‘custom’ and coding something to do a numerical sort after filtering the characters and converting back to float. I can’t seem to figure out much from my first look at the Backend Paging with Sorting example. If there are any other tips or pointers for doing this please share, thx.

Hi @marketemp

You can find information of formatting numerical data in a Dash DataTable here: https://dash.plotly.com/datatable/typing
and in this thread:
https://community.plotly.com/t/dash-table-formatting-decimal-place

When the column type is set to numeric and it’s formatted as described in the links, then the sort_action=native works and there is no need to do custom sorting.

1 Like

thanks, solved all my issues except for one. I cannot find any documentation for FormatTable and it seems the only two calls available from my PyCharm offerings are money and percentage. How do I add a plus sign to an ordinary float with two decimal places and without adding any other characters?

There isn’t more documentation that I know of of right now. I think it’s on the Plotly/Dash project plan to upgrade this part of the documentation and include more examples.

When I was figuring out how to do this, I turned my notes into an app. You can find it here You can enter different options and see the code needed to format the table. Here is a screenshot of what I think you want. GIve it a try and let me know how it goes :slight_smile:

1 Like

I had been there before my reply. I didn’t seem to be getting it to work right on the first try but on the second try got it working with:

‘format’: Format().scheme(Scheme.fixed).precision(2).sign(Sign.positive)

Please let me know if you have any insight on DataTable formulaic backgroundColor setting or Links within a DataTable cell since your experience with DataTables seems to be high.

thanks for your help with the formatting!

I’m glad it worked! There are a lot of cool things you can do with format. It’ll be great to see it documented.

I’ll respond to the other questions in the original posts incase anyone else is search for the same thing.

thanks so much AnnMarieW. I am totally in a to use DataTable (for column sorting) or html.Table (for easier and cleaner formatting) quandary right now ironing a solution out using both.

The Dash DataTable has a lot more features than an html.Table, but it really depends on your use case. For example, you can use html inside an html.Table, but you can’t do that currently with Dash DataTable.

Or if you want to limit the sort to only certain columns, you can do that with dash-tabulator but not in Dash DataTable. However, with dash-tabulator you can’t do conditional formatting. :thinking:

I have some apps where I present the data in different ways and I use all three tables to get the job done :slight_smile:

All I want is a nicely formatted table with column sorting. I really wish the Bootstrap column sorting could be implemented within Dash Bootstrap Components. I am still leaning Html.Table() over DataTable but trying to get the most out of each and even if I don’t use DataTable, I am learning it for other uses where I may need more of the features it delivers.