EU System

Tables

Documentation • Demo

Table responsive

Why and how to use this component

Tables show data sets organized in columns and rows.

When to use this component

  • when there is a need to show tables that will be displayed across different devices.
  • when you want to compare one set of values with another.
  • when you want to show how various parts comprise the whole.
  • when you want to understand trends over time for variable(s).
  • when you want to see which values deviate from the norm.
  • when you want to establish (or show) relationship between 2 (or more) variables.

Structure

Headers

In-page data tables always contain a header row, a header column or both, that lists column titles. (required)

Web writing guidelines

  • row/column titles should be kept short and clear.
  • table headers should never be empty. This is particularly of concern for the top-left cell of some tables.

Accessibility guidelines

  • the scope attribute identifies whether a table header is a column header or a row header.
  • the thread element defines the header rows for tables.

Rows and columns

The sets of raw data are displayed in rows below the header row.

If there are 5 rows or more, the rows have alternating colours (zebra stripes).

Do not use this component

  • don’t use data tables to structure content that isn’t part of a data set

Technical information

Tables have a default responsive behaviour which can be progressively enhanced with JavaScript. This dynamic behaviour organizes the tables’ elements in a more accessible way on small screens.

More specifically, content editors can include the ecl-table--responsive class next to the root ecl-table when creating tables from WYSIWYG. This class is a flag for JavaScript behaviours to add improvements in mobile.

The JavaScript enhancements are added manually, only when necessary and when the structure of tables allow correct functioning of the JavaScript.

For example, an enhancement could be expressed in the following. Given the following table.

<thead>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Registration date</th>
    <th scope="col">Email</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td data-th="Name">John Doe</td>
    <td data-th="Registration date">01/01/2016</td>
    <td data-th="Email"><a href="mailto:john.doe@mail.com">john.doe@mail.com</a></td>
  </tr>
  <tr>
    <td data-th="Name">Jane Doe</td>
    <td data-th="Registration date">06/12/2016</td>
    <td data-th="Email"><a href="mailto:jane.doe@mail.com">jane.doe@mail.com</a></td>
  </tr>
  <tr>
    <td data-th="Name">Jack Doe</td>
    <td data-th="Registration date">03/05/2017</td>
    <td data-th="Email"><a href="mailto:jack.doe@mail.com">jack.doe@mail.com</a></td>
  </tr>
</tbody>

When the table is in a small viewport (mobile view), the information about Name of thead > tr > th should be added visually to the tbody > tr > td. The JavaScript behaviour is only responsible for binding these sets of information.

JavaScript behaviour is not responsible for any other visual, cosmetic or generally styling modifications. Responsive behaviour is handled by CSS.

Adding JavaScript behaviours

When using ECL tables, make sure to call the related JavaScript function:

ECL.eclTables();

You can also apply this script on a subset of elements:

ECL.eclTables(elements);

Implementation goals

JavaScript behaviours are meant to be attached manually, in special cases, with conscious choice that information should be displayed correctly after default responsive layout in exceptional user scenarios.

By default, tables should be displayed well only with CSS. Use JavaScript with caution, especially in the administration pages of your CMS.

{#
  Parameters:
    - "headers" (array) (default: []): Each item represents a tr; each item inside represents a th
      [
        [
          {
            - "label" (string)
            - "attributes" (string): extra attributes for this header
          }
        ]
      ]
    - "rows" (array) (default: []): Each item represents a tr; each item inside represents a td
      [
        [
          {
            - "label" (string)
            - "attributes" (string): extra attributes for this cell
          }
        ]
      ]
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-table' with {
  'headers': headers|default([]),
  'rows': rows|default([]),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([])
} only %}
 
/* Default table */
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n        ECL.eclTables();\n      });"
  },
  "headers": [
    [
      {
        "label": "Name"
      },
      {
        "label": "Registration date"
      },
      {
        "label": "Email"
      }
    ]
  ],
  "rows": [
    [
      {
        "label": "John Doe"
      },
      {
        "label": "01/01/2016"
      },
      {
        "label": "<a class=\"ecl-link\" href=\"mailto:john.doe@mail.com\">john.doe@mail.com</a>"
      }
    ],
    [
      {
        "label": "Jane Doe"
      },
      {
        "label": "06/12/2016"
      },
      {
        "label": "<a class=\"ecl-link\" href=\"mailto:jane.doe@mail.com\">jane.doe@mail.com</a>"
      }
    ],
    [
      {
        "label": "Jack Doe"
      },
      {
        "label": "03/05/2017"
      },
      {
        "label": "<a class=\"ecl-link\" href=\"mailto:jack.doe@mail.com\">jack.doe@mail.com</a>"
      }
    ]
  ]
}


/* Default table - enhanced */
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n        ECL.eclTables();\n      });"
  },
  "extra_classes": "ecl-table--responsive",
  "headers": [
    [
      {
        "label": "Name"
      },
      {
        "label": "Registration date"
      },
      {
        "label": "Email"
      }
    ]
  ],
  "rows": [
    [
      {
        "label": "John Doe"
      },
      {
        "label": "01/01/2016"
      },
      {
        "label": "<a class=\"ecl-link\" href=\"mailto:john.doe@mail.com\">john.doe@mail.com</a>"
      }
    ],
    [
      {
        "label": "Jane Doe"
      },
      {
        "label": "06/12/2016"
      },
      {
        "label": "<a class=\"ecl-link\" href=\"mailto:jane.doe@mail.com\">jane.doe@mail.com</a>"
      }
    ],
    [
      {
        "label": "Jack Doe"
      },
      {
        "label": "03/05/2017"
      },
      {
        "label": "<a class=\"ecl-link\" href=\"mailto:jack.doe@mail.com\">jack.doe@mail.com</a>"
      }
    ]
  ]
}


/* Table with empty heading */
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n        ECL.eclTables();\n      });"
  },
  "headers": [
    [
      {
        "label": null
      },
      {
        "label": "Registration date"
      },
      {
        "label": "Email"
      }
    ]
  ],
  "rows": [
    [
      {
        "label": "John Doe"
      },
      {
        "label": "01/01/2016"
      },
      {
        "label": "<a class=\"ecl-link\" href=\"mailto:john.doe@mail.com\">john.doe@mail.com</a>"
      }
    ],
    [
      {
        "label": "Jane Doe"
      },
      {
        "label": "06/12/2016"
      },
      {
        "label": "<a class=\"ecl-link\" href=\"mailto:jane.doe@mail.com\">jane.doe@mail.com</a>"
      }
    ],
    [
      {
        "label": "Jack Doe"
      },
      {
        "label": "03/05/2017"
      },
      {
        "label": "<a class=\"ecl-link\" href=\"mailto:jack.doe@mail.com\">jack.doe@mail.com</a>"
      }
    ]
  ]
}


/* Table with empty heading - enhanced */
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n        ECL.eclTables();\n      });"
  },
  "extra_classes": "ecl-table--responsive",
  "headers": [
    [
      {
        "label": null
      },
      {
        "label": "Registration date"
      },
      {
        "label": "Email"
      }
    ]
  ],
  "rows": [
    [
      {
        "label": "John Doe"
      },
      {
        "label": "01/01/2016"
      },
      {
        "label": "<a class=\"ecl-link\" href=\"mailto:john.doe@mail.com\">john.doe@mail.com</a>"
      }
    ],
    [
      {
        "label": "Jane Doe"
      },
      {
        "label": "06/12/2016"
      },
      {
        "label": "<a class=\"ecl-link\" href=\"mailto:jane.doe@mail.com\">jane.doe@mail.com</a>"
      }
    ],
    [
      {
        "label": "Jack Doe"
      },
      {
        "label": "03/05/2017"
      },
      {
        "label": "<a class=\"ecl-link\" href=\"mailto:jack.doe@mail.com\">jack.doe@mail.com</a>"
      }
    ]
  ]
}


/* Table with colspan */
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n        ECL.eclTables();\n      });"
  },
  "headers": [
    [
      {
        "label": "Name",
        "attributes": "rowspan=\"2\""
      },
      {
        "label": "Registration date",
        "attributes": "rowspan=\"2\""
      },
      {
        "label": "Language",
        "attributes": "colspan=\"3\""
      }
    ],
    [
      {
        "label": "English"
      },
      {
        "label": "French"
      },
      {
        "label": "German"
      }
    ]
  ],
  "rows": [
    [
      {
        "label": "John Doe"
      },
      {
        "label": "01/01/2016"
      },
      {
        "label": "yes"
      },
      {
        "label": "no"
      },
      {
        "label": "no"
      }
    ],
    [
      {
        "label": "Jane Doe"
      },
      {
        "label": "06/12/2016"
      },
      {
        "label": "no"
      },
      {
        "label": "yes"
      },
      {
        "label": "yes"
      }
    ],
    [
      {
        "label": "Jack Doe"
      },
      {
        "label": "03/05/2017"
      },
      {
        "label": "yes"
      },
      {
        "label": "no"
      },
      {
        "label": "no"
      }
    ]
  ]
}


/* Table with colspan - enhanced */
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n        ECL.eclTables();\n      });"
  },
  "extra_classes": "ecl-table--responsive",
  "headers": [
    [
      {
        "label": "Name",
        "attributes": "rowspan=\"2\""
      },
      {
        "label": "Registration date",
        "attributes": "rowspan=\"2\""
      },
      {
        "label": "Language",
        "attributes": "colspan=\"3\""
      }
    ],
    [
      {
        "label": "English"
      },
      {
        "label": "French"
      },
      {
        "label": "German"
      }
    ]
  ],
  "rows": [
    [
      {
        "label": "John Doe"
      },
      {
        "label": "01/01/2016"
      },
      {
        "label": "yes"
      },
      {
        "label": "no"
      },
      {
        "label": "no"
      }
    ],
    [
      {
        "label": "Jane Doe"
      },
      {
        "label": "06/12/2016"
      },
      {
        "label": "no"
      },
      {
        "label": "yes"
      },
      {
        "label": "yes"
      }
    ],
    [
      {
        "label": "Jack Doe"
      },
      {
        "label": "03/05/2017"
      },
      {
        "label": "yes"
      },
      {
        "label": "no"
      },
      {
        "label": "no"
      }
    ]
  ]
}


/* Table with colspan and empty heading */
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n        ECL.eclTables();\n      });"
  },
  "headers": [
    [
      {
        "label": null,
        "attributes": "rowspan=\"2\""
      },
      {
        "label": "Registration date",
        "attributes": "rowspan=\"2\""
      },
      {
        "label": "Language",
        "attributes": "colspan=\"3\""
      }
    ],
    [
      {
        "label": "English"
      },
      {
        "label": "French"
      },
      {
        "label": "German"
      }
    ]
  ],
  "rows": [
    [
      {
        "label": "John Doe"
      },
      {
        "label": "01/01/2016"
      },
      {
        "label": "yes"
      },
      {
        "label": "no"
      },
      {
        "label": "no"
      }
    ],
    [
      {
        "label": "Jane Doe"
      },
      {
        "label": "06/12/2016"
      },
      {
        "label": "no"
      },
      {
        "label": "yes"
      },
      {
        "label": "yes"
      }
    ],
    [
      {
        "label": "Jack Doe"
      },
      {
        "label": "03/05/2017"
      },
      {
        "label": "yes"
      },
      {
        "label": "no"
      },
      {
        "label": "no"
      }
    ]
  ]
}


/* Table with colspan and empty heading - enhanced */
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n        ECL.eclTables();\n      });"
  },
  "extra_classes": "ecl-table--responsive",
  "headers": [
    [
      {
        "label": null,
        "attributes": "rowspan=\"2\""
      },
      {
        "label": "Registration date",
        "attributes": "rowspan=\"2\""
      },
      {
        "label": "Language",
        "attributes": "colspan=\"3\""
      }
    ],
    [
      {
        "label": "English"
      },
      {
        "label": "French"
      },
      {
        "label": "German"
      }
    ]
  ],
  "rows": [
    [
      {
        "label": "John Doe"
      },
      {
        "label": "01/01/2016"
      },
      {
        "label": "yes"
      },
      {
        "label": "no"
      },
      {
        "label": "no"
      }
    ],
    [
      {
        "label": "Jane Doe"
      },
      {
        "label": "06/12/2016"
      },
      {
        "label": "no"
      },
      {
        "label": "yes"
      },
      {
        "label": "yes"
      }
    ],
    [
      {
        "label": "Jack Doe"
      },
      {
        "label": "03/05/2017"
      },
      {
        "label": "yes"
      },
      {
        "label": "no"
      },
      {
        "label": "no"
      }
    ]
  ]
}


<!-- Default table -->
<table class="ecl-table">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Registration date</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>01/01/2016</td>
      <td><a class="ecl-link" href="mailto:john.doe@mail.com">john.doe@mail.com</a></td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>06/12/2016</td>
      <td><a class="ecl-link" href="mailto:jane.doe@mail.com">jane.doe@mail.com</a></td>
    </tr>
    <tr>
      <td>Jack Doe</td>
      <td>03/05/2017</td>
      <td><a class="ecl-link" href="mailto:jack.doe@mail.com">jack.doe@mail.com</a></td>
    </tr>
  </tbody>
</table>


<!-- Default table - enhanced -->
<table class="ecl-table ecl-table--responsive">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Registration date</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>01/01/2016</td>
      <td><a class="ecl-link" href="mailto:john.doe@mail.com">john.doe@mail.com</a></td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>06/12/2016</td>
      <td><a class="ecl-link" href="mailto:jane.doe@mail.com">jane.doe@mail.com</a></td>
    </tr>
    <tr>
      <td>Jack Doe</td>
      <td>03/05/2017</td>
      <td><a class="ecl-link" href="mailto:jack.doe@mail.com">jack.doe@mail.com</a></td>
    </tr>
  </tbody>
</table>


<!-- Table with empty heading -->
<table class="ecl-table">
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">Registration date</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>01/01/2016</td>
      <td><a class="ecl-link" href="mailto:john.doe@mail.com">john.doe@mail.com</a></td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>06/12/2016</td>
      <td><a class="ecl-link" href="mailto:jane.doe@mail.com">jane.doe@mail.com</a></td>
    </tr>
    <tr>
      <td>Jack Doe</td>
      <td>03/05/2017</td>
      <td><a class="ecl-link" href="mailto:jack.doe@mail.com">jack.doe@mail.com</a></td>
    </tr>
  </tbody>
</table>


<!-- Table with empty heading - enhanced -->
<table class="ecl-table ecl-table--responsive">
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">Registration date</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>01/01/2016</td>
      <td><a class="ecl-link" href="mailto:john.doe@mail.com">john.doe@mail.com</a></td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>06/12/2016</td>
      <td><a class="ecl-link" href="mailto:jane.doe@mail.com">jane.doe@mail.com</a></td>
    </tr>
    <tr>
      <td>Jack Doe</td>
      <td>03/05/2017</td>
      <td><a class="ecl-link" href="mailto:jack.doe@mail.com">jack.doe@mail.com</a></td>
    </tr>
  </tbody>
</table>


<!-- Table with colspan -->
<table class="ecl-table">
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">Registration date</th>
      <th scope="col" colspan="3">Language</th>
    </tr>
    <tr>
      <th scope="col">English</th>
      <th scope="col">French</th>
      <th scope="col">German</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>01/01/2016</td>
      <td>yes</td>
      <td>no</td>
      <td>no</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>06/12/2016</td>
      <td>no</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Jack Doe</td>
      <td>03/05/2017</td>
      <td>yes</td>
      <td>no</td>
      <td>no</td>
    </tr>
  </tbody>
</table>


<!-- Table with colspan - enhanced -->
<table class="ecl-table ecl-table--responsive">
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">Registration date</th>
      <th scope="col" colspan="3">Language</th>
    </tr>
    <tr>
      <th scope="col">English</th>
      <th scope="col">French</th>
      <th scope="col">German</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>01/01/2016</td>
      <td>yes</td>
      <td>no</td>
      <td>no</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>06/12/2016</td>
      <td>no</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Jack Doe</td>
      <td>03/05/2017</td>
      <td>yes</td>
      <td>no</td>
      <td>no</td>
    </tr>
  </tbody>
</table>


<!-- Table with colspan and empty heading -->
<table class="ecl-table">
  <thead>
    <tr>
      <th scope="col" rowspan="2"></th>
      <th scope="col" rowspan="2">Registration date</th>
      <th scope="col" colspan="3">Language</th>
    </tr>
    <tr>
      <th scope="col">English</th>
      <th scope="col">French</th>
      <th scope="col">German</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>01/01/2016</td>
      <td>yes</td>
      <td>no</td>
      <td>no</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>06/12/2016</td>
      <td>no</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Jack Doe</td>
      <td>03/05/2017</td>
      <td>yes</td>
      <td>no</td>
      <td>no</td>
    </tr>
  </tbody>
</table>


<!-- Table with colspan and empty heading - enhanced -->
<table class="ecl-table ecl-table--responsive">
  <thead>
    <tr>
      <th scope="col" rowspan="2"></th>
      <th scope="col" rowspan="2">Registration date</th>
      <th scope="col" colspan="3">Language</th>
    </tr>
    <tr>
      <th scope="col">English</th>
      <th scope="col">French</th>
      <th scope="col">German</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>01/01/2016</td>
      <td>yes</td>
      <td>no</td>
      <td>no</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>06/12/2016</td>
      <td>no</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Jack Doe</td>
      <td>03/05/2017</td>
      <td>yes</td>
      <td>no</td>
      <td>no</td>
    </tr>
  </tbody>
</table>
  • Content: 
    @import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-table/generic-component-table--editor';

@include exports('eu-component-table--editor') {
  @include ecl-editor-table();
}
  • URL: /components/raw/eu-component-table/eu-component-table--editor.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-table/eu-component-table--editor.scss
  • Size: 187 Bytes
  • Content: 
    /**
 * Tables related behaviors.
 */

/* eslint-disable no-unexpected-multiline */

export function eclTables(elements = null) {
  const tables =
    elements || document.getElementsByClassName('ecl-table--responsive');
  [].forEach.call(tables, table => {
    const headerText = [];
    let textColspan = '';
    let ci = 0;
    let cn = [];

    // The rows in a table body.
    const tableRows = table.querySelectorAll('tbody tr');

    // The headers in a table.
    const headers = table.querySelectorAll('thead tr th');

    // The number of main headers.
    const headFirst =
      table.querySelectorAll('thead tr')[0].querySelectorAll('th').length - 1;

    // Number of cells per row.
    const cellPerRow = table
      .querySelectorAll('tbody tr')[0]
      .querySelectorAll('td').length;

    // Position of the eventual colspan element.
    let colspanIndex = -1;

    // Build the array with all the "labels"
    // Also get position of the eventual colspan element
    for (let i = 0; i < headers.length; i += 1) {
      if (headers[i].getAttribute('colspan')) {
        colspanIndex = i;
      }

      headerText[i] = [];
      headerText[i] = headers[i].textContent;
    }

    // If we have a colspan, we have to prepare the data for it.
    if (colspanIndex !== -1) {
      textColspan = headerText.splice(colspanIndex, 1);
      ci = colspanIndex;
      cn = table.querySelectorAll('th[colspan]')[0].getAttribute('colspan');

      for (let c = 0; c < cn; c += 1) {
        headerText.splice(ci + c, 0, headerText[headFirst + c]);
        headerText.splice(headFirst + 1 + c, 1);
      }
    }

    // For every row, set the attributes we use to make this happen.
    [].forEach.call(tableRows, row => {
      for (let j = 0; j < cellPerRow; j += 1) {
        if (headerText[j] === '' || headerText[j] === '\u00a0') {
          row
            .querySelectorAll('td')
            [j].setAttribute('class', 'ecl-table__heading');
        } else {
          row.querySelectorAll('td')[j].setAttribute('data-th', headerText[j]);
        }

        if (colspanIndex !== -1) {
          const cell = row.querySelectorAll('td')[colspanIndex];
          cell.setAttribute('class', 'ecl-table__group-label');
          cell.setAttribute('data-th-group', textColspan);

          for (let c = 1; c < cn; c += 1) {
            row
              .querySelectorAll('td')
              [colspanIndex + c].setAttribute(
                'class',
                'ecl-table__group_element'
              );
          }
        }
      }
    });
  });
}

export default eclTables;
  • URL: /components/raw/eu-component-table/eu-component-table.js
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-table/eu-component-table.js
  • Size: 2.6 KB
  • Content: 
    /*
 *ECL tables
 * @define table ; weak
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-table/generic-component-table';

// Use generic mixin
@include exports('eu-component-table') {
  @include ecl-table();
}
  • URL: /components/raw/eu-component-table/eu-component-table.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-table/eu-component-table.scss
  • Size: 257 Bytes
  • Content: 
    const contextDefault = require('@ecl/generic-component-table/data/demo--default');
const contextDefaultEnhanced = require('@ecl/generic-component-table/data/demo--default-enhanced');
const contextEmpty = require('@ecl/generic-component-table/data/demo--empty');
const contextEmptyEnhanced = require('@ecl/generic-component-table/data/demo--empty-enhanced');
const contextColspan = require('@ecl/generic-component-table/data/demo--colspan');
const contextColspanEnhanced = require('@ecl/generic-component-table/data/demo--colspan-enhanced');
const contextColspanEmpty = require('@ecl/generic-component-table/data/demo--colspan-empty');
const contextColspanEmptyEnhanced = require('@ecl/generic-component-table/data/demo--colspan-empty-enhanced');

module.exports = [
  {
    name: 'default',
    label: 'Default table',
    context: contextDefault,
  },
  {
    name: 'default-enhanced',
    label: 'Default table - enhanced',
    context: contextDefaultEnhanced,
  },
  {
    name: 'empty',
    label: 'Table with empty heading',
    context: contextEmpty,
  },
  {
    name: 'empty-enhanced',
    label: 'Table with empty heading - enhanced',
    context: contextEmptyEnhanced,
  },
  {
    name: 'colspan',
    label: 'Table with colspan',
    context: contextColspan,
  },
  {
    name: 'colspan-enhanced',
    label: 'Table with colspan - enhanced',
    context: contextColspanEnhanced,
  },
  {
    name: 'colspan-empty',
    label: 'Table with colspan and empty heading',
    context: contextColspanEmpty,
  },
  {
    name: 'colspan-empty-enhanced',
    label: 'Table with colspan and empty heading - enhanced',
    context: contextColspanEmptyEnhanced,
  },
];
  • URL: /components/raw/eu-component-table/variants.js
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-table/variants.js
  • Size: 1.7 KB
  • Handle: @ecl/eu-component-table
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-table/eu-component-table.twig