# \[IGN-10241\] Customize number of table rows per page

**URL:** <https://forum.inductiveautomation.com/t/ign-10241-customize-number-of-table-rows-per-page/81201>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 30, 2023, 8:45pm UTC](https://forum.inductiveautomation.com/t/ign-10241-customize-number-of-table-rows-per-page/81201 "2023-10-30T20:45:49Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [October 30, 2023, 8:45pm UTC](https://forum.inductiveautomation.com/t/ign-10241-customize-number-of-table-rows-per-page/81201/1 "2023-10-30T20:45:49Z")

</div>

I would really like our users to be able to customize how many rows they see per page in a table, but binding a value to props.pager.initialOption does not work. I know I can change the various selections in the dropdown, but that's pretty useless because whatever they choose won't stick--every time they view the page, it will start out at whatever value I decide on for initialOption, and they'll have to change it, which they'll quickly tire of doing once they realize their change isn't permanent...

---

<div class="post-metadata">

**Author:** ![aaronrai24](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/aaronrai24/32/87248_2.png) [@aaronrai24](https://forum.inductiveautomation.com/u/aaronrai24)\
**Post date:** [October 30, 2023, 9:00pm UTC](https://forum.inductiveautomation.com/t/ign-10241-customize-number-of-table-rows-per-page/81201/2 "2023-10-30T21:00:25Z")

</div>

Do you have either props.pager.top or props.pager.bottom set to True? I found with both set to False the table doesn't do any pagination. Also with the initialOption, the value you are using in your binding must exist as an available option in props.pager.options as well.

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [October 30, 2023, 9:12pm UTC](https://forum.inductiveautomation.com/t/ign-10241-customize-number-of-table-rows-per-page/81201/3 "2023-10-30T21:12:46Z")

</div>

Yes, I have props.pager.top set to True, and the value(s) I try setting initialOption to using a binding DO exist in props.pager.options.

---

<div class="post-metadata">

**Author:** ![Chris\_Murphy](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@Chris\_Murphy](https://forum.inductiveautomation.com/u/Chris_Murphy)\
**Post date:** [October 31, 2023, 4:35am UTC](https://forum.inductiveautomation.com/t/ign-10241-customize-number-of-table-rows-per-page/81201/4 "2023-10-31T04:35:04Z")

</div>

Store their selection in a session property and do a bidirectional bind to that.  
If you do nothing else, that will at least let their selection persist for the session, you will need to initialise it to something in the session start event.  
If you want it to extend beyond that, you could store the users preference in a tag or database and push that into the session prop when they log in rather than use a default. Make sure you store it again if they change it. I do exactly this with some table filters and even with the theme the user chooses, it's pretty seamless.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 31, 2023, 7:54am UTC](https://forum.inductiveautomation.com/t/ign-10241-customize-number-of-table-rows-per-page/81201/5 "2023-10-31T07:54:32Z")

</div>

> [@Ryan\_Deardorff](#):
>
> I try setting initialOption to using a binding

What is it bound to ?

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [October 31, 2023, 4:02pm UTC](https://forum.inductiveautomation.com/t/ign-10241-customize-number-of-table-rows-per-page/81201/6 "2023-10-31T16:02:49Z")

</div>

A database query

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 31, 2023, 4:04pm UTC](https://forum.inductiveautomation.com/t/ign-10241-customize-number-of-table-rows-per-page/81201/7 "2023-10-31T16:04:59Z")

</div>

Unless the data pulled from the query is not an integer, there's no reason this shouldn't work.  
I'll give it a shot and see what happens.

Yea it works just fine.  
Create a `session.custom` property, let's call it `row_per_page`.  
Bind that property to your named query.  
Then bind the table's `props.initialOption` to `session.custom.row_per_page`.

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [October 31, 2023, 6:20pm UTC](https://forum.inductiveautomation.com/t/ign-10241-customize-number-of-table-rows-per-page/81201/9 "2023-10-31T18:20:45Z")

</div>

I can't get it to work when creating the most basic table in a brand new project and binding it to a session variable (which is static, not bound to anything else). When I first launch the URL for that page, the table shows 25 rows, and only after I hit browser refresh does it change to the 5 that I set as the session variable...

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/3/a3e044fc26663671c1aba8c9a53358e8faebee83.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/6/9623b9b6e7f6759a346f07bedeeb709b2a29ec44.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [November 1, 2023, 8:07am UTC](https://forum.inductiveautomation.com/t/ign-10241-customize-number-of-table-rows-per-page/81201/10 "2023-11-01T08:07:52Z")

</div>

My bad, it's doing the same thing for me, I'm not sure what I was looking at yesterday.

I guess it's a case similar to the powerchart's source, where the first load of the component seem to ignore the binding...

---

<div class="post-metadata">

**Author:** ![Dechen\_Chuteng](https://avatars.discourse-cdn.com/v4/letter/d/9de0a6/32.png) [@Dechen\_Chuteng](https://forum.inductiveautomation.com/u/Dechen_Chuteng)\
**Post date:** [June 27, 2024, 5:16pm UTC](https://forum.inductiveautomation.com/t/ign-10241-customize-number-of-table-rows-per-page/81201/11 "2024-06-27T17:16:26Z")

</div>

Hi @Ryan_Deardorff,

This has been reported as a bug and we've filed a ticket internally to our Development team. As a workaround, you can set the `props.pager.initialOption` binding to "Persistent" which will load the value saved in Designer.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/7/47cc7d553b67f4ea04eb7ff9fa314f2be36e0d07.png)

More details on Persistent properties can be found here: [Version: 8.1 - Persistent Properties](https://www.docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/working-with-perspective-components/perspective-component-properties#persistent-properties)
