Menu Icon

Table

A table presents data columns. They let users know what data is/are in data source.

Usage

Columns comes with traceability with data fields on data sources. They show various data fields according to visual apperance. Data are provided with several sources connected by. Data operations can be added with action buttons.

Guidance

  • Tables should indicate data columns.
  • They should be easy readable.
  • Always table columns is in boundaries of Table.
  • Always have a text titles within the table and table column(s).
  • Always map with a datasource.
  • Able to add multiple columns by using + icon near Table component on page tree.

When to use

  • Use Tables to display a bulk of data.

Additional info

  • Consider ordering by any data field to organize Table rows in compliance with any data field on data source.
  • Consider adding filter by using sources of component, page variable, app variable, local storage value, record value, javascript, previous action value, user/session or free text to contain specific data rows from data source on Table.
  • Consider giving row key to configure uniqueness of table row data fields?
  • Consider activating action buttons to use data operations by List.
  • Consider using pagination to set list pages and row numbers on pages.
  • Consider cloning from existing to reuse Table created before.

Variations

  • Connectable data sources are various such as Data Model, SQL, REST or JSON. Table columns are chosen by mapping with data fields on data source.
  • The updatable properties of Tables are title, column headers, selection and size.
  • The updatable behaviours of Tables are bordered, quick search and scrollable.
  • The updatable style features of Tables are margin, padding, size, overflow and css.
  • The updatable style features of Table Title are margin, padding, size, overflow, typography, background, border and css.
  • The updatable style features of Table Columns Headers are margin, padding, size, overflow, typography, background, border, effects and css.
  • The updatable style features of Table Rows are typography, background, border, effects and css.
  • The updatable style features of Table Selected Rows are typography, background, border, effects and css.
  • The usable dynamic properties of Tables are title, bordered, tag, dataSource, hidden and style.
  • The updatable properties of Table Columns are column title, align, width, field mapping and show as.
  • The updatable behaviours of Table Columns are sort and filter.
  • The updatable style features of Table Columns are margin, padding, typography, background, border and css.
  • The updatable style features of Table Column Titles are margin, padding, typography, background, border, effects and css.
  • The usable dynamic properties of Table Columns are local message key, width, hidden and style.

Hints

  • Consider adding filter by using user/session source to list data only created by user.