2

Can I add a custom table class name to a View that outputs a table, Or just add the name of the view to the table class name? There isn't a setting in Views to add a table class name, you can only add row class names.

My View name is view-a1. I would like to the name of the View to all table class names.I am trying to do it with hook_preprocess_views_view_table. But I don't know how.

The default twig template uses this markup

The method in the url below worked, it will add a custom hardcoded table class name. I changed the hook in the example to hook_preprocess_views_view_table. What I really want to do it add the name of the View as the table class name. How can I do that?

https://www.drupal.org/docs/8/theming-drupal-8/modifying-attributes-in-a-theme-file

Improve this question

3 Answers 3

Reset to default
2

Using Datatables too, I had to add an ID to a table generated by a View displaying a page (system name = page_1).
I did that duplicating views-view-table.html.twig into views-view-table--members--page_1.html.twig and changed

<table{{ attributes.addClass(classes) }}>

into

<table{{ attributes.addClass(classes) }} ID="ListOfMembers">

Maybe that can help you...

Improve this answer
5
  • id must be lower case and the ID itself should better be lower case only as well.
    – leymannx
    Oct 29, 2018 at 23:32
  • Apart from that there are functions to be used in Twig to manipulate attributes the right way. For example <div{{ attributes.setAttribute('id', 'myID') }}></div>, see Using attributes in templates.
    – leymannx
    Oct 29, 2018 at 23:37
  • gbmapo. This worked for me the fastest. I create multiple Datatable configs for multiple View table blocks that are placed on the same page! When I first looked at twig debug name suggestions, I did not see I could rename the table view by the block number, now I see it. I still want to find out how to add the Views block name as a table class name or a table id name automatically instead of hardcoding this ID="table2" inside each new template. My clients also like pasting Datatables inside Ckeditor. When they do they can specify the class/id they want.So Ckeditor Datatable work great.
    – paul cappucci
    Oct 29, 2018 at 23:46
  • leymannx. Yes I think I will use: set classes = [. And then add: .addclass('mytable1') }}>. How can I highlight comments on this site so that they have a grey background color?
    – paul cappucci
    Oct 30, 2018 at 0:02
  • @gbmapo, I created blocks not pages from a View. So my example is for blocks. I found that twig debug originally only gave this limited naming suggestion. block--views-block--a1-block-1.html.twig It did not show a suggestion for table. It wasn't until after I created the file you said, this views-view-table--a1--block_1.html.twig that it then gave me a naming suggestion for it? Why is that? I think this article talks about the issue and its a bug in Drupal 8 core. [link]api.drupal.org/api/drupal/core!modules!views!views.theme.inc/…
    – paul cappucci
    Oct 30, 2018 at 12:24
3

Views have the CSS class option under Advanced (third column). There you can set the class to be output to all displays of that Views or override for single Displays.

Most themes won't output that class directly on the <table> element, it is usually output on a <div> that contains the table.

That can be enough for styling in CSS, but if you want you can override the twig template or use the preprocess function in your theme for more control.

Improve this answer
1
  • Thank you prkos. But I a really need to add the View name to the table class name. I feel like I am close. In the hook views_view_table I can add a hardcoded table class, I am trying to load the view name then create a variable from it then add it as the class name. I am using Datatables JS in the theme not the module. If you have different table configs, you need to use different table class names. Datatables can not target the containing div class.
    – paul cappucci
    Oct 29, 2018 at 17:34
3

Try this out it works for me: 

use Drupal\Component\Utility\Html;
/**
 * Implements hook_preprocess_views_view().
 */
function MYTHEMENAME_preprocess_views_view_table(&$vars){
  $view = $vars['view'];
  $vars['attributes']['class'][] = Html::cleanCssIdentifier($view->id());
}
Improve this answer
4
  • You better add that class to the array instead of redeclaring it, so it needs to be $vars['attributes']['class'][] = $view->id();. And if you are really strict with some CSS standards you may also ensure to replace underscores in the machine name with hyphens, maybe using Html::cleanCssIdentifier or with just str_replace('_', '-', $view->id()).
    – leymannx
    Oct 29, 2018 at 23:02
  • berramou, If that is a preprocess, should it be function MYTHEMENAME_preprocess_views_view_table. Instead?
    – paul cappucci
    Oct 29, 2018 at 23:34
  • @berramou. @leymannx. Thank you, the corrections you made works. There are 2 good answers here. My original question was to add the Views name to the table class that the View outputs. And your method works. I found that I need to add the View 'block number' or 'page number' as the class name. Because my View has multiple blocks and I want Datatables to initiate/target each View block differently. So the template naming method from @gbmapo works. Can I alter this = Html::cleanCssIdentifier($view->id()); So that it adds the Views block ID/number. In dpm I see [options][title] => a1block2
    – paul cappucci
    Oct 30, 2018 at 13:53
  • i'm glad that help , if you want to add display name for example try the following : $displayObj = $view->getDisplay(); $displayName = $displayObj->display['display_title'];
    – berramou
    Oct 30, 2018 at 15:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.