solid-table

Available from version 0.16

Receives the URL of a resource or of a container of resources via its data-src attribute, and displays it in a table. Each resource is a line (<tr>) and each field is a cell (<td>).

Like for the solid-display, custom widgets can be specified for each field. Filters and searching capabilities can be easily added to interact with the list of data being displayed.

<solid-table
   data-src="https://server/users/"
   fields="first_name, last_name"
></solid-table>

Mixins

This component uses the following mixins:

• required-mixin

• counter-mixin

• federation-mixin

• filter-mixin

• grouper-mixin

• highlighter-mixin

• list-mixin

• paginate-mixin

• sorter-mixin

• store-mixin

• widget-mixin

Please check their documentation to know more about their capabilities.

Attributes

fields

By default, all displayed fields are direct children of <solid-display>. Make sure you don’t give your set the same name as a field as it would result in an infinite loop.

header

If defined, adds a header line at the top of the table. You can customize each header by setting a label-[field] attribute.

selectable

If defined, adds checkboxes at the beginning of each line. If the header attribute is defined, a checkbox will also be added to the headline to select/unselect all the lines.

You have access to the selected lines in Javascript, like this:

document.querySelector(‘solid-table’).component.selectedLines // returns [ “resourceId1”, “resourceId2” ]

editable-[field]

Makes a cell editable by creating a solid-form in the cell. This form will be saved automatically when a change is detected.

You can customize the attributes of the form by setting them like this:

<solid-table

data-src=”https://server/users/” fields=”first_name” editable-first_name widget-first_name=”solid-form-placeholder-text” placeholder-first_name=”Your First Name”

></solid-table>

Widgets

By default, the widget used is <solid-display-value>. Cf the Widget page for more info.