Events in Wave tables not working without pagination.

[senalw]

Wave SDK Version, OS

Wave SDK: 0.24.2 , OS: MacOs

Actual behavior

Events in ui.table not working without pagination.

Screen.Recording.2023-04-10.at.13.31.38.mov

Expected behavior

Any events that supported by ui.table should be worked even without pagination of tables.

Steps To Reproduce

You can run the following code to create the issue:

@app('/')
async def serve(q: Q):
    q.page['meta'] = ui.meta_card(box='')
    q.page['form'] = ui.form_card(box='1 1 4 4', items=[
        ui.table(name="sample",
                 columns=[
                     ui.table_column(
                         name="deployment_name",
                         label="Deployment Name",
                         sortable=True,
                         searchable=True,
                     ),
                     ui.table_column(
                         name="deployment_id",
                         label="Deployment ID",
                         sortable=True,
                     ),
                 ],
                 rows=[
                     ui.table_row(name="1",
                                  cells=["Deployment 1", "89u3489u98348393434"]),
                     ui.table_row(name="2",
                                  cells=["Deployment 2", "89u3489u98348394664"])
                 ],
                 pagination=ui.TablePagination(
                     total_rows=2,
                     rows_per_page=100,
                 ),
                 events=["sort"]
                 ),
    ])

    print(f"Events: {q.events}")

    await q.page.save()

[mturoci]

Hello @senalw. This is by design. The events should be fired only is pagination is set, otherwise all the actions shall be handled client-side by Wave itself.

[senalw]

Hi @mturoci, is this mentioned in the Wave documentation?

I have a requirement of keeping time in %Y/%m/%d %I:%M %p format. E.g. 2023/04/10 07:15 PM
To preserve above format, we have to use string data type instead of time data type for the column. How can we enable sorting for this column while pagination is disabled? (Lexicographical sorting doesn't work for this time format)

[mturoci]

is this mentioned in the Wave documentation?

Added it here - a1735a2.

I have a requirement of keeping time in %Y/%m/%d %I:%M %p format. E.g. 2023/04/10 07:15 PM

I would suggest pushing back on the requirement as it's not a good practice UX-wise. Wave table supports internationalization out of the box, meaning the date format is displayed based on the user's locale rather than the hardcoded format.

How can we enable sorting for this column while pagination is disabled? (Lexicographical sorting doesn't work for this time format)

You can't. You can either use pagination or time type to have the sorting work properly.

[senalw]

@mturoci Thanks for the explanation.

Wave table supports internationalization out of the box, meaning the date format is displayed based on the user's locale rather than the hardcoded format.

Ok. So this time format should be consistent in all over the application. For example, I have to show the time in a ui.markup or ui.text components and this time format should be consistent with the time format we show in the ui.table. How can I do that?

[senalw]

@mturoci could you please assist on above?

[mturoci]

have to show the time in a ui.markup or ui.text components and this time format should be consistent with the time format we show in the ui.table

You need to use the same mechanism for displaying the date as used in table - internationalization (i18n).

[senalw]

have to show the time in a ui.markup or ui.text components and this time format should be consistent with the time format we show in the ui.table

You need to use the same mechanism for displaying the date as used in table - internationalization (i18n).

Yes, I'm asking do we have any mechanism to get the browser local time format from Wave SDK itself or do we have to depend on custom JS code?

[mturoci]

Try googling a bit before asking. That way, you can save us both a lot of time :) There are at least 2 ways of getting the user's locale:

• From the headers browser sends in the initial request.
• From JS.

Both are accessible in Wave.

[senalw]

Try googling a bit before asking. That way, you can save us both a lot of time :) There are at least 2 ways of getting the user's locale:

Yes, I can find a way it get from JS by googling. But I just wanted to know whether is there a data type like time to use with ui.text and ui.markup components as we get in ui.tables ?
Even though Wave is open-source, I don't think we can google and find these kind of informations there. 🙂

• From the headers browser sends in the initial request.
• From JS.

Both are accessible in Wave.

Thanks for letting me know that both of above are accessible from Wave. 🙂

[senalw]

@shereezhang, as @mturoci mentioned in this comment, we can get the user's local browser time format using JS code and use it with ui.markup and ui.text components. But this is inconsistent compared to the mechanism in ui.table of Wave SDK. Therefore I created #1936 feature request.

CC @dulajra @ShehanIshanka