Add "Table class" option to views table formatter UI

Created on 4 April 2019, over 5 years ago
Updated 12 August 2024, 2 months ago

Problem/Motivation

The Drupal 7 contrib version of the Views module provided an option for the table style to add CSS classes to the table element itself via the UI. This feature was not implemented when Views was moved to core in Drupal 8. This feature is desirable for site builders and themers because it allows style variations such as table row striping, borderless rows, etc. to be easily added via the UI to specific tables outputted by Views.

Added this functionality will also bring feature parity with the Drupal 7 version in this regard.

Steps to reproduce

  1. Create a view with a table style.
  2. Open the table style options modal in the Views UI
  3. See that there is not a form field to add custom CSS classes to table element.

Proposed resolution

Provide a configuration form option in the Views table style plugin to set custom CSS classes to the table element itself.

Remaining tasks

User interface changes

A new text input added to the table style options.

See #26 for screenshots

API changes

None

Data model changes

  1. Add CSS class option to table style plugin configuration schema.

Original report by Anybody

Drupal 8 Follow-up of the Drupal 7 issue #1689472: add class to table in table format β†’ , which was committed on 2019-04-04.

Like before in Drupal 7 the Drupal 8 views table formatter only allows to set a class on rows in the UI but not on the table itself, while that would be consistent to other formatters and helpful in several cases.

How can one add a class to the rendered table when a view is outputted as table?

In html-list format for example one can add a class to a wrapper OR/AND to the list. Is this possible to the table as well?

Thanks!

✨ Feature request
Status

RTBC

Version

11.0 πŸ”₯

Component
ViewsΒ  β†’

Last updated about 2 hours ago

Created by

πŸ‡©πŸ‡ͺGermany Anybody Porta Westfalica

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request β†’ as a guide.

    Tagging. for an issue summary update following the standard template please.

    This feature request will require test coverage as well

    Thanks.

  • πŸ‡ΊπŸ‡ΈUnited States pcate
  • πŸ‡ΊπŸ‡ΈUnited States pcate

    @smustgrave I've updated the issue summary to follow the standard template.

  • Merge request !8749Add CSS class field to views table options. β†’ (Open) created by pcate
  • πŸ‡ΊπŸ‡ΈUnited States pcate

    I've made an initial conversion of @dieuwe #10 patch to a merge request.

  • Pipeline finished with Canceled
    3 months ago
    Total: 367s
    #222302
  • Pipeline finished with Success
    3 months ago
    Total: 559s
    #222306
  • Pipeline finished with Canceled
    3 months ago
    Total: 511s
    #222783
  • πŸ‡ΊπŸ‡ΈUnited States pcate
  • πŸ‡ΊπŸ‡ΈUnited States pcate

    It does appear the table style config schema needs to css class option added. The test I added was failing without it. Updated issue summary to reflect this.

  • πŸ‡ΊπŸ‡ΈUnited States pcate
  • Pipeline finished with Success
    3 months ago
    Total: 473s
    #222791
  • Status changed to Needs review 3 months ago
  • πŸ‡ΊπŸ‡ΈUnited States pcate

    Setting to "Needs Review". I added a functionality test to confirm functionality is working, and I also tested manually.

  • πŸ‡©πŸ‡ͺGermany Anybody Porta Westfalica

    GREAT work @PCate! RTBC! Removing the solved tags!

  • Status changed to RTBC 3 months ago
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Nice!

    So this is one of those cases test-only feature doesn't work as it reverts the schema change. So applied locally and reverted the changes but kept the schema, so the test will run

    Behat\Mink\Exception\ElementNotFoundException: Element matching xpath "//table[contains(concat(" ", @class, " "), " test-css-table-class1 test-css-table-class2 ")]" not found.
    

    Which shows the test itself.

    Believe this one is good. Only thing not 100% sure is if it will need a CR.

  • πŸ‡ΊπŸ‡ΈUnited States dalemoore

    Just testedβ€”working for me! This just made my day for reals.

    Screenshots below.

  • Status changed to Needs work 2 months ago
  • πŸ‡³πŸ‡ΏNew Zealand quietone

    The issue summary clearly explains the problem and the change.

    This is changing the UI, adding tag. The latest before and after screenshots should be available from the issue summary to help reviewers and committers. I updated the IS to state that they are in #26. Testing was done in #25 and manual testing in #26.

    I read the MR and have commented on the user interface text.

  • Status changed to Needs review 2 months ago
  • πŸ‡©πŸ‡ͺGermany Anybody Porta Westfalica

    Thanks @quietone - you're right! Just did that, think you suggestion is good. I also added "Table" to the title to be even clearer about the context. Please review.

  • Pipeline finished with Success
    2 months ago
    Total: 593s
    #247520
  • Status changed to RTBC 2 months ago
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Believe feedback has been addressed here.

  • πŸ‡¬πŸ‡§United Kingdom longwave UK

    Does this need an update hook to add the empty class to any existing views that use the table style?

  • πŸ‡¬πŸ‡§United Kingdom catch

    #30 is correct, we need a post update for that, otherwise there will be mis-matches when someone next resaves the views UI or a different update runs, marking needs work.

Production build 0.71.5 2024