uestla / TwiGrid 12.0.2

TwiGrid - datagrid built on top of Nette Framework

download-cloud-line composer require uestla/twigrid


... is a DataGrid for Nette Framework.

Buy me a Coffee

Demo sources:

It's based on another (and great) datagrid written by @hrach - My datagrid is hugely inspired by this component and its programming ideas and therefore I would like to give this man a maximum credit and respect :-)


Let's see how many steps do we have to make to create our first datagrid.

  1. We'll start by creating an empty Nette Framework project:

    composer create-project nette/web-project twigrid-quickstart
  2. Now we'll install TwiGrid into our project:

    cd twigrid-quickstart
    composer require uestla/twigrid

    Next we will install client-side assets using yarn.

    yarn add twigrid-datagrid --modules-folder www/vendor

    If you're not using yarn, you can install assets manually by looking into package.json and see required dependencies there.

    We'll then update app/Presenters/templates/@layout.latte to load downloaded assets:

    <!-- inside <head /> -->
    <link rel="stylesheet" href="{$basePath}/vendor/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{$basePath}/vendor/twigrid-datagrid/assets/twigrid.datagrid.css">
    <!-- before </body> -->
    <script src="{$basePath}/vendor/jquery/dist/jquery.min.js"></script>
    <script src="{$basePath}/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="{$basePath}/vendor/nette-forms/src/assets/netteForms.min.js"></script>
    <script src="{$basePath}/vendor/nette.ajax.js/nette.ajax.js"></script>
    <script src="{$basePath}/vendor/twigrid-datagrid/assets/twigrid.datagrid.js"></script>
  3. Instead of manually creating database, we'll use the SQLite3 file from the demo application and place it in app/Model/users.s3db.

    To tell Nette Framework that we want to use this database, we'll update config/local.neon file:

    	dsn: 'sqlite:%appDir%/Model/users.s3db'
  4. Now it's finally time to create our first datagrid - let's create an app/Grids/UsersGrid.php file. We'll need database connection for data loading, so we inject it properly via constructor.

    // app/Grids/UsersGrid.php
    final class UsersGrid extends TwiGrid\DataGrid
    	private $database;
    	public function __construct(Nette\Database\Explorer $database)
    		$this->database = $database;
    	protected function build(): void
    		// TODO

    We'll define the datagrid body inside the build() method. Although the table user has many columns, we'll have just some of them in our grid just to make it easy.

    $this->addColumn('firstname', 'Firstname');
    $this->addColumn('surname', 'Surname');
    $this->addColumn('streetaddress', 'Street address');
    $this->addColumn('city', 'City');
    $this->addColumn('country_code', 'Country');

    TwiGrid also needs to know what column(s) it should consider as a primary key:


    And finally we'll tell TwiGrid how to load our users:

    $this->setDataLoader(function () {
    	return $this->database->table('user');
  5. To properly inject our grid into presenters, we'll need to create a factory interface:

    // app/Grids/UsersGridFactory.php
    interface UsersGridFactory
    	public function create(): UsersGrid;

    This interface will now be used for automatic factory generation, which is handy - we simply add this definition to config/common.neon:

    	- implement: UsersGridFactory
  6. Having all of this done, we can now simply inject our grid factory into HomepagePresenter.

    // app/Presenters/HomepagePresenter.php
    class HomepagePresenter extends BasePresenter
    	/** @var \UsersGridFactory @inject */
    	public $usersGridFactory;

    Now we'll add the control factory itself:

    // app/Presenters/HomepagePresenter.php
    protected function createComponentUsersGrid(): \UsersGrid
    	return $this->usersGridFactory->create();
  7. We're nearly done! Just open app/Presenters/templates/Homepage/default.latte, delete the whole content and replace it with

    {block content}
    	{control usersGrid}

    That's all, folks!

    Now when you'll open the page, you might see something like this:

    Result screenshot

  8. Final improvement

    Maybe showing the country code isn't that sexy - we'd like to have the whole country name in "Country" column. To achieve that, we'll create custom grid template:

    {* app/Grids/UsersGrid.latte *}
    {extends $defaultTemplate}
    {define body-cell-country_code}

    And tell TwiGrid to use this template:

    // app/Grids/UsersGrid.php::build()
    $this->setTemplateFile(__DIR__ . '/UsersGrid.latte');

    Simple as that!


To see more examples, please visit the demo page. Enjoy!

  • 12.0.2

    • Migrated bower to yarn
    • Upgraded CI pipeline
    • Updated & improved README
  • 12.0.0

  • 11.2.1 TwiGrid 11.2.1

    This is the last release for PHP 5.6.x

    I want to rewrite the core of this library to PHP7 static & return typehints and then release it as a new major version 12.

    I will only deal with bugfixes/security patches for this 11.x version, but no new features are to be added.







Componette Componette