Create the FooTable functionality by using only views

Question

I noticed by using FooTable display on one of my view on a Drupal 8 site, it is increasing the load time of the view by more than 2000 ms.

The main idea i am using Footable is because of the ability to hide fields within the table row and make them visible once you click on that table row (collapsable fields).

Can I build using only views such table with collapsable fields without having the Footable module installed ?

Any help suggestions just to make me start !

Below is an image of what i am trying to build using only views core module:

Note: The responsiveness of the table is not important in my case !

I want the table to always display 4 columns (one field in each column) and when the "See More" link is clicked, the other fields will show/hide inside a collapsible accordion.

Answer 1

A module that provides the "collapsible" functionality is Views Accordion so maybe you can try it and see if it performs better.

But it doesn't change the layout depending on the browser width.

The proper way of addressing this is with CSS. You can use CSS grid to make the fields appear as a table on wider widths, and stacked one below the other on narrow widths. You can even recreate the accordion look where some fields are hidden initially, you click on the visible ones to show all the rest. I expect this solution would score highest in performance, but I'm not aware of any contributed modules that provide it for D8, you can build it yourself in your subtheme.

For D7 there is Views CSS Tables.

The CSS route may not support some older browsers so it depends on your project's visitors stats if it's safe to go that way.

Edited: Yes, I think it can be done, although I've never tried it in Views like that, and it's definitely not trivial. The concepts you need to learn are about:

• @queries to restrict code according to browser width: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries or any other tutorial with examples,
• you'll need a "CSS accordion", just search for it, here's an example: https://codepen.io/raphaelgoetter/pen/bBXPYP, or instead of a CSS accordion you can use <details>: https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/
• you'll have to construct the "See more" link yourself, either with simple Rewrite field output to match the Details HTML, or use the ID of Views rows to apply ::focus for the CSS accordion.
• you'll need the "CSS grid" to contruct the fields layout as a partial table: https://gridbyexample.com/examples/