Data Grid

Data Grid is component that displays collection data in table where each item in the collection represents one row in the table. Although Data Grid is container it's children must be instances of Data Grid Column components. There must be one instance for each column in Data Grid in order they appear in the Data Grid. The instances of Data Grid Column are used to specify how the column and it's data are displayed.

Data Grid and Data Grid Column has some common properties. Setting them on Data Grid instance they are applied to all columns of the grid. If they are set on the instance of Data Grid Column they override any setting made on parent Data Grid.

Data Grid
Data Grid Column


data provider
Data provider of the data grid can be simple array or instance of class implementing Traversable interface. The best possible result is achieved with data provider implementing px\collections\ICollectionView interface as it dispatches events about changes in the collection and also supports efficient paging.
By default Data Grid displays all rows in data provider. You can use property maxRows to limit the number of rows displayed. If data provider contains more rows than Data Grid is allowed to display then scroll bar is displayed. You can disable scroll bar display by setting property scrollBarDisabled to true.
interactive rows
The rows of the data grid can be interactive and clickable by setting property isInteractive to true. Then the Data Grid dispatches cellClick event ( px\controls\DataGridCellEvent::CELL_CLICK) when the Data Grid cell is clicked.
style customization
Use Data Grid's property rowStyleField to specify the name of property in the data provider's item that contains style class name used for given table row. It is also possible to set rowStyleFunction property to name of the function used to get style class name for given table row. Data Grid Column defines additional properties headerStyle, cellStyleField and cellStyleFunction that can be used to specify style class name for header or cell of column they are specified for.
data display customization
The Data Grid Column has usually set property dataField to name of the property in data provider's item that contains value to be displayed. According to this the property headerLabel of Data Grid Column is set to text displayed as column header. It is possible to customize the value display by setting property dataFunction of Data Grid Column to name of the function that returns text to display.
header and cell renderer
Another way of customizing the way the Data Grid displays data or even column header is setting custom renderer to cellRenderer or headerRenderer property on Data Grid or it's columns. The renderer is a component or structure of components that are rendered instead of default text renderer. These renderers can be specified directly in PXML. This way it is possible display pictures or other components or controls in Data Grid cells



Example source code

Source code of the exmaple above.

<?xml version="1.0" encoding="UTF-8"?>
<DataGridExample xmlns:h=""
	<px:Style url="base.css" />
	<px:Style url="examples/dataGridExample.css" />
use px\view\Component;
use px\controls\DataGrid;
use px\controls\DataGridCellEvent;
use px\controls\DataGridColumn;

class DataGridExample extends Component
	private $selectedIndex = -1;

	public function getSelectedIndex() {
		return $this->selectedIndex;

	public function setSelectedIndex($value) {
		$this->changeProperty($this->selectedIndex, $value, "selectedIndex");

	public function getSelectedItem() {
		return ($this->selectedIndex >= 0)
			? $this->carList[$this->selectedIndex] : NULL;

	function getCarName($item, DataGridColumn $dataGridColumn) {
		return $item->make." ".$item->model;

	function getPrice($item, DataGridColumn $dataGridColumn) {
		return sprintf("$%.2f", $dataGridColumn->getCellValue($item));

	function getRowStyle($item, DataGrid $dataGrid) {
		$index = $this->carList->indexOf($item);
		if ($this->selectedIndex == $index) {
			return "selected";
		return ($index % 2 == 0) ? "odd" : "even";
	function cellClickHandler(DataGridCellEvent $event) {
	<px:Array name="carList">
		<px:Object model="407" make="Peugot" price="19000" year="2003"
		<px:Object model="Celica" make="Toyota" price="15000" year="2000"
		<px:Object model="Civic" make="Honda" price="12000" year="2002"
		<px:Object model="Eclipse" make="Mitsubishi" price="19000" year="2000"
		<px:Object model="Fabia" make="Škoda" price="10000" year="2004"
		<px:Object model="Focus" make="Ford" price="13000" year="2005"
		<px:Object model="Golf" make="Volkswagen" price="5000" year="1996"
		<px:Object model="Impreza" make="Subaru" price="16000" year="2001"
		<px:Object model="Integra" make="Honda" price="14000" year="1998"
		<px:Object model="Lancer" make="Mitsubishi" price="18000" year="2006"
		<px:Object model="Mondeo" make="Ford" price="22000" year="2009"
		<px:Object model="Octavia" make="Škoda" price="28000" year="2008" 
		<px:Object model="Yaris" make="Toyota" price="18000" year="2004"
		<px:DataGrid dataProvider="{^$self->carList}" maxRows="5" width="65%"
				rowStyleFunction="getRowStyle" isInteractive="true"
				scrollUpButtonText="" scrollDownButtonText=""
			<px:DataGridColumn dataField="icon" width="16">
				<px:assign property="cellRenderer">
					<h:img src="assets/16/cog.png" />
			<px:DataGridColumn dataField="make" headerLabel="Car"
			<px:DataGridColumn dataField="year" headerLabel="Year"
			<px:DataGridColumn dataField="mileage" headerLabel="Mileage"
			<px:DataGridColumn dataField="price" headerLabel="Price"
				textAlign="right" dataFunction="getPrice"/>
		<h:table rendered="{$self->selectedItem != NULL}" width="32%">
			<h:caption>Selected car:</h:caption>
		<h:td>{$self->selectedItem?$self->selectedItem->mileage:''} miles</h:td>
<h:td>{$self->selectedItem?sprintf("$%.2f", $self->selectedItem->price):''}</h:td>
		<h:div clear="left"></h:div>
tr.odd td {
	background-color: #fff;
tr.even td {
	background-color: #ddf;
tr.selected td {
	background-color: #33f;
	color: #fff;