uestla/twigrid

Experimental DataGrid for Nette Framework

Tuesday, May 29, 2018
by uestla
Repository
5 Watchers
12 Stars
2,490 Installations

PHP
1 Dependents
0 Suggesters
10 Forks
9 Open issues
61 Versions
2 % Grown

The README.md

TwiGrid

... is a DataGrid for Nette Framework., _(*1)

, _(*2)

Demo: https://kesspess.cz/twigrid/
Demo sources: https://github.com/uestla/twigrid-demo, _(*3)

It's based on another (and great) datagrid written by @hrach - https://github.com/nextras/datagrid. 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 :-), _(*4)

Quickstart

Let's see how many steps do we have to make to create our first datagrid., _(*5)

Create new project

composer create-project nette/web-project twigrid-quickstart

Install TwiGrid & client-side assets

cd twigrid-quickstart
composer require uestla/twigrid
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., _(*6)

We'll then update app/Presenters/templates/@layout.latte to load downloaded assets:, _(*7)



<link rel="stylesheet" href="{$basePath}/vendor/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="{$basePath}/vendor/twigrid-datagrid/assets/twigrid.datagrid.css">

Database

Download the SQLite3 file from the demo application and place it in app/Model/users.s3db., _(*8)

And we'll configure this database to be used by the application:, _(*9)
```
# config/local.neon
database:
    dsn: 'sqlite:%appDir%/Model/users.s3db'
```

Create datagrid

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., _(*10)

// app/Grids/UsersGrid.php

final class UsersGrid extends TwiGrid\DataGrid
{
    private $database;

    public function __construct(Nette\Database\Explorer $database)
    {
        parent::__construct();

        $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., _(*11)

// app/Grids/UsersGrid.php

final class UsersGrid extends TwiGrid\DataGrid
{
    // ...

    protected function build(): void
    {
        $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:, _(*12)

$this->setPrimaryKey('id');

And finally we'll tell TwiGrid how to load our users:, _(*13)

$this->setDataLoader(function () {
    return $this->database->table('user');
});

To properly inject our grid into presenters, we'll need to create a factory interface:, _(*14)
```
// 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:, _(*15)
```
services:
    - implement: UsersGridFactory
```

Having all of this done, we can now simply inject our grid factory into HomepagePresenter., _(*16)

// app/Presenters/HomepagePresenter.php

class HomepagePresenter extends BasePresenter
{
    /** @var \UsersGridFactory @inject */
    public $usersGridFactory;
}

Now we'll add the control factory itself:, _(*17)

// app/Presenters/HomepagePresenter.php

protected function createComponentUsersGrid(): \UsersGrid
{
    return $this->usersGridFactory->create();
}

We're nearly done! Just open app/Presenters/templates/Homepage/default.latte, delete the whole content and replace it with, _(*18)
```
{block content}
    {control usersGrid}
{/block}
```
That's all, folks!, _(*19)

Now when you'll open the page, you might see something like this:, _(*20)

, _(*21)
Final improvement, _(*22)

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:, _(*23)
```
{* app/Grids/UsersGrid.latte *}

{extends $defaultTemplate}

{define body-cell-country_code}
    <td>{$record->country->title}</td>
{/define}
```
And tell TwiGrid to use this template:, _(*24)
```
// app/Grids/UsersGrid.php::build()

$this->setTemplateFile(__DIR__ . '/UsersGrid.latte');
```
Simple as that!, _(*25)

To see more examples, please visit the demo page. Enjoy!, _(*26)

The Versions

29/05 2018

dev-master

9999999-dev http://github.com/uestla/twigrid

Experimental DataGrid for Nette Framework

library twigrid

Experimental DataGrid for Nette Framework

uestla/twigrid

The README.md

TwiGrid

Quickstart

Create new project

Install TwiGrid & client-side assets

Database

Create datagrid

More

The Versions

dev-master

The Requires

The Development Requires

by Petr Kessler

11.2.8

The Requires

The Development Requires

by Petr Kessler

11.2.7

The Requires

The Development Requires

by Petr Kessler

11.2.6

The Requires

The Development Requires

by Petr Kessler

11.2.5

The Requires

The Development Requires

by Petr Kessler

11.2.4

The Requires

The Development Requires

by Petr Kessler

11.2.3

The Requires

The Development Requires

by Petr Kessler

11.2.2

The Requires

The Development Requires

by Petr Kessler

11.2.1

The Requires

The Development Requires

by Petr Kessler

11.2.0

The Requires

The Development Requires

by Petr Kessler

11.1.0

The Requires

The Development Requires

by Petr Kessler

11.0.2

The Requires

by Petr Kessler

11.0.1

The Requires

by Petr Kessler

11.0.0

The Requires

by Petr Kessler

dev-next-level

The Requires

by Petr Kessler

10.0.2

The Requires

by Petr Kessler

10.0.1

The Requires

by Petr Kessler

10.0.0

The Requires

by Petr Kessler

9.0.1

The Requires

by Petr Kessler