table props to set rowsPerPageOptions

[arunaseva]

Question

Hello,

https://quasar.dev/vue-components/table/
table has a prop: rows-per-page-options

Description
Options for user to pick (Numbers); Number 0 means 'Show all rows in one page'
Default value
[ 5, 7, 10, 15, 20, 25, 50, 0 ]
Example
[ 10, 20 ]

I tried a lot of options:

ui.table.props("rowsPerPageOptions=[5,15,25]")
ui.table.props('rowsPerPageOptions="[5,15,25]"')
ui.table.props(f"rowsPerPageOptions={json.dumps([5,15,25])}")

ui.table.props("rows-per-page-options=[5,15,25]")
ui.table.props('rows-per-page-options="[5,15,25]"')
ui.table.props(f"rows-per-page-options={json.dumps([5,15,25])}")

Nothing seems to work. How can I set it with nicegui?

Thanks, Adam

[frankvp11]

This was an interesting question.
For some reason NiceGUI doesn't have an option for this (they really should). It looks like their pagination uses the pagination object, and nothing for the rows-per-page-options.
Nevertheless, you can do something like this:

from nicegui import ui

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name', 'required': True, 'align': 'left'},
    {'name': 'age', 'label': 'Age', 'field': 'age', 'sortable': True},
]
rows = [
    {'name': 'Elsa', 'age': 18},
    {'name': 'Oaken', 'age': 46},
    {'name': 'Hans', 'age': 20},
    {'name': 'Sven'},
    {'name': 'Olaf', 'age': 4},
    {'name': 'Anna', 'age': 17},
]
table = ui.table(columns=columns, rows=rows, pagination=1)
table._props["rows-per-page-options"] = ["2", "4", "6"]
ui.run()

That allows you to set the options you want - in my case it was 2, 4 6. It's wierd that it requires strings though - I'll give it that much.
@rodja, should I make a PR extending the table to accept a parameter for this?

[arunaseva]

self.table._props["rows-per-page-options"] = ["5", "15", "25"]
In my case with that wierd string qoutation ^^^ I got error:
ValueError: invalid literal for int() with base 10: ''

But for me with int this works like a charm:
self.table._props["rows-per-page-options"] = [5, 15, 25]

So, nice, thank you for help!

---

Interesting:
With this setting above I got 4 options in the dropdown select instead of 3:
[10, 5, 15, 25]
In this weird order, so 10 can not be removed.

If I use settings that contain number 10:
[5, 10, 15]
Everything is correct, I got 3 options in the right order.

---

should I make a PR extending the table to accept a parameter for this?

table.props("rowsPerPageLabel='Number of rows on page'")

You can be add label customization ^^^ to nicegui api as well.

Happy New Year!

[frankvp11]

Happy new year to you aswell!