Skip to content

Collection data component

Vadym edited this page Nov 5, 2021 · 6 revisions

Collection data components allow to work with list of values and should supports CRUD for its childs. This components can be described using next properties:

  • binding - path to data in data tree to organize two-directional data binding to work with this value
  • renderer - control to be used to draw this component. It is optional parameter. When renderer is not specified - component would be created in memory
  • filters - list of filter criterias to filtrate data scope and works with subset only. This allows to create many list components which works with same data, but have its own scope
  • sort - define sort criteria for input data (ASC or DESC). When not specified - ASC is used, so manipulation with input data. If DESC sort criteria - the input list is reversed.

Component declaration example

{
  binding: 'countries',
  ui: { label: 'Countries' },
  filters: [{
    by: 'name',
    comparator: 'contains',
    val: 'york'
  }],
  sort: 'DESC'
}

Component structure

Collection component can be represented as regular table or repeater with support editing entire content so should support declaring this features.

First of all collection component should support defining its table representation as list of columns for table or single column for repeater. Single column should be described as regular component declaration based on data type this column is applied too.

This column declaration can be used also to create editor component for creating new or editing existence collection items.

Component columns declaration example

{
  binding: 'countries',
  ui: { label: 'Countries' },
  items: [
    { binding: 'name' }, 
    { binding: 'isActive', type: 'bool' }
  ]
}

This declaration describes table component with 2 column and editor to edit or create data.