How to handle a data table with row selection and infinite scroll?

Question

Data table properties:

• Multiple columns per row
• Displays 20 rows by default
• When the 20th item is reach via scrolling, loads 20 more rows
• Rows are selectable
• Columns are sortable

Questions:

1. What's the best way to handle sorting when a table has a few selected rows and a column is sorted?

2. How should data be handled if 30 rows are selected, but the table shows 20 by default? Upon page load should the table display only the first 20 selected, all selected or all selected PLUS the next 20 unselected?

Answer 1

What's the best way to handle sorting when a table has a few selected rows and a column is sorted?

This depends (context is king). Is the information in the rows something the user would find beneficial, even after a sort? Or does the user only need to know how many rows (if any) have been selected?

So, depending on your context, visual reminders of selected rows could be:

• A row count
• Keeping selected rows at the top of the table, then showing the remaining sorted results
  • IE. Support "multiple sorts"
• Pushing selected rows to a separate "side-by-side" table (works for low column counts)
• Creating a second UI component that shows a summary / snapshot of the selected information (but only containing the relevant bits)
• A table option to "show only selected rows" or "unselected rows"

How should data be handled if 30 rows are selected, but the table shows 20 by default? Upon page load should the table display only the first 20 selected, all selected or all selected PLUS the next 20 unselected?

Again, I think this relies heavily on context. What information will be most beneficial to your end user in this situation? Unfortunately, there are rarely silver bullets for questions like these. If you provide more specifics: information about the user, their goal, etc. It will be easier to provide guidance.