Render Tables the Easy Way in Zend Framework 2

HTML Tables, once used heavily for almost everything, have largely been relegated in the modern CSS/HTML5 world. Now they are only used for what they were originally designed for — rendering tabular data. So they’re still essential! But there’s a lot to them, if you want to use them properly. So there needs to be a way of rendering them easily and quickly. Today’s tutorial introduces a module which helps you do just that.

But First, a Little Background

Recently, as I was working through a project, I was revisiting the way in which I was outputting tabular data, and thought that there needed to be a simpler, more reusable way of doing it.

It’s not that the way I was approaching it was particularly difficult, as I was using a few partials and had the situation well under control; but it seemed that there could be a better way to do it, one I could share around the rest of the code base.

So I did a bit of searching on Packagist, where I came across CaoHtmlTable from Chris O’Connell. The package describes itself as:

Zend Framework 2 View Helper to render an HTML Table. The input can be either an array or an instance of CaoHtmlTable\Model\Table. The code will try to make to most of what its given.

I’ve got to say, from reading through the source, it’s a pretty simple class and view helper. It’s not loaded up with a wide array of configuration options, nor features. However, for rendering simple tables, it does the job very well. And after some experimentation, it turned out to be a handy way to do what I needed to do.

So let’s step through getting it setup and using it.

Installing It

Despite the docs saying that you can include a reference to it in the require section of a project’s composer.json file, that never worked for me. I had to clone the project into the vendor directory, and then to add the following autoload configuration.

"autoload": {
    "psr-4": {"CaoHtmlTable": "vendor/CaoHtmlTable"}
}

If you’re not familiar with the autoload option, it allows you to load PSR-0 and PSR-4 packaged projects. On the left is the project’s namespace, and on the right is the path to the repository root, where a src directory can be found.

Once you’ve added the above configuration, in the root of your project, run composer dumpautoload, which will upload the autoload class list to include the project’s source files.

Try adding the require option, as the project suggest, YMMV. However, if that doesn’t work for you, use the autoload directive, as I have above, and run composer dumpautoload afterwards.

Enabling the Module

As with any Zend Framework 2 module, all that needs to be done to enable it, is to add the name of the module to the module list in config\autoload\application.config.php, as follows:

return array(
    'modules' => array(
        'CaoHtmlTable'
    ),
);

With that done, it’s now enabled.

Using it in a Controller Action

Now that the module’s ready to use, let’s assume that you already have a working application, which already has some TableGateway classes, which has a method, fetchAll().

This method returns information about some blog post articles you’re working on. And let’s assume that these classes are available in the index controller. In the controller, add the use statement below to make the CaoHtmlTable class available.

use CaoHtmlTableModelTable as DisplayTable;

For sakes of simplicity, you only want to render the article’s name, the publication it will be featured in, the client who you’re writing it for, some general notes, and the publish and submitted dates.

In the code sample below, you can see that we’ve called toArray() on the result of the call to fetchAll(), iterating over it, building an array of rows which we can pass to the CaoHtmlTable class later. We could have done this in a utility function, but I wanted to be quite explicit about what I’m doing.

public function indexAction()
{
    $rows = array();
    foreach ($this->articleSearchTable->fetchAll()->toArray() as $row) {
       $rows[] = [
           $row['name'], $row['publication'], $row['client'],
           $row['notes'], $row['published'], $row['submitted']
       ];
    }

With that done, we now have the row data ready, so we need to instantiate the CaoHtmlTable object. In the code below, we’ve done that, and set some CSS classes on the table. You may recognise these if you work with the Twitter Bootstrap project.

After the call to setAttributes(), we then set the header row by calling setHeaderRow(), passing in the names of the header columns, which match up with the row data we previously assembled. We then call setRows() and pass in the row data we compiled.

$table = new DisplayTable();
    $table->setAttributes([
        'class' => 'table table-bordered table-responsive'
    ])
        ->setHeaderRow([
            'Article Name', 'Publication', 'Client',
            'Notes', 'Submitted', 'Published'
        ])
    ->setRows($rows);

With that, the CaoHtmlTable object’s ready to go. All we need to do is to make it accessible to the View layer, which we do by passing it to the ViewModel constructor.

Note: We could also just have returned the array, which would have achieved the same effect.

return new ViewModel(
        array(
            'table' => $table
        )
    );
}

Printing the Table in a View Template

That’s most of the work done. Now let’s see how to generate the table in the view template. Really, there’s not much to it. All we need do is call the htmlTable view helper, which comes with the module, and pass in the $table view template variable we just set, as below.

print $this->htmlTable($this->table);

The Result

The result is a HTML-compliant table rendered, as in the table below.

Wrapping Up

And that’s how you can render HTML tables in Zend Framework applications, easily, quickly, and not to forget HTML-compliant. How do you render tables in your Zend Framework applications? What works best for you? I’d love to know your approach.