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:
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>