Table Column custom Formatting / Sorting

[v4ssili]

Question

Hi guys, really amazing project!

I am a bit confused about some details when working with the ui.table component, in particular functionality such as column formatting and custom sorting. When looking at the Quasar docs, I should be able to use format and sort functions in the column definition. I tried it with the typical python lambda syntax but always got a console error like TypeError: e.format is not a function.

I wonder if I'm doing something wrong or if not all features from the linked quasar table are implemented. I didn't find any helpful insights in the documentation or in other discussions here. I also couldn't find a way to utilize slots for the formatting step, as there seems to be no way to access the column data within the slot template to be used in python?

I'm working with dates and currency as table data, so the default sorting will be broken when I format the data beforehand.
What's the way to go here, do sorting and formatting on the python side and then rebuild the table or am I just missing something?
Any help would be much appreciated :)

[falkoschindler]

Hi @v4ssili! Thanks for bringing this up!
Unfortunately, it is currently not possible to pass functions to the column definition of ui.table.
But I could imagine implementing something like

columns = [
    ...
    {'name': 'age', 'label': 'Age', 'field': 'age', ':format': '(val, row) => `${val} years`'},
]

The leading ":" would indicate a dynamic attribute like we did for dynamic props (see the date filter demo).
However, we will need to write a wrapper component for QTable in order to have a place for translating the string into a JavaScript function.

[falkoschindler]

Naah, I just implemented it: #1061. Might be part of the next release. 🚀

[v4ssili]

Wow that's awesome! Thank you so much :)