If you didn’t read documentation on Table you should start with that. While table implements the actual data rendering, Grid component supplies various enhancements around it, such as paginator, quick-search, toolbar and others by relying on other components.
Here is a simple usage:
To make your grid look nicer, you might want to add some buttons and enable quicksearch:
$grid = $app->add('Grid'); $grid->setModel(new Country($db)); $grid->addQuickSearch(); $grid->menu->addItem('Reload Grid', new \atk4\ui\jsReload($grid));
Adding Quick Search¶
After you have associated grid with a model using
View::setModel() you can
include quick-search component:
If you don’t specify argument, then search will be done by a models title field. (http://agile-data.readthedocs.io/en/develop/model.html#title-field)
Grid comes with a paginator already. You can disable it by setting $paginator property to false. You can use $ipp to specify different number of items per page:
$grid->ipp = 10;
Grid can have a checkbox column for you to select elements. It relies on
TableColumnCheckBox, but will
additionally place this column before any other column inside a grid. You can use
method to reference value of selected checkboxes inside any Actions:
$sel = $grid->addSelection(); $grid->menu->addItem('show selection')->on('click', new \atk4\ui\jsExpression( 'alert("Selected: "+)', [$sel->jsChecked()] ));
When grid is associated with a model that supports order, it will automatically make itself sortable. You can override this behaviour by setting $sortable property to true or false.
Additionally you may set list of sortable fields to a sortable property if you wish that your grid would be sortable only for those columns.