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'),
  ],
];

 

Machine name

data-table

Built upon

Drupal Core

Perks

Secured by Compony
Using Sass
Responsive
Accessible

Building blocks

HTML
CSS

Inspired by

Flat design

Stats

Public component
51 downloads
5 commits
No open issue

Contributors