Drupal 8 - How to add custom class to a drupal table view

Introduction

Suppose you have a view, and you have configured your display as a table. Drupal provides no way to configure a css class for the table. And, it shows an ugly table. I was using bootstrap css, and they have some really awesome table classes. Lets see how we can add that custom class to a table view.

See the earlier table:

Drupal table view ugly

Provide a class to table view

So, there is no way on the drupal configuration to do that. We need to do little bit of twig file tweak. First, we need to see from which twig file, the output is being rendered.

Enable twig debug

Goto your /sites/default/services.yml
Search for are which says

debug: false

Change it to true
save file
clear the cache

Now refresh the page, and inspect the html in chrome. You will see from where the html is coming. In my case, it was showing the view name as:

/core/themes/classy/templates/views/views-view-table.html.twig

Copy that twig file in your theme’s template directory. And, edit that file. You will see a section on top where classes are being set, see below:

  set classes = [
    'views-table',
    'views-view-table',
    'cols-' ~ header|length,
    responsive ? 'responsive-enabled',
    sticky ? 'sticky-enabled',
  ]

In bootstrap, the simple class for the table is: table Simply add that class in the list, and nothing else. See changes below:

  set classes = [
    'views-table',
    'views-view-table',
    'table',
    'cols-' ~ header|length,
    responsive ? 'responsive-enabled',
    sticky ? 'sticky-enabled',
  ]

Save the file. Now, clear the cache. And, refresh your page. You should see the expected changes in your html.

See the bootstrap version of the table view

Drupal table view