HTML Table Class on CodeIgniter 2.0

Posted by Danny Herran on Aug 31, 2010 in Backend | 3 comments

CodeIgniter 2.0 is coming out soon, so lets start studying the changes done to the HTML Table Class in the dev-release.

One of the most requested features was the ability to set tag attributes to individual cells. On CI 2.0 this is completely possible, however, since the documentation is not fully updated yet, I decided to make this short post to explain how it works.

Styling headings

As you know, you can set the table heading with $this->table->set_heading(). In CI 2.0, you can now pass a multidimensional array to this function containing the contents + optional tags for each heading cell. Lets take a look:

$tbl_heading = array(
			'0' => array('data' => 'Name', 'style' => 'padding-left:8px', 'width' => '100'),
			'1' => array('data' => 'Lastname', 'style' => 'width:100px', 'title' => 'This is the person lastname'),
			'2' => array('data' => 'Birthday', 'width' => '50'),
			'3' => array('data' => 'Position', 'height' => '30'));


Each heading element has an index, starting from 0 to N. For each index there is an array where ‘data’ contains the cell contents and the other indexes will work as “optional tags” for the cell itself.

You can use any tag you like. In my previous example I used style, title, width and height but the CI developers were kind enough to let us use anything we like. Just remember to set your ‘data’ index if you want to display some text inside the cell.

Styling rows

$this->table->add_row() allow us to add rows to our table. With CI 2.0, you can now use tags to personalize the style of your table just like we did with the heading:

$tbl_row = array(
			'0' => array('data' => 'Peter, 'width' => '100', 'background' => 'red'),
			'1' => array('data' => 'Bishop', 'style' => 'width:100px'),
			'2' => array('data' => '08/12/1960', 'width' => '50'),
			'3' => array('data' => 'Manager', 'height' => '30'));


I hope this will save you some code hunting, at least till the CI developers update the 2.0 documentation.