furo-ui5-filtered-table #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-views/furo-ui5-filtered-table.js';
exports FuroUi5FilteredTable js
exports <furo-ui5-filtered-table> custom-element-definition
extends /src/furo-ui5-table.js
superclass FuroUi5Table

Summary: table with flexible columns

Description #

furo-ui5-filtered-table is a table which work with furo-ui5-views. It accepts field orders and a set of visible fields.

It works like a furo-ui5-table but has the ability to reorder the columns. The only action you have to take is to set the id attribute on the ui5-table-column. The id must match to the field_name attribute on the table_settings.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

          <furo-ui5-filtered-table*
            fn-bind-data="--collectionDao(*.entities)"
            fn-set-columns="|--setColumns"
          >
            <ui5-table-column
              slot="columns"
              field="*.data.id"
              id="id"
              min-width="650"
              demand-popin
              popin-text="id"
              ><span>id</span></ui5-table-column
            >
            <ui5-table-column
              slot="columns"
              field="*.data.display_name"
              id="display_name"
              min-width="400"
              demand-popin
              popin-text="display_name"
              ><span>display_name</span></ui5-table-column
            >

Example #

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 #

setOrderBy #

setOrderBy(sort `` ) ⟹ void

`` → fn-set-order-by

This is only used to set the order icons on the table headers. You have to use a furo-ui5-views-column-header in the header slot for this.

1
2
3
4
5
6
7

<ui5-table-column
              slot="columns"
              field="*.nr"
              id="nr"
              popin-text="${i18n.t('activity_nr')}"
              ><furo-ui5-views-column-header><span>${i18n.t('activity_nr')}</span></furo-ui5-views-column-header>
              </ui5-table-column>

The value comes from the event order-by-changed, which is emited by the component furo-ui5-views-table-settings.

• sort
  
  

setColumns #

setColumns(sortedlist `` ) ⟹ void

`` → fn-set-columns

setColumns sets the column order and the visible columns

• sortedlist
  
  

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.

setBusy #

setBusy() ⟹ void

* → fn-set-busy

setBusy Sets the busy state

unsetBusy #

unsetBusy() ⟹ void

* → fn-unset-busy

unsetBusy Unsets the busy state