furo-ui5-table

furo-ui5-table #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-table.js';
exports FuroUi5Table js
exports <furo-ui5-table> custom-element-definition
superclass LitElement
mixes FBP

Summary: Display repeated fields in a table

Description #

furo-ui5-table display entities in a ui5-table

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<furo-ui5-table
 fn-bind-data="--data(*.entities)"
>
 <!-- The column label is evaluated from the specs -->
  <ui5-table-column
    slot="columns"
    field="*.data.fieldname"
  ></ui5-table-column>

  <ui5-table-column
    slot="columns"
    field="*.data.display_name"
  ><span>Custom Title</span></ui5-table-column>

</furo-ui5-table>

Attributes which are taken from ui5-table-column #

field Define the field you want to bind. * is the root of the repeated field.

context Set a context for the type renderer. The default value is cell.

renderer Set a specific renderer component for the column. If not set, the renderer is evaluated from the type of the bound field.

Example #

The default typerenderer context for the cells is cell. You can set the context on the ui5-table-column.

Markup # 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<furo-ui5-table
  fn-bind-data="--collection(*.entities)">
  <!-- The column label is evaluated from the specs -->
  <ui5-table-column
    slot="columns"
    field="*.data.phone_nr"
  ></ui5-table-column> 
  <ui5-table-column
    slot="columns"
    field="*.data.first_name"
  ></ui5-table-column>
  <!-- set a context for the typerenderer -->
  <ui5-table-column
    slot="columns"
    context="celledit"
    field="*.data.first_name"
  ></ui5-table-column>
  <!-- Setting a custom label -->
  <ui5-table-column
    slot="columns"
    field="*.data.name"
  ><span>Custom Title</span></ui5-table-column>
</furo-ui5-table>

<furo-data-object
  type="person.PersonCollection"
  @-object-ready="--collection"
  fn-inject-raw="--response"></furo-data-object>

Attributes and Properties #

mode #

mode string default: 'None'

Defines the mode of the component.

Available options are:

  • MultiSelect
  • SingleSelect
  • None

noDataText #

no-data-text String

Defines the text that will be displayed when there is no data. string

identityPath #

identity-path *

string}

stickyColumnHeader #

sticky-column-header Boolean

Determines whether the column headers remain fixed at the top of the page during vertical scrolling as long as the Web Component is in the viewport.

busy #

busy Boolean

Busy state

Events #

data-loaded #

at-data-loaded → HTMLElement

Fired when the data is loaded into data table. The event detail contains the data table self.

arrow-down-on-last-row #

at-arrow-down-on-last-row → entity

Fired when the ArrowDown is pressed on the last row. The event detail is the original entity of the row

tablerow-selected #

at-tablerow-selected → entity

Fired when the row is selected. The event detail is the original entity of the row.

arrow-up-on-first-row #

at-arrow-up-on-first-row → entity

Fired when the ArrowUp is pressed on the first row. The event detail is the original entity of the row

rows-selected #

at-rows-selected → Array with the selected items

Fired when the row selection in MultiSelect mode was changed

Methods #

bindData #

bindData(data `` ) ⟹ void

`` → fn-bind-data

Bind a repeated data node.

  • data

focus #

focus() ⟹ void

* → fn-focus

Focuses the header of the table



focusLast #

focusLast() ⟹ void

* → fn-focus-last

Focuses the last row.



focusFirst #

focusFirst() ⟹ void

* → fn-focus-first

Focuses the first row.



_initRepeatTemplate #

_initRepeatTemplate(fieldPaths `` ) ⟹ void

`` → fn–init-repeat-template

  • fieldPaths

setBusy #

setBusy() ⟹ void

* → fn-set-busy

setBusy Sets the busy state



unsetBusy #

unsetBusy() ⟹ void

* → fn-unset-busy

unsetBusy Unsets the busy state