Datatable: Sort values vs display values

[amks1]

Hi,
After going through the ag-grid documentation I can see that there's already a way to provide sort values and display values differently in a datatable column using value formatters.

Can we achieve this using PywebIO using Python functions to set the display value?

[wang0618]

Yes, you can.

The column definition properties of ag-gird can be set via column_args parameter in pywebio's put_datatable(), and you need to use JSFunction() helper function to define js function:

from pywebio.input import *
from pywebio.output import *
from pywebio.session import *
from pywebio.pin import *

import json

data = [
    dict(name=i, price=i)
    for i in range(10)
]

put_datatable(
    data,
    column_args={
        "price": {
            "valueFormatter": JSFunction("params", "return '£' + params.value;")
        }
    }
)

live demo: https://s.pywebio.online/f5980b79fd56cecde003b6afeb6299a9

[wang0618]

BTW, if you just want to custom sorting, the comparator properties on the column definition is more appropriate.

see :https://www.ag-grid.com/javascript-data-grid/row-sorting/#custom-sorting

[amks1]

@wang0618 Thanks, but I wanted to know if we can use a Python function here instead of JS function.
You see, I have somewhat more complex functions to display things like time durations.

[wang0618]

No way to use python code here, but you can use some workaround, like pre-generate sort key for the column in python, and attach it to the column with the original value, and use valueFormatter to only show the original value to user:

from pywebio.input import *
from pywebio.output import *
from pywebio.session import *
from pywebio.pin import *
import random
import json

data = [
    # price = (sort_key, value you want to display to user)
    dict(name=i, price=(i, random.randint(0, 10)))
    for i in range(10)
]

put_datatable(
    data,
    column_args={
        "price": {
            "valueFormatter": JSFunction("params", "return params.value[1];")
        }
    }
)

[amks1]

That's a great workaround, thanks! :)

[amks1]

@wang0618
Another issue I found is that I'm not able to sort by numbers. It always considers the value as a string.

[wang0618]

comparator works: https://s.pywebio.online/1fe1accfe5bbdb0abac88282e116a3e3