Displayed vs Available records
We currently render a message similar to 61,388 inventory items (this example from my /inventory
view):
This causes some confusion when trying to use the "Select all" button as it is only able to select the records already loaded in on the Client and displayed in the table, and not all of the 61,000 records in the system.
Avoiding confusion
- Update the message to say Showing XX of YY inventory items across the UI (i.e.
Showing {{loaded,number}} of {{total,number}} {{what}}
) - Add a tooltip to the "De/Select all" checkbox that says "Select XX loaded inventory items" (when no selection) and "Clear selection" when something is selected.
These two changes should make it clear to the user that they are operating only on the records that are loaded from the Server and available in the Client.
loadAllPages
Since it is now clear to the user that they are only operating on a subset of available records and that they have to scroll-scroll-scroll-...-scroll to load all of them, the users want an easy way to load all the remaining data into the Client. This functionality needs to be available in all <Table
s (where loadMoreData
is provided).
The initial implementation should add a new "Load all data" (using icon @mui/icons-material/FastForward
and not the dummy icon) to the table header:
IF there are more pages to load and loadMoreData
is available, the button is displayed.
WHEN clicked, the <Table
component does the following:
- Check how much data there is to load
- If
total - loaded > 1000
then display a prompt asking "Please confirm you want to load additionaltotal - loaded
records". If the user cancels, nothing happens. - Else (when
total - loaded <= 1000
) skip the prompt and proceed to step 2.
- If
- Display a dialog with a Cancel button (to stop the loading) and a
<Loading
indicator that shows progress fromloaded
towardstotal
records for the table.