What are my options to visualise a views table with many fields grouped in columns?

Question

I have a view with 30 fields. Displaying its results would look best using a table, but with fields grouped in columns.

Default table in Views can't do this because there are to many fields.

So instead of what it looks now:

field-1 header, field-2 header, field-3 header, field-4 header, field-5 header, etc. (with default field under each header)

I need:

header1 I header2

field-1 I field4

field-2 I field5

field-3 I field6

Any suggestions?

Notes:

• It's something I would like to do on several views with a module or "simple" theming.
• I tried the groupfield views module (broken when using table format, works great on html, unformated, etc.).
• I tried DS views layout, but can't use CSS on each field on that one.
• I'm thinking of Panels, but that seems like overdoing it just to get simple view display for my case.

Answer 1

The DataTables module might help for answering this question. Here is a quote from its project page:

The DataTables module integrates the jQuery plugin DataTables into Drupal as a views style and a callable theme function. DataTables lets you add dynamic features to tables, including:

• Variable length pagination
• On-the-fly filtering
• Sorting with data type detection
• Smart handling of column widths
• Themeable by CSS
• And more ...

Another feature that it offers is that you can "hide" specific columns from the default table display. But still the user has the option to do things like:

• expand the hidden columns.
• use the DataTables search feature to search for rows containing one or more strings contained in ... even those hidden columns.

So in this question here, I'd use an approach to only show, by default, a subset of all those columns, and leave it to the user to yes/no also display these (initially hidden) columns.

A few more links you may want to look at:

• Show / hide columns dynamically (use the links following Toggle column to see it at work).
• Tutorial about Using DataTables In Drupal 7.
• How to hide (and show) a table column (using the jQuery DataTables plugin).
• jQuery DataTables hide column without removing it from DOM.

Refer to the (short) video about Create Powerful Tables with the DataTables jQuery Plugin and Views for an intro about it, and how to use it as a views style plugin. Using the "settings" link for this views style, you can specify all sorts of dataTables options/features. In the above video starting from around 3:00 you see many of them.

The last link in these settings relates to hidden and collapsed columns (you can see the link in the video, though it is not expanded). So there is where you can then specify which of your (many?) columns you want to be processed as collapsed columns (not sure if you want any of them to be "hidden "in you case. Experiment a bit with those options in your environment to check if it is an acceptable compromise (or alternative) for "grouping" your fields (table columns), i.e.:

• fields you always want to be shown.
• fields you want initially to be excluded from the display, but for which you let the user decide to optionally also shown one or more of them.
• fields you never want to be shown.

Example

Below is a screenprint of such display using DataTables. It's a display I created using Views (of course) with a table with:

• 8 fields in (defined in my view).
• 5 table columns for the 5 fields I have decided to always show.
• 3 table columns which I defined as "hidden and expandable" (within the DataTables settings after you select DataTables as the Views style).

Here is how the DataTables display looks like:

For each row there is a link 'Show Details' (in its 1st column). If you click on one (or more) of them, the hidden fields of such row are shown below that row (with grey background here) and the link you clicked changes to 'Hide Details'. Obviously, I've not done any styling for such expanded row (hence the grey background, etc). But you can see the 3 fields that were initially hidden.

Bonus: assume none of the rows are shown expanded, and you type "Basic" in the DataTables search box. It will then dynamically (in the browser, no server calls) reduce the table display to only those rows with Basic Page as value for "Type". But wait, there is even more: if you'd type a string like part of "21:15" instead (hidden in some of the rows), it will also dynamically reduce the table display to only those rows, like the expanded row shown in the screenprint. But wait, there is even (quite) a bit more: a search string like "basic 21:15" will filter the rows to a combination of both search strings. For only this one feature I often recommend the amazing DataTables module, one of Drupal's hidden gems I think. And then there are the other features like pager, sortable columns, etc.

Remarks

• Make sure to use the 1.9.x version of the DataTables library (not 1.10.x or above), as mentioned also on the project page, which states:

  While there is work in the 7.x-2.x branch to upgrade to the latest DataTables version (1.10.x), the 7.x-1.x branch only works with DataTables <= 1.9.x. Since it's not listed in the projects download page, you will have to download it directly.

• When creating a view, disable the pager of your view, since DataTables provides its own paging features (the video talks about that starting from 2:05).