In django-tables2, make number of rows displayed depend on screen size?

Question

When using django-tables2, use the paginate parameter to limit the number of rows displayed. For instance, if I have the table my_table, then in views.py I set it to display 10 rows as follows:

RequestConfig(request, paginate={'per_page':10}).configure(my_table)

My problem is that in my app I want the number of rows shown per page to depend on how big the user's screen is. For instance, 10 rows for mobile devices, but 25 rows for desktop screens. I am imagining doing in views.py what you can do with style sheets using the media rule (e.g., @media(max-height: 480px) {do something}).

Unfortunately, my (noob) understanding is that in Django, the view is relatively insulated from low-level parameters like screen size. However, I don't want to implement some scheme like sending information from the template to the view if there is already a simple solution baked into django-tables2 that I am just ignorant of.

Note I am using Bootstrap4 for my front end, if that makes any difference. The point is that I am already importing Javascript and jQuery into the project, at least at the template level.

Related general discussion
Interestingly, I haven't seen a lot of discussion of adapting table row count to media type, but there is obviously tons of more general discussion of responsive media-sensitive design:

• Responsive design with media query : screen size?
• https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Answer 1

I have no straightforward or complete solution, but I'll share some thoughts:

When (initially) rendering the table, Django-tables2 has no way of knowing the screen size. One of these workarounds might satisfy your needs:

Render less rows

In your initial page view, if your screen size is small:

• Hide some rows, then, adjust the offset and number of pages you request for the next pages using JavaScript. This will involve rewriting url parameters of the pagination links.
• Reload the page with a smaller number for per_page added to the url.
• Default to rendering a smaller number of rows, and allow the user to change the number of rows rendered with a dropdown, which is hidden for mobile users.

Optimize template for responsiveness

Optimize the template for different screen sizes rather than changing the number of rows. An example of how this could work can be found in the table displayed in webpack documentation. You might still want less rows for smaller screens with this technique though.

Client-side table-sorting

If the total number of rows is reasonable, sending everything to the client and deferring the pagination to something like datatables might work.