Table - Components

Default table

Table caption
Job title	EFSI finance approved by EIB	Location	Organization	Type of contract
Administators in Competition Law	AD7	Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France)	European Commission	Permanent official
Administators in Economic and Monetary Union Law	AD7	Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France)	European Commission	Permanent official
Administators in Financial rules appliable to the EU budget	AD7	Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France)	European Commission	Permanent official
Corporate Support Officer	FG IV	Prague (Czech Republic)	European Commission	Permanent official
Policy Officer - Clean Energy For All Europeans	FG II, FG III, FG IV	Vigo (Spain)	EU-LISA	Seconded National Expert (SNE)

Fullscreen

<div class="ecl-table-responsive">
  <table class="ecl-table">
    <caption class="ecl-table__caption">Table caption</caption>
    <thead class="ecl-table__head">
      <tr class="ecl-table__row">
        <th scope="col" class="ecl-table__header">Job title</th>
        <th scope="col" class="ecl-table__header">EFSI finance approved by EIB</th>
        <th scope="col" class="ecl-table__header">Location</th>
        <th scope="col" class="ecl-table__header">Organization</th>
        <th scope="col" class="ecl-table__header">Type of contract</th>
      </tr>
    </thead>
    <tbody class="ecl-table__body">
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Administators in Competition Law</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">AD7</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Brussels (Belgium), Luxembourg (Luxembourg),
          Strasbourg (France)</td>
        <td data-ecl-table-header="Organization" class="ecl-table__cell">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell">Permanent official</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Administators in Economic and Monetary Union
          Law</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">AD7</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Brussels (Belgium), Luxembourg (Luxembourg),
          Strasbourg (France)</td>
        <td data-ecl-table-header="Organization" class="ecl-table__cell">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell">Permanent official</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Administators in Financial rules appliable to
          the EU budget</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">AD7</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Brussels (Belgium), Luxembourg (Luxembourg),
          Strasbourg (France)</td>
        <td data-ecl-table-header="Organization" class="ecl-table__cell">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell">Permanent official</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Corporate Support Officer</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">FG IV</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Prague (Czech Republic)</td>
        <td data-ecl-table-header="Organization" class="ecl-table__cell">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell">Permanent official</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Policy Officer - Clean Energy For All
          Europeans</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">FG II, FG
          III, FG IV</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Vigo (Spain)</td>
        <td data-ecl-table-header="Organization" class="ecl-table__cell">EU-LISA</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell">Seconded National Expert (SNE)
        </td>
      </tr>
    </tbody>
  </table>
</div>

Try it yourself on the playground

Playground

Zebra table

Table caption
Job title	EFSI finance approved by EIB	Location	Organization	Type of contract
Administators in Competition Law	AD7	Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France)	European Commission	Permanent official
Administators in Economic and Monetary Union Law	AD7	Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France)	European Commission	Permanent official
Administators in Financial rules appliable to the EU budget	AD7	Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France)	European Commission	Permanent official
Corporate Support Officer	FG IV	Prague (Czech Republic)	European Commission	Permanent official
Policy Officer - Clean Energy For All Europeans	FG II, FG III, FG IV	Vigo (Spain)	EU-LISA	Seconded National Expert (SNE)

Fullscreen

<div class="ecl-table-responsive">
  <table class="ecl-table ecl-table--zebra">
    <caption class="ecl-table__caption">Table caption</caption>
    <thead class="ecl-table__head">
      <tr class="ecl-table__row">
        <th scope="col" class="ecl-table__header">Job title</th>
        <th scope="col" class="ecl-table__header">EFSI finance approved by EIB</th>
        <th scope="col" class="ecl-table__header">Location</th>
        <th scope="col" class="ecl-table__header">Organization</th>
        <th scope="col" class="ecl-table__header">Type of contract</th>
      </tr>
    </thead>
    <tbody class="ecl-table__body">
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Administators in Competition Law</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">AD7</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Brussels (Belgium), Luxembourg (Luxembourg),
          Strasbourg (France)</td>
        <td data-ecl-table-header="Organization" class="ecl-table__cell">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell">Permanent official</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Administators in Economic and Monetary Union
          Law</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">AD7</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Brussels (Belgium), Luxembourg (Luxembourg),
          Strasbourg (France)</td>
        <td data-ecl-table-header="Organization" class="ecl-table__cell">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell">Permanent official</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Administators in Financial rules appliable to
          the EU budget</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">AD7</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Brussels (Belgium), Luxembourg (Luxembourg),
          Strasbourg (France)</td>
        <td data-ecl-table-header="Organization" class="ecl-table__cell">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell">Permanent official</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Corporate Support Officer</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">FG IV</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Prague (Czech Republic)</td>
        <td data-ecl-table-header="Organization" class="ecl-table__cell">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell">Permanent official</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Policy Officer - Clean Energy For All
          Europeans</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">FG II, FG
          III, FG IV</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Vigo (Spain)</td>
        <td data-ecl-table-header="Organization" class="ecl-table__cell">EU-LISA</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell">Seconded National Expert (SNE)
        </td>
      </tr>
    </tbody>
  </table>
</div>

Try it yourself on the playground

Playground

Multi header table

Table caption
Job title	EFSI finance approved by EIB	Extra information		Location
Job title	EFSI finance approved by EIB	Organization	Type of contract	Location
Administators in Competition Law	AD7	European Commission	Permanent official	Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France)
Administators in Economic and Monetary Union Law	AD7	European Commission	Permanent official	Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France)
Administators in Financial rules appliable to the EU budget	AD7	European Commission	Permanent official	Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France)
Corporate Support Officer	FG IV	European Commission	Permanent official	Prague (Czech Republic)
Policy Officer - Clean Energy For All Europeans	FG II, FG III, FG IV	EU-LISA	Seconded National Expert (SNE)	Vigo (Spain)

Fullscreen

<div class="ecl-table-responsive">
  <table class="ecl-table">
    <caption class="ecl-table__caption">Table caption</caption>
    <thead class="ecl-table__head">
      <tr class="ecl-table__row">
        <th rowspan="2" scope="col" class="ecl-table__header">Job title</th>
        <th rowspan="2" scope="col" class="ecl-table__header">EFSI finance approved by EIB</th>
        <th colspan="2" scope="colgroup" class="ecl-table__header">Extra information</th>
        <th rowspan="2" scope="col" class="ecl-table__header">Location</th>
      </tr>
      <tr class="ecl-table__row">
        <th scope="col" class="ecl-table__header">Organization</th>
        <th scope="col" class="ecl-table__header">Type of contract</th>
      </tr>
    </thead>
    <tbody class="ecl-table__body">
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Administators in Competition Law</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">AD7</td>
        <td data-ecl-table-header="Organization" data-ecl-table-header-group="Extra information"
          class="ecl-table__cell ecl-table__cell--group">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell ecl-table__cell--group">Permanent
          official</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Brussels (Belgium), Luxembourg (Luxembourg),
          Strasbourg (France)</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Administators in Economic and Monetary Union
          Law</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">AD7</td>
        <td data-ecl-table-header="Organization" data-ecl-table-header-group="Extra information"
          class="ecl-table__cell ecl-table__cell--group">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell ecl-table__cell--group">Permanent
          official</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Brussels (Belgium), Luxembourg (Luxembourg),
          Strasbourg (France)</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Administators in Financial rules appliable to
          the EU budget</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">AD7</td>
        <td data-ecl-table-header="Organization" data-ecl-table-header-group="Extra information"
          class="ecl-table__cell ecl-table__cell--group">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell ecl-table__cell--group">Permanent
          official</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Brussels (Belgium), Luxembourg (Luxembourg),
          Strasbourg (France)</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Corporate Support Officer</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">FG IV</td>
        <td data-ecl-table-header="Organization" data-ecl-table-header-group="Extra information"
          class="ecl-table__cell ecl-table__cell--group">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell ecl-table__cell--group">Permanent
          official</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Prague (Czech Republic)</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Policy Officer - Clean Energy For All
          Europeans</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">FG II, FG
          III, FG IV</td>
        <td data-ecl-table-header="Organization" data-ecl-table-header-group="Extra information"
          class="ecl-table__cell ecl-table__cell--group">EU-LISA</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell ecl-table__cell--group">Seconded
          National Expert (SNE)</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Vigo (Spain)</td>
      </tr>
    </tbody>
  </table>
</div>

Try it yourself on the playground

Playground

Sort table

Fullscreen

<div class="ecl-table-responsive">
  <table class="ecl-table" data-ecl-table data-ecl-auto-init="Table" data-ecl-table-sort-label="Sort table">
    <caption class="ecl-table__caption">Table caption</caption>
    <thead class="ecl-table__head">
      <tr class="ecl-table__row">
        <th rowspan="2" data-ecl-table-sort-toggle scope="col" class="ecl-table__header">Job title</th>
        <th rowspan="2" data-ecl-table-sort-toggle scope="col" class="ecl-table__header">EFSI finance approved by EIB
        </th>
        <th colspan="2" scope="colgroup" class="ecl-table__header">Extra information</th>
        <th rowspan="2" data-ecl-table-sort-toggle scope="col" class="ecl-table__header">Location</th>
      </tr>
      <tr class="ecl-table__row">
        <th data-ecl-table-sort-toggle scope="col" class="ecl-table__header">Organization</th>
        <th data-ecl-table-sort-toggle scope="col" class="ecl-table__header">Type of contract</th>
      </tr>
    </thead>
    <tbody class="ecl-table__body">
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Administators in Competition Law</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">AD7</td>
        <td data-ecl-table-header="Organization" data-ecl-table-header-group="Extra information"
          class="ecl-table__cell ecl-table__cell--group">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell ecl-table__cell--group">Permanent
          official</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Brussels (Belgium), Luxembourg (Luxembourg),
          Strasbourg (France)</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Administators in Economic and Monetary Union
          Law</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">AD7</td>
        <td data-ecl-table-header="Organization" data-ecl-table-header-group="Extra information"
          class="ecl-table__cell ecl-table__cell--group">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell ecl-table__cell--group">Permanent
          official</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Brussels (Belgium), Luxembourg (Luxembourg),
          Strasbourg (France)</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Administators in Financial rules appliable to
          the EU budget</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">AD7</td>
        <td data-ecl-table-header="Organization" data-ecl-table-header-group="Extra information"
          class="ecl-table__cell ecl-table__cell--group">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell ecl-table__cell--group">Permanent
          official</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Brussels (Belgium), Luxembourg (Luxembourg),
          Strasbourg (France)</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Corporate Support Officer</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">FG IV</td>
        <td data-ecl-table-header="Organization" data-ecl-table-header-group="Extra information"
          class="ecl-table__cell ecl-table__cell--group">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell ecl-table__cell--group">Permanent
          official</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Prague (Czech Republic)</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Policy Officer - Clean Energy For All
          Europeans</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">FG II, FG
          III, FG IV</td>
        <td data-ecl-table-header="Organization" data-ecl-table-header-group="Extra information"
          class="ecl-table__cell ecl-table__cell--group">EU-LISA</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell ecl-table__cell--group">Seconded
          National Expert (SNE)</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Vigo (Spain)</td>
      </tr>
    </tbody>
  </table>
</div>

Try it yourself on the playground

Playground

Enhanced mobile table

Enhanced tables offers a more user friendly display on mobile. This is the default display of ECL tables, but you can turn this behaviour off by using the parameter simple.

To be able to use the enhanced table without issue, your table should follow these rules:

have a table header, containing the <th> tags
have a data-ecl-table-header attribute filled for the other cells (a parameter is provided in the twig template) You can find a working data set and markup in the example below.

Note: enhanced tables works for all the table variants listed here, but without sorting.

Fullscreen

<div class="ecl-table-responsive">
  <table class="ecl-table">
    <caption class="ecl-table__caption">Table caption</caption>
    <thead class="ecl-table__head">
      <tr class="ecl-table__row">
        <th scope="col" class="ecl-table__header">Job title</th>
        <th scope="col" class="ecl-table__header">EFSI finance approved by EIB</th>
        <th scope="col" class="ecl-table__header">Location</th>
        <th scope="col" class="ecl-table__header">Organization</th>
        <th scope="col" class="ecl-table__header">Type of contract</th>
      </tr>
    </thead>
    <tbody class="ecl-table__body">
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Administators in Competition Law</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">AD7</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Brussels (Belgium), Luxembourg (Luxembourg),
          Strasbourg (France)</td>
        <td data-ecl-table-header="Organization" class="ecl-table__cell">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell">Permanent official</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Administators in Economic and Monetary Union
          Law</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">AD7</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Brussels (Belgium), Luxembourg (Luxembourg),
          Strasbourg (France)</td>
        <td data-ecl-table-header="Organization" class="ecl-table__cell">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell">Permanent official</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Administators in Financial rules appliable to
          the EU budget</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">AD7</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Brussels (Belgium), Luxembourg (Luxembourg),
          Strasbourg (France)</td>
        <td data-ecl-table-header="Organization" class="ecl-table__cell">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell">Permanent official</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Corporate Support Officer</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">FG IV</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Prague (Czech Republic)</td>
        <td data-ecl-table-header="Organization" class="ecl-table__cell">European Commission</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell">Permanent official</td>
      </tr>
      <tr class="ecl-table__row">
        <td data-ecl-table-header="Job title" class="ecl-table__cell">Policy Officer - Clean Energy For All
          Europeans</td>
        <td data-ecl-table-header="EFSI finance approved by EIB" class="ecl-table__cell">FG II, FG
          III, FG IV</td>
        <td data-ecl-table-header="Location" class="ecl-table__cell">Vigo (Spain)</td>
        <td data-ecl-table-header="Organization" class="ecl-table__cell">EU-LISA</td>
        <td data-ecl-table-header="Type of contract" class="ecl-table__cell">Seconded National Expert (SNE)
        </td>
      </tr>
    </tbody>
  </table>
</div>

Try it yourself on the playground

Playground