Description

• Cristal LiveData Proposal
  • LiveData features
    • Standard Toolbar
    • Standard Actions
    • Reordering Columns
      • By Drag and Drop
      • By menu
      • By using the LiveData properties.
    • Basic Filtering/Sorting columns
      • Enabling the filter
      • Using the quick filter
    • Pagination
      • Traditional Pagination
      • Infinite Scrolling
    • Layouts
      • Table (default)
      • Card (grid) View
    • Panels
      • Properties
      • Advanced sorting and filtering
    • Batch editing
    • Inline editing/adding
    • Grouping

Cristal LiveData Proposal

Example LiveData table on XS with its option menu opened.

LiveData features

These are features supported by LiveData on XS and should be the minimum supported by on Cristal.

Standard Toolbar

The toolbar is a grouping mechanism to gather most actions that are done globally in LiveData, meaning things that are not done "per line".

Some of the actions described here are:

• New, for tables that allow adding new items to itself
• Table/Grid views, and possibly other types of views in the future
• Search
• Advanced Filtering
• Advanced Sorting
• Properties

Example toolbar featuring a "New" button.

Example toolbar without a "New" button.

Standard Actions

Frequently livedata items will have certain actions that can be performed on them (delete, Rights, rename, etc).

For this purpose, this proposal adds a standard "More" button at the beginning of each line. This button should be only visible on mouse over, or focus when the line is highlighted by keyboard command.

The buttons should show all actions that can be performed on the item.

Reordering Columns

By Drag and Drop

• Initial state of the table

• The user drag the mouse over the column that will be moved and hold click.

• The user starts moving the column to its desired location,
• The movement of the column should be limited to the X axis.
• When reaching a drop point, the blue indicator should appear, telling the user that this is the position that the dragged column will take.

• The user let go of the column and reorder is complete.

By menu

AS an accessibility option, and for users on mobile the reordering can be initiated by the column menu. Inside the "Move" option

When opening the move menu there are two choices to where to move the column. 

For subsequent moves, the user will need to go through the process again.

By using the LiveData properties.

Each column can also be moved using the LiveData properties, by drag and drop.

Basic Filtering/Sorting columns

The proposal is to have the filters on each column hidden by default. This is for making the table take as little space as possible and not to overwhelm the users with options and inputs right away. 

Enabling the filter

To enable the filter, the user should go to the column menu, and chose the "Filter" option.

Initial State.

User opens the column menu.

After choosing "Filter" the menu closes and the filter input is shown.

Using the quick filter

Usage of the quick filter is very straight forward, as the user types something in the filter box (3 characters minimum), the column contents should be updated to match the input term.

Initial state

Input focus

Input search term and filtered table

Pagination

Depending on each LiveData configuration we can provide UIs for traditional pagination OR infinite scrolling (via a load more button). When to use each is something that's case by case and decided by the developer.

Traditional Pagination

Example of the middle button showing a list of pages that would be too large to show in the horizontal.

Infinite Scrolling

Example of infinite scrolling initiated by clicking the "load more" button

Layouts

Table (default)

Card (grid) View

Panels

Properties

The properties panel allows enabling and disabling columns, and also reordering them.

Because this panel can have many different items, a quick search is provided.

Advanced sorting and filtering

Sorting and filtering enable the user to create advanced views on each table. They are closed by default but can be shown using the corresponding buttons on the toolbar.

Filter and sorting panels opened

Filter and sorting panels closed

Batch editing

Some tables might have the possibility of bath editing different lines on the table. If live data is configured as such, a new column will be present at the start of the table, enabling multi selection.

When selecting any item, the toolbar will be changed to a "batch" only toolbar showing common actions that can be done on the selected items

At the top of the selection column, a partial checkbox will appear. This checkbox should enable the selection of all items on the first click, deselecting everything on the second click, and return to the partial state on the third click.

Inline editing/adding

Inline Editing allows users to quickly edit data directly within a table cell, without needing to open a separate form, modal, or page.

• User hovers over a cell and clicks to activate editing.
• To include a new item the button "New" on the bottommost line should be used
• The cell switches to an editable state.
• User updates the content and exit the cell.
• The cell updates in place and reflects the new value.

Grouping

Grouping allows users to visually and functionally organize rows by shared attributes or values in one or more columns.

Grouping is initiated by opening the column menu and choosing "Group" on the presented options.

The table re-renders with the grouped sections.