Rendering HTML Tables Dynamically in Drupal

Written by James Mansson on February 2, 2013 Categories: Drupal, HTML

One task that can be cumbersome is creating HTML tables dynamically. Fortunately, when working with Drupal, there is a built-in function to help with this called theme_table. There are two basic ways to invoke this function: either you can call theme_table directly, or use the general theme function, and pass ‘table’ as the first parameter, and the additional settingsĀ as an array in the second parameter. The follow code will feature the second method.

In developing a Drupal module called chess_results for the Horsham Chess Club website, I have made use of this function in several places. The function of this module is to allow the administrator to enter the results for club competitions, and to dynamically create cross-tables based on the results so far. Naturally, it requires the function to create the cross-tables, but it also uses the function to display a table of the active events and the competitors in them.

Below is the code used to create the table of active events:

// Get all the active events
$result = _get_events(true);

// Generate the table of events
$content = t('<h1>Chess events</h1>');

if (count($result) > 0) {
	$content .= '<p>The following active events are currently in the system:</p>';

	$header = array(
		array('data' => 'ID', 'style' => 'text-align: center;'),
		array('data' => 'Description', 'style' => 'text-align: center;'),
		array('data' => 'Format', 'style' => 'text-align: center;'),
		array('data' => 'Competitors', 'style' => 'text-align: center;'),
	);

	$rows = array();

	foreach ($result as $record) {
		$competitors = _get_competitors($record->event_id);

		$competitorList = array();

		foreach ($competitors as $competitor) {
			$competitorList[] = $competitor['name'];
		}

		$row = array(
			$record->event_id,
			$record->description,
			ucfirst($record->format),
			implode(', ', $competitorList),
		);

		$rows[] = $row;
	}

	$content .= theme(
		'table',
		array(
			'header' => $header,
			'rows' => $rows,
			'attributes'=> array(),
			'caption' => '',
			'colgroups' => array(),
			'sticky' => false,
			'empty' => false,
		)
	);
} else {
	$content .= '<p>There are no active events currently in the system.</p>';
}

We start by calling the _get_events function, which retrieves the list of active events from the database; note that the parameter true is used to indicate that we want to retrieve the active events only.

Having retrieving the list of events, we then start building the content to display on screen.

Although there will usually be some active events in the system, between the end of one season and the start of the next there won’t be any events running. We therefore check whether there are any active events before starting to create the table. If there are no active events, we display a simple message to that effect. Otherwise, we start generating the table elements.

The first thing we create is the header array. Each element of this represents a column header. In this instance, each element is an associative array, with data containing the text of the header, and style the styling specific to that element. If we just wanted to pass the header text, we could use a string for the element rather than an array.

The second thing we create is the rows array. Each element of this represents a cell in the row. As with the header, each element could be an associative array or a string, depending on whether we need to specify more than just the cell text. In this particular example, we just use strings.

Note that we call the _get_competitors function to retrieve the list of competitors for that particular event, then merge the names into a comma-separated list.

We are now ready to call the theme function. The first parameter is ‘table’, to indicate that we want to create the markup for a table. The second parameter is an associative array, in which we set header to the header array we have created, and rows to the rows array. The other parameters are set to the default values.

The above example only shows some of the things you can do with theme_table. You should consult the Drupal API Reference for the function for more details.

No Comments on Rendering HTML Tables Dynamically in Drupal

Leave a Reply

Your email address will not be published. Required fields are marked *