I'm designing a screen with tabular data, and trying to explain to the developers what is required. First off, I want to make sure that my design is feasible.

My goal is to...

  1. Have tabular data on the screen, including filters and pagination.
  2. The filters should be across the top and near the header row
  3. The header row should always be visible
  4. The pagination control should always be visible near the bottom displayed row
  5. Row height is fixed at 36px

So for responsiveness, this leaves only the displayed number of rows as a variable. If there is room for only three rows to be displayed while keeping all of the mandatory controls visible, then only display three rows. If the same is rendered on a larger screen and there is room for 25 rows, then display 25. The user should always be able to expect the mandatory controls to be roughly in the same spot, regardless of real estate size.

So do you folks have some examples of this I can send to the dev team?


1 Answer 1


It seems pretty straight forward and if I think I understood, they would understand. If a visual help is really needed though, I would probably go for a simple html page with one image position fixed to top (mockup of top controls) and the other image fixed to bottom (pagination). Then a div table with your fixed height rows having a lower z-index. Then I would video capture the screen with me changing height of browser window. You don't mention the horizontal space though, which is the most challenging IMO when it comes to tables.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.