Newer
Older
*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.
.. code:: html
<solid-table
data-src="https://server/users/"
fields="first_name, last_name"
></solid-table>
Mixins
------
This component uses the following mixins:
* :ref:`counter-mixin <counter-mixin>`
* :ref:`federation-mixin <federation-mixin>`
* :ref:`filter-mixin <filter-mixin>`
* :ref:`grouper-mixin <grouper-mixin>`
* :ref:`highlighter-mixin <highlighter-mixin>`
* :ref:`list-mixin <list-mixin>`
* :ref:`paginate-mixin <paginate-mixin>`
* :ref:`required-mixin <required-mixin>`
* :ref:`paginate-mixin <server-pagination-mixin>`
* :ref:`sorter-mixin <sorter-mixin>`
* :ref:`store-mixin <store-mixin>`
* :ref:`widget-mixin <widget-mixin>`
Please check their documentation to know more about their capabilities.
Specific attributes
-------------------
List of fields displayed in the table.
More details on its use below (in **widget-mixin attributes**).
``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:
.. code:: javascript
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:
.. code:: html
<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>
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
Mixin attributes
-----------------
**From counter-mixin :**
.. include:: ../Mixins/counter-mixin.rst
:start-line: 17
**From filter-mixin :**
.. include:: ../Mixins/filter-mixin.rst
:start-line: 18
**From grouper-mixin :**
.. include:: ../Mixins/grouper-mixin.rst
:start-line: 18
**From highlighter-mixin :**
.. include:: ../Mixins/highlighter-mixin.rst
:start-line: 17
**From list-mixin :**
.. include:: ../Mixins/list-mixin.rst
:start-line: 25
**From paginate-mixin :**
.. include:: ../Mixins/paginate-mixin.rst
:start-line: 17
**From required-mixin :**
.. include:: ../Mixins/required-mixin.rst
:start-line: 17
**From sorter-mixin :**
.. include:: ../Mixins/sorter-mixin.rst
:start-line: 17
**From store-mixin :**
.. include:: ../Mixins/store-mixin.rst
:start-line: 21
:end-before: Events
**From widget-mixin :**
.. include:: ../Mixins/widget-mixin.rst
:start-line: 18
By default, the widget used is ``<solid-display-value>``. Cf the
:ref:`Widget <reference>` page for more info.