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!

[falkoschindler]

Some remarks:

• Nowadays you can either call .props or use it as a dictionary:

  table.props["rows-per-page-options"] = [2, 4, 6]

  Using a camelCase prop name you can even write:

  table.props.update(rowsPerPageOptions=[2, 4, 6])

• I think you should pass integers, even though Quasar seems to accept strings as well.
• The spurious number 10 seems to come from the current pagination value. If you set pagination to 2 and options to [2, 4, 6], the dropdown will show only 2, 4, and 6, as expected.
• You can call .props for settings options like this:

  table.props(':rows-per-page-options="[2, 4, 6]"')

  Because we don't want to set the string "[2, 4, 6]", but its value after interpretation as a JavaScript array, we mark the prop as "dynamic" using a colon prefix :.

Regarding the pull request: I'm not sure if this prop deserves its own parameter. QTable has so many props and we try to stick with the most common ones to keep the parameter list somewhat organized. But I'm not 100% against it. @rodja What do you think?

[rodja]

I think the current way to define complex parameters in props is bit ugly. But @falkoschindler is right. There are so many in QTable. Mabye we could introduce some grouping? For example table.props.pagination.rows_per_page_options = [2, 4, 6]?

[rodja]

Hmm... grouping will be complicated to implement and specify. For example rows_per_page_options is NOT in the pagination config from QTable. Also covariance for the props class will be tricky. Let's keep it as it is: special props must be set via props(...) and we are not implementing special parameters for everything.