Using the Style settings in the Views UI, we can elect to have a view output as table data using an HTML table. Our options, however, as to how the table is structured are limited. We can overcome these limitations by theming the table output.
Getting ready
We're going to clone the view from Theming a field recipe and modify the display in it. We'll
create a table that classifies nodes by content type.
If you have not tried that recipe yet, perform the Getting ready section and steps 1-12 from it at this point.
How to do it...
On the view list page:
1. Navigate to the views list (admin/structure/views), click the downarrow next to the edit view name/description button and select Clone, change the View name to Themed table, and click the Continue button.
2. Click the Themed links link next to Title, select This page (override), change the title to Themed table, and click the Apply (all displays) button.
3. Click /themed-links next to Path in the Page settings pane, enter themed-table as the path, and click the Apply button.
4. Click the link for Content: Post date (desc) in the Sort Criteria box, then click the
Remove button.
6. Click the link for Content: Path in the Fields box, then click the Remove button. 7. Click the Unformatted list link next to Format: in the Format pane, click the Table
radio button and the Apply (all displays) button.
8. In the Table Page: Style options pane, check both Sortable checkboxes and the
Default Sort radio button for Content: Title, then click the Apply (all displays) button. 9. Click the Advanced link, then the Information link next to Theme in the Other
section, copy the right-most file name from the Style output line, views-view- table--themed-table--page.tpl.php, and click the OK button.
10. Click the Save button.
Create the template with the following steps:
1. From the Views module theme directory (probably sites/all/modules/views/ theme or sites/all/modules/contrib/views/theme), copy the file views- view-table.tpl.php and save it into the directory of the theme you're using (sites/all/themes/your_theme) that contains template files, naming it the
name you copied earlier, views-view-table--themed-table--page.tpl.php. 2. Clear your caches (admin/config/development/performance).
3. Edit this new file and look around line 22 for:
<table <?php if ($classes) { print 'class="'. $classes . '" '; } ?><?php print $attributes; ?>>
4. Immediately prior to this line add the following: <?php $header['title'] = 'Title'; $header['Article'] = 'Article'; $header['Country'] = 'Country'; $header['Course'] = 'Course'; $header['Employee'] = 'Employee'; $header['Extension'] = 'Extension'; $header['Other'] = 'Other'; $fields['Article'] = 'type'; $fields['Country'] = 'type'; $fields['Course'] = 'type'; $fields['Employee'] = 'type'; $fields['Extension'] = 'type'; $fields['Other'] = 'type';
foreach ($rows as $count => $row) { $rows[$count]['Article'] = ' '; $rows[$count]['Country'] = ' '; $rows[$count]['Course'] = ' '; $rows[$count]['Employee'] = ' '; $rows[$count]['Extension'] = ' '; $rows[$count]['Other'] = ' '; $type = (in_array($row['type'],array('Article','Country', 'Course','Employee','Extension'))) ? $row['type'] : 'Other';
$rows[$count][$type] = ($type == 'Other') ? $rows[$count]['type'] : 'X';
unset($rows[$count]['type']); }
unset($header['type']); ?>
5. At or about line 56 find:
<th <?php if ($header_classes[$field]) { print 'class="'. $header_classes[$field] . '" '; } ?>>
6. Change the line to read:
<th <?php if (isset($header_classes[$field])) { print 'class="'. $header_classes[$field] . '" '; } ?>>
7. At or about line 69 find:
<td <?php //if ($field_classes[$field][$row_count]) { print 'class="'. $field_classes[$field][$row_count] . '" '; } ?><?php //print
drupal_attributes($field_attributes[$field][$row_count]); ?>>
8. Change the line to read: <td>
9. Save the file, and then navigate to themed-table to view something similar to the following image:
How it works...
The view selects all published nodes, and we created a new page display that formats two
fields from each node, the title and content type, as a HTML table. We selected only those two fields because the ultimate table is only meant to display the node title, and some manner of showing the content type.
Inside the Table template, there were three portions of the table that we needed to address. The $header array contains a key for each column that is to have a heading. We added a column to it for each of several content types, and one catch-all column, titled Other, to summarize content of other types. We also reset the column heading for type that was there
due to it being one of the fields we selected within the view. Had we not removed this column
heading, the column headings would have been misaligned, making the table data appear to be incorrect.
The $fields array contains an entry for each field that is to be displayed, with the name of
the class to be used when displaying it. We added an entry for each of the columns we were adding, and ultimately removed the entry $fields['type'], since it would not be needed. The most important of the three arrays that we manipulated was the $rows array. It contains
a key for each column of data to be displayed. We added a column for each of the specific
content types that would appear in the table, as well as one for Other. We then examined the
content type for the row. If the content type matched one of the specific content types (Article,
Country, Course, Employee, and Extension), we simply inserted an X into the applicable
column for that row. If, however, the content type was other than one of those five, we put the
name of the content type into the Other column for that row rather than an X to make it more helpful.