.. _solid-table:
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.

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

``fields``
~~~~~~~~~~
   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>


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


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