Presenting data in a table like layout is a common task in many web applications and websites. The GUI library comes with a simple grid component, that takes a multi dimention array of data, and turns it into a table (Grid view). Optionally each item (row) in the grid can be selectable.

All this is available using the
SMGrid class. The sample code below produces the same result as shown in the image above.
$data = array(); // Record set
// Adding rows/records - must be indexed with names of columns
$data[] = new array(
"Filename" => "ButtonBuy.png",
"Size" => "3.65 KB",
"Modified" => "2009-10-27 21:59:56"
);
$data[] = new array(
"Filename" => "LinkButton.png",
"Size" => "7 KB",
"Modified" => "2009-11-21 16:45:41"
);
$data[] = new array(
"Filename" => "TreeMenu.png",
"Size" => "10.08 KB",
"Modified" => "2009-11-21 16:45:52"
);
// Create grid component, add data, have it post back when an item is selected,
// and enable the selector and have it return the Filename value when GetSelectedValue()
// is invoked.
$grid = new SMGrid("UniqueId");
$grid->SetData($data);
$grid->SetAutoPostBack(true);
$grid->EnableSelector("Filename");
// Handle item selection
if ($grid->PerformedPostBack() === true)
{
// Get filename of selected grid item
$filename = $grid->GetSelectedValue();
// Do something with selected filename here..
}