Elemental Behavioral Layout

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 ···