Sample of Nittro usage in a basic datagrid-like setting

presenter.php

<?php

use Nittro\Bridges\NittroUI\Presenter,
    Nette\Application\UI\Form;

class PeoplePresenter extends Presenter {
    
    /** @var \Dibi\Connection */
    private $dibi;
    
    /** @var array */
    private $entries = null;
    
    public function getEntries() {
        if ($this->entries === null) {
            $this->entries = $this->dibi->fetchAll('SELECT * FROM [people] ORDER BY [name]');
            
        }
        
        return $this->entries;
        
    }
    
    public function handleRemove($id) {
        $this->dibi->query('DELETE FROM [people] WHERE [id] = %i', $id);
        $this->flashMessage('Entry deleted');
        $this->postGet('this');
        
        // no need to render the template as Nittro removes the corresponding snippet for us
        $this->sendPayload();
        
    }
    
    public function renderDefault() {
        $this->template->entries = $this->getEntries();
    }
    
    public function doSaveEntry(Form $form, array $entry) {
        if (empty($entry['id'])) {
            $this->dibi->query('INSERT INTO [people] %v', $entry);
            $entry['id'] = $this->dibi->getInsertId();
        } else {
            $this->dibi->query('UPDATE [people] SET %a WHERE [id] = %i', array_diff_key($entry, ['id' => 1]), $entry['id']);
        }
        
        $this->flashMessage('Your changes have been saved');
        $this->postGet('this');
        
        // this is needed so that only the edited entry is rendered
        $this->entries = [ (object) $entry ];
        
        // redraw the dynamic snippet container
        $this->redrawControl('entries');
        
    }
    
    public function createComponentEntryForm() {
        $form = new Form();
        
        $form->addText('name', 'Name:')->setRequired();
        $form->addTextArea('address', 'Address:')->setRequired();
        $form->addText('phone', 'Phone:')->setRequired();
        $form->addHidden('id');
        $form->addSubmit('save', 'Save');
        
        $form->onSuccess[] = [$this, 'doSaveEntry'];
        
        return $form;
        
    }
}

template.latte

<h3>People</h3>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Phone</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    
    {* the n:dynamic macro is essentially the same as typing 'class="snippet-container" data-dynamic-mask="{snippetId entry-\d+}"' *}
    <tbody n:snippet="entries" n:dynamic="entry-\d+" data-dynamic-element="tr" data-dynamic-sort=".name asc">
        {foreach $entries as $entry}
            <tr n:snippet="entry-$entry->id">
                <td class="name">{$entry->name}</td>
                <td>{$entry->address}</td>
                <td>{$entry->phone}</td>
                <td>
                    {* edit button needs the whole entry data *}
                    <a href="#" class="btn-edit" data-entry="{json_encode($entry)}">Edit</a>
                    
                    {* remove button needs to link to the appropriate signal;
                        the "nittro-confirm" class uses the AutoConfirm widget
                        to ask confirmation before following through with deleting
                        the entry; the "data-dynamic-remove" attribute tells Nittro
                        which dynamic snippet to remove when the link is clicked *}
                    <a n:href="remove! id => $entry->id"
                        class="nittro-confirm"
                        data-prompt="Are you sure you want to remove {$entry->name}?"
                        data-confirm="Yes"
                        data-cancel="No"
                        data-dynamic-remove="#{snippetId entry-$entry->id}">Remove</a>
                </td>
            </tr>
        {/foreach}
    </tbody>
</table>

{capture $form}
    {form entryForm}
        <table>
            <tr>
                <th>{label name /}</th>
                <td>{input name}</td>
            </tr>
            <tr>
                <th>{label address /}</th>
                <td>{input address}</td>
            </tr>
            <tr>
                <th>{label phone /}</th>
                <td>{input phone}</td>
            </tr>
        </table>
        {input save class => 'hide'} {* the dialog has its own buttons *}
    {/form}
{/capture}

<script type="application/javascript">
_stack.push(function(di, Utils) {
    var dlg = null;
    
    function handleEdit(evt) {
        var btn = Utils.DOM.closest(evt.target, 'a', 'btn-edit');
        
        if (btn) {
            evt.preventDefault();
            dlg.setValues(Utils.DOM.getData(btn, 'entry'));
            dlg.show();
        }
    }
    
    di.getService('page').getSnippet({snippetId entries})
        .setup(function(elem) {
            dlg = di.create('formDialog', {
                options: {
                    html: {$form}
                }
            });
            
            Utils.DOM.addListener(elem, 'click', handleEdit);
            
        })
        .teardown(function(elem) {
            dlg && dlg.destroy();
            dlg = null;
            Utils.DOM.removeListener(elem, 'click', handleEdit);
            
        });
});
</script>