Elemental components
Desired features of elemental data components, as found in data intensive applications — where user wants to see, explore and manipulate great quantity of data at once.
TODO: Usage: when the component is in scope, specifies …
Grids
Component | Features | Description | Usage | Status |
---|---|---|---|---|
Grid | Sets of columns | display subset of all available columns, selected by the user, either from predefined named sets or custom selection in a column list; initial display of a default named subset, or of all columns when not specified | frequent / essential | ✓~~ |
Persistent settings | per user persistence of the selection of columns and column order; implies the ability to retrieve and set the grid configuration from the application context | frequent / essential | ✓·· | |
Highlight current row | mark and highlight a row as the current row, by clicking on its row header or in any of its cells; implicitely selects the row; additionally, ability to move the selection between rows with keyboard; intended to ease reading when there are many columns | frequent / important | ✓✓✓ | |
Alternate rows | alternate background color of rows, to ease reading when there are many columns; nice-to-have, if current row can be defined and is highlighted | frequent / nice-to-have | ✓✓✓ | |
Frozen columns | set of frozen columns (configured at design time, at least), in a pane to the left of the grid | frequent / important | ✓✓✓ | |
Scrollable | performant horizontal and vertical scroll in given viewport, with large number of columns (a hundred) and rows (many hundreds); consider virtual/infinite scrolling implementation | frequent / essential | ·✓✓ | |
Flex layout | ability to grow the grid to all available space in flex layout | frequent / essential | ✓✓✓ | |
Search Filter | only display rows matching a user-specified search pattern, masking other rows; search in all columns, or limit search to specified columns (instrument:cash ); full-text search; allow for globs/wildchar, multiple inclusive/exclusive search patterns, and domain-specific syntaxic sugar, applying search to all columns of a certain kind (currency:EUR ) |
frequent / essential | ·✓✓ | |
Pagination or Automatic fetching/Lazy loading | pagination of a recordset, by a fixed number of records per page; navigation between pages / to start / to end; pagination is infrequent, usually users want all data or automatic fetching of additional data, when scrolling or jumping to end | infrequent / important | ✓✓✓ | |
Derived columns | Ability to add calculated columns, eventually hidden, by a function that receives every row; defined at design-time; those columns serve for the Clustering / Forced storting or Static grouping of rows; they should not participate in filtering/searching; if they are hidden, they do not appear in list of columns available to the user (in selection of a subset of columns). | frequent / essential | ✓✓· | |
Clustering / Forced sorting | sorting of rows by the contents of one or more columns, possibly hidden and/or calculated, in ascending or descending lexical order, that always takes precedence over user-defined multi-column sorting (see next feature); used to create clusters of rows, eventually to forcibly place them at start or end of grid (cluster of cash positions at end, summary row at top); the sort key might as well be used to statically group the rows (see Grid with Grouping component below) | frequent / essential | ✓·· | |
Multi-column sorting | user-defined sorting of rows by the contents of one or more columns, in ascending or descending lexical order | frequent / important | ✓✓✓ | |
Re-order columns | ability to re-order columns dynamically, by drag & drop of the column header to a new place; ability to select a set of columns, as well as export to CSV/Excel, both alleviate the need for this column re-ordering feature | infrequent / nice-to-have | ✓✓✓ | |
Grid with Export | Inherits Grid | |||
Export CSV | export the grid contents to CSV format | frequent / important | ✓✓· | |
Export Excel | export the grid contents to Excel format, retaining grouping/subgrid/detail and formatting as much as reasonably feasible — also involved in Paste from Excel use case of Bulk Editable Grid | infrequent | ··? | |
Grid with Grouping | Inherits Grid Export | |||
Collapsable static groups | design-time partitioning of the rows by function; group the rows of every partition chunk in a collapsable section with a header, that would display the result of the partition function; handle multiple levels of grouping, when the partition function returns a tuple; as a workaround, we often add dumb rows when preparing the data, as well as hidden derived columns and forced sorting, to cluster the rows; special case for virtual/infinite scrolling implementation | frequent / important | ··✓ | |
Collapsable dynamic groups | create dynamic groups with drag and drop of a column header to a drop zone (in the header, for instance) and then partition the rows by the distinct values of that column; then, same behavior as static groups; special case for virtual/infinite scrolling implementation | infrequent / important | ··· | |
Aggregate summary rows | calculate aggregate summary rows for every static group, with a reducing function, defined at design-time; aggregate summary rows should not participate in sorting and filtering/searching; their contents should not be affected by filtering, but should update when their dependent cells are edited | infrequent / important | ✓·· | |
Grid with Subgrid | Inherits Grid Export | |||
Collapsable Subgrid | Subgrid linked to parent row in master/detail relationship; if data is in-band, an additional column could embed the subgrid of every row; special case for virtual/infinite scrolling implementation; we challenged the use cases and proposed alternative designs; Grid with Detail component is also a candidate solution | rare / non-feature | ··✓ | |
Grid with Detail | Inherits Grid Export | |||
Collapsable detail section | with any content, using the full width of a row; if data is in-band, an additional column could embed the detail section of every row, which would be any markup; special case for virtual/infinite scrolling implementation | infrequent / important | ··✓ | |
Editable Grid | Inherits Grid Export | |||
Mutation context | Ability to express whether updates are saved/canceled immediately, or batched in a transaction; in this last case, Save/Cancel buttons should allow to transact/dismiss the batch of updates | frequent / important | ·~~ | |
Edition of cell | Edit content of a single cell; save or cancel the update, on Enter/blur or Esc | frequent / important | ·✓✓ | |
Row deletion | Deletion of a single row; confirm/cancel deletion | frequent / important | ·✓✓ | |
Highlight updates | In transactional mutation context, visually identify the cells contents that were updated, but not yet transacted; useful visual aid, improves editing experience and data quality | frequent / important | ··· | |
Actionable Grid | Inherits Editable Grid | |||
Multi-selection of rows | Manual selection of multiple rows, consecutive and/or non-consecutive, in order to apply an action on all of them; note that the selection of visually consecutive rows might actually lead to an actual non-consecutive selection of rows, when a filter is in effect at time of selection and later removed | frequent | ·✓✓ | |
Persistent multi-selection | Multiple selection should be remembered when applying/removing a filter — that is, rows should remain selected, even when they would be masked by a filter in effect | frequent | ·✓✓ | |
Deletion of selected rows | Delete the selected rows; confirm/cancel the deletion, if mutation context is immediate, otherwise delete without confirmation | infrequent | ·✓✓ | |
Start activity with selected rows | Activity over the selected rows, either in place (see Delete rows feature or Bulk Editable Grid component below), or in subsequent applicative workflow; requires ability to retrieve the selected rows from the application context; consider case where selected rows might be filtered out and masked, when user starts the activity | infrequent | ·✓✓ | |
Search | Plain text search in the grid, highlighting the results; allows to visually scan the rows and eventually manually add some of them to the multiselection; no need to add them to the selection directly, this can be achieved with filtering and multi-selection of consecutive rows | infrequent / nice-to-have | ··· | |
Bulk Editable Grid | Inherits Actionable Grid | |||
Edit selected rows | Edit any cell and override the values of the same updated column in every selected row; multiple columns could be edited in turn. Might be implemented as an additional row, appearing below/on top of the bulk editable grid; this additional row would contain the same set of columns, either initially empty, or containing the value that would be found identical in every row. | frequent / important | ·✓· | |
Edit selected column | Update the value of every visible row of a selected column — that is, while ignoring rows that would be masked by a filter in effect — with a new value, at once. Common use case, similar to: i. search/replace in a column (search is handled with filtering); ii. the edition of selected rows, but without need to select every row first. | infrequent / nice-to-have | ·~· | |
Paste from Excel | Ability to copy & paste cells from an Excel document into the grid, starting at current highlighted row. Feature available in a Silverlight grid component and part of a clever workflow: user would copy & paste of selected rows of the grid into Excel document, update the contents in Excel and copy & paste the result back to the grid. Could easily be challenged, because of the risk of massive errors in case of a row offset, and accomplished in other ways in the grid / or with ad-hoc applicative features. | rare / nice-to-have | ··· |