Component
Data table
Flexible data in a table design, without using table semantics.
Extra template suggestions
Added a more specific template suggestion based upon the id of the data-table.
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'data_table' -->
<!-- FILE NAME SUGGESTIONS:
x data-table--my-special-id.html.twig
x data-table.html.twig
-->Because tables are hard to design, each table-id will get it's unique template suggestion, so you can make them as custom as they need to be.
Better classes
Some classes are available on the data-table component:
{%
set table_classes = [
'data-table',
id ? 'data-table--' ~ id|clean_class,
]
%}
Which gives you the following classes:
.data-table {}
// If you define a id for your data-table
.data-table--my-custom-id {}
The data-table component is a new component that can be called from the backend by defining a renderable array:
$form['my_data_table'] = [
'#theme' => 'data_table',
'#id' => 'my-special-id',
'#title' => 'My table title',
'#rows' => $rows,
];
The rows (horizontal) can contain any number of columns (vertical) and they should be defined as follows:
$rows['A'] = [
'column-1' => [
'label' => $this->t('ID'),
'label_invisible' => false,
'content' => $this->t('Number 3'),
],
'column-2' => [
'label' => $this->t('Name'),
'label_invisible' => false,
'content' => $this->t('Jerry'),
],
'column-3' => [
'label' => $this->t('Last Name'),
'label_invisible' => false,
'content' => $this->t('Joplin'),
],
];
$rows['B'] = [
'column-1' => [
'label' => $this->t('ID'),
'label_invisible' => false,
'content' => $this->t('Number 8'),
],
'column-2' => [
'label' => $this->t('Name'),
'label_invisible' => false,
'content' => $this->t('Hoppy'),
],
'column-3' => [
'label' => $this->t('Last Name'),
'label_invisible' => false,
'content' => $this->t('Hiplin'),
],
];
data-table
Drupal Core
HTML
CSS
Flat design
