Select how many rows are shown in a data_table?

Dash Python
1

Dear all

How can one select how many rows are shown in a data_table? - This cannot be controlled via height argument. Is this up to now not possible?

Thanks,
Matthias

2

See the official (& recently updated!) documentation on this topic here: https://dash.plotly.com/datatable/height.

3

Try page_size=20
This should do the work.

4

Hi @matthias
Welcome to the Dash community.
I would take a look at Chris’s link because Dash has great documentation. And Shefali gave the right answer. Another way to select how many rows are shown is by:

style_table={'height': '300px', 'overflowY': 'auto'}

By setting height of the table, you are limiting the number of rows. The documentation clarifies:

“By default and without wrapping, each row takes up 30px. So 10 rows with one header would set the table to be 330px tall”

Additionally, I created a tutorial on the DataTable height and styling topic. Hope that helps clarify future questions that might arise.

Good luck,

1 Like
5

Hello all,

First of all: Thanks very much for all your answers. The community here is really helpful for me!

I tried all you answers and they make all fully sense when I read them. But: Say I do exactly what was suggested. Seeting ‘height’ to 300 px and I set ‘overflowY’ to ‘scroll’. What I would like to control is how many rows are shown without scrolling down (for me there are 14 rows; if I want to see more rows, I Need to scroll down). All the solution of above do not change that.

Do you see the same like me?

Thanks again and best,
Matthias

6

I might be missing something, but this is what the page_size property does. If you want to display more rows before scroll, then you need to make your table container taller (e.g. change 300px to 500px):

image
image1112×946 145 KB

7

Hi @chriddyp,
Just had another quick observation, Though i give the Page Size as 10, 20 or any other number.
I see the data table shows up 2 less records all the time. though actual count is correct when checked.
Is it because we have Headers and Filter row added and that is included in total row count.

If yes, is there a way we can we avoid missing the actual data now showing up in the table.

Eg below:-
page_size=10,
Actual data rows = 8
image

Do we have a way to include /exclude header - filter rows being included in page size property.

Thanks.

8

Hm, that’s odd. I didn’t think that page_size included header + filter rows, as you can see from the example I linked, it displays 10 rows with page_size=10. Not sure why yours is displayling less, unless things are cutoff with scroll or your data has only 8 rows.

9

Thank You for your response.
Yes, you are right, i find the issue. :slight_smile:

The rows are actually hidden.I can see them if i scroll down using down keys.
I am not sure why i don’t see the vertical scroll to clearly tell the user there is more data present in the data table.

i have given style_table property as:-
style_table={
‘margin’: ‘20px’,
‘maxHeight’: ‘500px’,
‘overflowY’: ‘scroll’,
}

image
image873×573 30.9 KB

10

Hello again

Sorry for this long time replying. I find (partially) now what is going on here and think this seems to be indeed a bug and might be very useful for the community. I fixed the first row of the table with

fixed_rows={'headers': True, 'data': 0}

If I have this line in the code, in addition with

page_size = 20

then it does not work. There will be the scroll and it always shows a limited amount of rows.

If I take the fixed header out, then everything works, so then I can increase or decrease the Parameter “page_size” which works (but then no longer a scroll is inside).

I have here my whole relevant code (without the line which fixes the header line):

 filter_action='native',
 page_size = 20,
 sort_action='native',
 sort_mode='multi',
 data=pd.DataFrame([[None]*6]*30).to_dict('records'), 
 style_header={'backgroundColor': '#DCDCDC'}, 
 style_cell={'fontSize':14, 'font-family':'Arial', 
 'text-align':'left','backgroundColor': '#F5F7F7'},
 style_data_conditional=[{'if': {'row_index': 'odd'}, 'backgroundColor': 'rgb(248, 248, 248)'}, 
                                               {'if': {'column_id': 'Ticker'}, 'fontWeight': 'bold'},
                                               {'if': {'filter_query': '{Risk budget} > 1 or {Risk budget} < 0'},  'backgroundColor': '#a52019', 'color': 'white'}],       
 style_table={'maxHeight': '900px','minHeight':'900px', 'overflowY': 'auto'})

So for me this is like a bug because these are two seperate things:

  1. I would like to control how many rows to show before I need to scroll down
  2. I would like to Control how many rows are shown before I Need to go to the next page.

Do you see this different? Why is this behavior with the fixed row?

Best,
Matthias

11

Hi @matthias

Thanks for your post. This is interesting indeed. My colleagues and me had the same issue most recently. We “solved” it by simply accepting a non fixed header and adjusting the size of the table. I would agree that this seems like a bug or maybe we did something wrong. Would be really interesting to get some feedback from the developers. However, the datatable offers many other possibilities to deal with such an issues.

Cheers