feat(table): Adding sortable demo - front-1304

src/ec/packages/ec-component-table/README.md

@@ -9,6 +9,7 @@ npm install --save @ecl-twig/ec-component-table
 ### Parameters:
 
 - **"zebra"** (boolean) (default: false))
+- **"sortable"** (boolean) (default: false)
 - **"headers"** (array) (default: [])
   - "label" (string or array of string)
   - "colspan" (string) (default: ''),

src/ec/packages/ec-component-table/__snapshots__/table.test.js.snap

@@ -1240,7 +1240,7 @@ exports[`EC - Table Multi renders correctly 1`] = `
           European Commission
         </td>
         <td
-          class="ecl-table__cell"
+          class="ecl-table__cell ecl-table__cell--group"
           data-ecl-table-header="Type of contract"
         >
           Permanent official
@@ -1275,7 +1275,7 @@ exports[`EC - Table Multi renders correctly 1`] = `
           European Commission
         </td>
         <td
-          class="ecl-table__cell"
+          class="ecl-table__cell ecl-table__cell--group"
           data-ecl-table-header="Type of contract"
         >
           Permanent official
@@ -1310,7 +1310,7 @@ exports[`EC - Table Multi renders correctly 1`] = `
           European Commission
         </td>
         <td
-          class="ecl-table__cell"
+          class="ecl-table__cell ecl-table__cell--group"
           data-ecl-table-header="Type of contract"
         >
           Permanent official
@@ -1345,7 +1345,7 @@ exports[`EC - Table Multi renders correctly 1`] = `
           European Commission
         </td>
         <td
-          class="ecl-table__cell"
+          class="ecl-table__cell ecl-table__cell--group"
           data-ecl-table-header="Type of contract"
         >
           Permanent official
@@ -1379,8 +1379,255 @@ exports[`EC - Table Multi renders correctly 1`] = `
         >
           EU-LISA
         </td>
+        <td
+          class="ecl-table__cell ecl-table__cell--group"
+          data-ecl-table-header="Type of contract"
+        >
+          Seconded National Expert (SNE)
+        </td>
+        <td
+          class="ecl-table__cell"
+          data-ecl-table-header="Location"
+        >
+          Vigo (Spain)
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</test>
+`;
+
+exports[`EC - Table Sort table renders correctly 1`] = `
+<test>
+  <table
+    class="ecl-table"
+    data-ecl-auto-init="Table"
+    data-ecl-table=""
+  >
+    <thead
+      class="ecl-table__head"
+    >
+      <tr
+        class="ecl-table__row"
+      >
+        <th
+          class="ecl-table__header"
+          data-ecl-table-sort-toggle=""
+        >
+          Job title
+        </th>
+        <th
+          class="ecl-table__header"
+          data-ecl-table-sort-toggle=""
+        >
+          EFSI finance approved by EIB
+        </th>
+        <th
+          class="ecl-table__header"
+          colspan="2"
+        >
+          Extra information
+        </th>
+        <th
+          class="ecl-table__header"
+          data-ecl-table-sort-toggle=""
+        >
+          Location
+        </th>
+      </tr>
+      <tr
+        class="ecl-table__row"
+      >
+        <th
+          class="ecl-table__header"
+        />
+        <th
+          class="ecl-table__header"
+        />
+        <th
+          class="ecl-table__header"
+          data-ecl-table-sort-toggle=""
+        >
+          Organization
+        </th>
+        <th
+          class="ecl-table__header"
+          data-ecl-table-sort-toggle=""
+        >
+          Type of contract
+        </th>
+        <th
+          class="ecl-table__header"
+        />
+      </tr>
+    </thead>
+    <tbody
+      class="ecl-table__body"
+    >
+      <tr
+        class="ecl-table__row"
+      >
+        <td
+          class="ecl-table__cell"
+          data-ecl-table-header="Job title"
+        >
+          Administators in Competition Law
+        </td>
         <td
           class="ecl-table__cell"
+          data-ecl-table-header="EFSI finance approved by EIB"
+        >
+          AD7
+        </td>
+        <td
+          class="ecl-table__cell ecl-table__cell--group"
+          data-ecl-table-header="Organization"
+          data-ecl-table-header-group="Extra information"
+        >
+          European Commission
+        </td>
+        <td
+          class="ecl-table__cell ecl-table__cell--group"
+          data-ecl-table-header="Type of contract"
+        >
+          Permanent official
+        </td>
+        <td
+          class="ecl-table__cell"
+          data-ecl-table-header="Location"
+        >
+          Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France)
+        </td>
+      </tr>
+      <tr
+        class="ecl-table__row"
+      >
+        <td
+          class="ecl-table__cell"
+          data-ecl-table-header="Job title"
+        >
+          Administators in Economic and Monetary Union Law
+        </td>
+        <td
+          class="ecl-table__cell"
+          data-ecl-table-header="EFSI finance approved by EIB"
+        >
+          AD7
+        </td>
+        <td
+          class="ecl-table__cell ecl-table__cell--group"
+          data-ecl-table-header="Organization"
+          data-ecl-table-header-group="Extra information"
+        >
+          European Commission
+        </td>
+        <td
+          class="ecl-table__cell ecl-table__cell--group"
+          data-ecl-table-header="Type of contract"
+        >
+          Permanent official
+        </td>
+        <td
+          class="ecl-table__cell"
+          data-ecl-table-header="Location"
+        >
+          Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France)
+        </td>
+      </tr>
+      <tr
+        class="ecl-table__row"
+      >
+        <td
+          class="ecl-table__cell"
+          data-ecl-table-header="Job title"
+        >
+          Administators in Financial rules appliable to the EU budget
+        </td>
+        <td
+          class="ecl-table__cell"
+          data-ecl-table-header="EFSI finance approved by EIB"
+        >
+          AD7
+        </td>
+        <td
+          class="ecl-table__cell ecl-table__cell--group"
+          data-ecl-table-header="Organization"
+          data-ecl-table-header-group="Extra information"
+        >
+          European Commission
+        </td>
+        <td
+          class="ecl-table__cell ecl-table__cell--group"
+          data-ecl-table-header="Type of contract"
+        >
+          Permanent official
+        </td>
+        <td
+          class="ecl-table__cell"
+          data-ecl-table-header="Location"
+        >
+          Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France)
+        </td>
+      </tr>
+      <tr
+        class="ecl-table__row"
+      >
+        <td
+          class="ecl-table__cell"
+          data-ecl-table-header="Job title"
+        >
+          Corporate Support Officer
+        </td>
+        <td
+          class="ecl-table__cell"
+          data-ecl-table-header="EFSI finance approved by EIB"
+        >
+          FG IV
+        </td>
+        <td
+          class="ecl-table__cell ecl-table__cell--group"
+          data-ecl-table-header="Organization"
+          data-ecl-table-header-group="Extra information"
+        >
+          European Commission
+        </td>
+        <td
+          class="ecl-table__cell ecl-table__cell--group"
+          data-ecl-table-header="Type of contract"
+        >
+          Permanent official
+        </td>
+        <td
+          class="ecl-table__cell"
+          data-ecl-table-header="Location"
+        >
+          Prague (Czech Republic)
+        </td>
+      </tr>
+      <tr
+        class="ecl-table__row"
+      >
+        <td
+          class="ecl-table__cell"
+          data-ecl-table-header="Job title"
+        >
+          Policy Officer - Clean Energy For All Europeans
+        </td>
+        <td
+          class="ecl-table__cell"
+          data-ecl-table-header="EFSI finance approved by EIB"
+        >
+          FG II, FG III, FG IV
+        </td>
+        <td
+          class="ecl-table__cell ecl-table__cell--group"
+          data-ecl-table-header="Organization"
+          data-ecl-table-header-group="Extra information"
+        >
+          EU-LISA
+        </td>
+        <td
+          class="ecl-table__cell ecl-table__cell--group"
           data-ecl-table-header="Type of contract"
         >
           Seconded National Expert (SNE)

src/ec/packages/ec-component-table/demo/data--default.js

@@ -0,0 +1,3 @@
+import specs from '@ecl/ec-specs-table/demo/data--default';
+
+export default specs;

src/ec/packages/ec-component-table/demo/data--multi.js

@@ -0,0 +1,3 @@
+import specs from '@ecl/ec-specs-table/demo/data--multi';
+
+export default specs;

src/ec/packages/ec-component-table/demo/data--sort-table.js

@@ -0,0 +1,5 @@
+import specs from '@ecl/ec-specs-table/demo/data--multi';
+
+const data = { ...specs, sortable: true };
+
+export default data;

src/ec/packages/ec-component-table/ecl-table.html.twig

@@ -1,6 +1,7 @@
 {% spaceless %}
 {#
   Parameters:
+  - "sortable" (boolean) (default: false)
   - "zebra" (boolean) (default: false))
   - "headers" (array) (default: []): format: [
       {
@@ -46,6 +47,7 @@
 {% set _row_css_class = 'ecl-table__row' %}
 {% set _row_extra_attributes = '' %}
 {% set _headers = headers|default([]) %}
+{% set _sortable = sortable|default(false) %}
 {% set _rows = rows|default([]) %}
 {% set _zebra = zebra|default(false) %}
 {% set _compliance = _compliance_|default(false) %}
@@ -56,6 +58,13 @@
   {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
 {% endif %}
 
+{% if _sortable %}
+  {% set extra_attributes = extra_attributes|default([])|merge([
+    { name: 'data-ecl-table' },
+    { name: 'data-ecl-auto-init', value: 'Table' }
+  ]) %}
+{% endif %}
+
 {% if _zebra %}
   {% set _css_class = _css_class ~ ' ' ~ _zebra_css_class %}
 {% endif %}
@@ -77,8 +86,15 @@
      {% for header in _headers %}
        <tr class="{{ _row_css_class }}">
         {% for cell in header %}
-          {% set _colspan_attribute = cell.colspan is not empty ? 'colspan="' ~ cell.colspan ~ '"' : '' %}
-          <th {{ _colspan_attribute|raw }} class="{{ _header_css_class }}">{{ cell.label }}</th>
+          {% set _heading_attribute = '' %}
+          {% if cell.colspan is not empty %}
+            {% set _heading_attribute = cell.colspan is not empty ? 'colspan="' ~ cell.colspan ~ '"' : '' %}
+          {% else %}
+            {% if cell.label is not empty and _sortable %}
+              {% set _heading_attribute = 'data-ecl-table-sort-toggle' %}
+            {% endif %}
+          {% endif %}
+          <th {{ _heading_attribute|raw }} class="{{ _header_css_class }}">{{ cell.label }}</th>
         {% endfor %}
       </tr>
     {% endfor %}
@@ -95,8 +111,10 @@
         {% for cell in row %}
           {% set _cell_css_class = 'ecl-table__cell' %}
           {% set _cell_attribute = cell['data-ecl-table-header'] is not empty ? 'data-ecl-table-header="' ~ cell['data-ecl-table-header'] ~ '"' : '' %}
-          {% if cell.group and cell['data-ecl-table-header-group'] is defined and cell['data-ecl-table-header-group'] is not empty %}
-            {% set _cell_attribute = _cell_attribute ~ ' data-ecl-table-header-group="' ~ cell['data-ecl-table-header-group'] ~ '"' %}
+          {% if cell.group %}
+            {% if cell['data-ecl-table-header-group'] is defined and cell['data-ecl-table-header-group'] is not empty %}
+              {% set _cell_attribute = _cell_attribute ~ ' data-ecl-table-header-group="' ~ cell['data-ecl-table-header-group'] ~ '"' %}
+            {% endif %}
             {% set _cell_css_class = _cell_css_class ~ ' ' ~ _cell_header_group_class %}
           {% endif %}
           <td {{ _cell_attribute|raw }} class="{{ _cell_css_class }}" >{{ cell.label|raw }}</td>

src/ec/packages/ec-component-table/package.json

@@ -2,11 +2,12 @@
   "name": "@ecl-twig/ec-component-table",
   "author": "European Commission",
   "license": "EUPL-1.1",
-  "version": "2.30.0",
+  "version": "2.31.0",
   "description": "ECL-Twig Table",
   "devDependencies": {
-    "@ecl/ec-component-table": "2.30.0",
-    "@ecl/ec-specs-table": "2.30.0"
+    "@ecl/ec-component-table": "2.31.0",
+    "@ecl/ec-specs-table": "2.31.0",
+    "@ecl/eu-specs-table": "2.31.0"
   },
   "publishConfig": {
     "access": "public"