docs: screenshots of all datagrid features + missing feature audit

README.md

@@ -30,6 +30,31 @@ This project is here for super-simple demonstration how to create a project with
 
 https://examples.contributte.org/datagrid-skeleton/
 
+## Screenshots
+
+| Page | Static | Interactive |
+|------|--------|-------------|
+| Home | <a href="screenshots/00-home.png"><img src="screenshots/00-home.png" width="240"></a> | |
+| Filters | <a href="screenshots/01-filters.png"><img src="screenshots/01-filters.png" width="240"></a> | |
+| Outer Filters | <a href="screenshots/02-outer-filters.png"><img src="screenshots/02-outer-filters.png" width="240"></a> | <a href="screenshots/02-outer-filters-expanded.png"><img src="screenshots/02-outer-filters-expanded.png" width="240"></a> |
+| Columns | <a href="screenshots/03-columns.png"><img src="screenshots/03-columns.png" width="240"></a> | <a href="screenshots/03-columns-hideable.png"><img src="screenshots/03-columns-hideable.png" width="240"></a> |
+| Actions | <a href="screenshots/04-actions.png"><img src="screenshots/04-actions.png" width="240"></a> | <a href="screenshots/04-actions-multiaction.png"><img src="screenshots/04-actions-multiaction.png" width="240"></a> |
+| Group Actions | <a href="screenshots/05-group-actions.png"><img src="screenshots/05-group-actions.png" width="240"></a> | <a href="screenshots/05-group-actions-selected.png"><img src="screenshots/05-group-actions-selected.png" width="240"></a> |
+| Row | <a href="screenshots/06-row.png"><img src="screenshots/06-row.png" width="240"></a> | |
+| ItemDetail | <a href="screenshots/07-item-detail.png"><img src="screenshots/07-item-detail.png" width="240"></a> | <a href="screenshots/07-item-detail-expanded.png"><img src="screenshots/07-item-detail-expanded.png" width="240"></a> |
+| Export | <a href="screenshots/08-export.png"><img src="screenshots/08-export.png" width="240"></a> | |
+| TreeView | <a href="screenshots/09-tree-view.png"><img src="screenshots/09-tree-view.png" width="240"></a> | <a href="screenshots/09-tree-view-expanded.png"><img src="screenshots/09-tree-view-expanded.png" width="240"></a> |
+| Edit | <a href="screenshots/10-edit.png"><img src="screenshots/10-edit.png" width="240"></a> | <a href="screenshots/10-edit-inline.png"><img src="screenshots/10-edit-inline.png" width="240"></a> |
+| Add | <a href="screenshots/11-add.png"><img src="screenshots/11-add.png" width="240"></a> | <a href="screenshots/11-add-inline.png"><img src="screenshots/11-add-inline.png" width="240"></a> |
+| Localization | <a href="screenshots/12-localization.png"><img src="screenshots/12-localization.png" width="240"></a> | |
+| CDN | <a href="screenshots/13-cdn.png"><img src="screenshots/13-cdn.png" width="240"></a> | |
+| No Pagination | <a href="screenshots/14-no-pagination.png"><img src="screenshots/14-no-pagination.png" width="240"></a> | |
+| Sorting | <a href="screenshots/15-sorting.png"><img src="screenshots/15-sorting.png" width="240"></a> | |
+| Columns Summary | <a href="screenshots/16-columns-summary.png"><img src="screenshots/16-columns-summary.png" width="240"></a> | |
+| Array Datasource | <a href="screenshots/17-array-datasource.png"><img src="screenshots/17-array-datasource.png" width="240"></a> | |
+| State Storage | <a href="screenshots/18-state-storage.png"><img src="screenshots/18-state-storage.png" width="240"></a> | |
+| Events | <a href="screenshots/19-events.png"><img src="screenshots/19-events.png" width="240"></a> | |
+
 ## Installation
 
 To install latest version of `contributte/datagrid-skeleton` use [Composer](https://getcomposer.org).

app/UI/@Templates/@layout.latte

@@ -66,6 +66,11 @@
 					<li><a n:class="isLinkCurrent('Localization:*') ? 'active'" n:href="Localization:">Localization</a></li>
 					<li><a n:class="isLinkCurrent('Cdn:*') ? 'active'" n:href="Cdn:">CDN</a></li>
 					<li><a n:class="isLinkCurrent('NoPagination:*') ? 'active'" n:href="NoPagination:">No Pagination</a></li>
+					<li><a n:class="isLinkCurrent('Sorting:*') ? 'active'" n:href="Sorting:">Sorting</a></li>
+					<li><a n:class="isLinkCurrent('ColumnsSummary:*') ? 'active'" n:href="ColumnsSummary:">Columns Summary</a></li>
+					<li><a n:class="isLinkCurrent('ArrayDatasource:*') ? 'active'" n:href="ArrayDatasource:">Array Datasource</a></li>
+					<li><a n:class="isLinkCurrent('StateStorage:*') ? 'active'" n:href="StateStorage:">State Storage</a></li>
+					<li><a n:class="isLinkCurrent('Events:*') ? 'active'" n:href="Events:">Events</a></li>
 				</ul>
 			</div>
 		</nav>

app/UI/Actions/ActionsPresenter.php

@@ -3,6 +3,7 @@
 namespace App\UI\Actions;
 
 use App\UI\AbstractPresenter;
+use Contributte\Datagrid\Column\Action\Confirmation\CallbackConfirmation;
 use Contributte\Datagrid\Column\Action\Confirmation\StringConfirmation;
 use Contributte\Datagrid\Datagrid;
 
@@ -61,6 +62,18 @@
 				new StringConfirmation('Do you really want to delete example %s?', 'name')
 			);
 
+		$grid->addAction('archive', '', 'archive!')
+			->setIcon('box-archive')
+			->setTitle('Archive')
+			->setClass('btn btn-xs btn-warning ajax')
+			->setConfirmation(
+				new CallbackConfirmation(
+					function ($item): string {
+						return 'Do you really want to archive "' . $item['name'] . '" (ID: ' . $item['id'] . ')?';
+					}
+				)
+			);
+
 		$grid->addToolbarButton('this', 'Toolbar')->addAttributes(['foo' => 'bar']);
 		$grid->addToolbarButton('this#2', 'Button', ['foo' => 'bar']);
 
@@ -85,4 +98,10 @@
 		$this->redrawControl('flashes');
 	}
 
+	public function handleArchive(): void
+	{
+		$this->flashMessage('Archived!', 'info');
+		$this->redrawControl('flashes');
+	}
+
 }

app/UI/ArrayDatasource/ArrayDatasourcePresenter.php

@@ -0,0 +1,63 @@
+<?php declare(strict_types = 1);
+
+namespace App\UI\ArrayDatasource;
+
+use App\UI\AbstractPresenter;
+use Contributte\Datagrid\Datagrid;
+
+final class ArrayDatasourcePresenter extends AbstractPresenter
+{
+
+	public function createComponentGrid(): Datagrid
+	{
+		$grid = new DataGrid();
+
+		// Array datasource - no database needed
+		$data = [
+			['id' => 1, 'name' => 'John Doe', 'email' => 'john@example.com', 'age' => 32, 'role' => 'admin'],
+			['id' => 2, 'name' => 'Jane Smith', 'email' => 'jane@example.com', 'age' => 28, 'role' => 'user'],
+			['id' => 3, 'name' => 'Bob Johnson', 'email' => 'bob@example.com', 'age' => 45, 'role' => 'editor'],
+			['id' => 4, 'name' => 'Alice Brown', 'email' => 'alice@example.com', 'age' => 35, 'role' => 'admin'],
+			['id' => 5, 'name' => 'Charlie Wilson', 'email' => 'charlie@example.com', 'age' => 22, 'role' => 'user'],
+			['id' => 6, 'name' => 'Diana Prince', 'email' => 'diana@example.com', 'age' => 30, 'role' => 'editor'],
+			['id' => 7, 'name' => 'Edward Norton', 'email' => 'edward@example.com', 'age' => 41, 'role' => 'user'],
+			['id' => 8, 'name' => 'Fiona Apple', 'email' => 'fiona@example.com', 'age' => 38, 'role' => 'admin'],
+			['id' => 9, 'name' => 'George Lucas', 'email' => 'george@example.com', 'age' => 55, 'role' => 'user'],
+			['id' => 10, 'name' => 'Hannah Montana', 'email' => 'hannah@example.com', 'age' => 19, 'role' => 'user'],
+		];
+
+		$grid->setDataSource($data);
+
+		$grid->setItemsPerPageList([5, 10, 20], true);
+
+		// Default per page
+		$grid->setDefaultPerPage(5);
+
+		$grid->addColumnNumber('id', 'Id')
+			->setAlign('start')
+			->setSortable();
+
+		$grid->addColumnText('name', 'Name')
+			->setSortable()
+			->setFilterText();
+
+		$grid->addColumnText('email', 'E-mail')
+			->setSortable()
+			->setFilterText();
+
+		$grid->addColumnNumber('age', 'Age')
+			->setSortable();
+
+		$grid->addColumnText('role', 'Role')
+			->setSortable()
+			->setFilterSelect([
+				'' => 'All',
+				'admin' => 'Admin',
+				'user' => 'User',
+				'editor' => 'Editor',
+			]);
+
+		return $grid;
+	}
+
+}

app/UI/ArrayDatasource/Templates/default.latte

@@ -0,0 +1,3 @@
+{block content}
+	{control grid}
+{/block}

app/UI/Columns/ColumnsPresenter.php

@@ -36,6 +36,7 @@ public function createComponentGrid(): Datagrid
 			->setSortable();
 
 		$grid->addColumnLink('email', 'E-mail', 'this')
+			->setOpenInNewTab()
 			->setSortable();
 
 		$columnStatus = $grid->addColumnStatus('status', 'Status');
@@ -59,11 +60,17 @@ public function createComponentGrid(): Datagrid
 			->setFormat('j. n. Y')
 			->setSortable();
 
+		$grid->addColumnNumber('countries_visited', 'Countries Visited')
+			->setFormat(0, '.', ',')
+			->setSortable();
+
 		$grid->addColumnNumber('age', 'Age')
 			->setRenderer(fn (Row $row): ?int => DateTime::fromSafe($row->asDateTime('birth_date'))?->diff(new DateTime())->y);
 
 		$grid->setColumnsHideable();
 
+		$grid->setColumnsOrder(['id', 'email', 'status', 'countries_visited', 'emojis', 'birth_date', 'age']);
+
 		$grid->addColumnCallback('status', function (ColumnStatus $column, Row $row): void {
 			if ($row['id'] === 3) {
 				$column->removeOption('active');

app/UI/ColumnsSummary/ColumnsSummaryPresenter.php

@@ -0,0 +1,41 @@
+<?php declare(strict_types = 1);
+
+namespace App\UI\ColumnsSummary;
+
+use App\UI\AbstractPresenter;
+use Contributte\Datagrid\Datagrid;
+
+final class ColumnsSummaryPresenter extends AbstractPresenter
+{
+
+	public function createComponentGrid(): Datagrid
+	{
+		$grid = new DataGrid();
+
+		$grid->setDataSource($this->dibiConnection->select('*')->from('users'));
+
+		$grid->setItemsPerPageList([20, 50, 100], true);
+
+		$grid->addColumnNumber('id', 'Id')
+			->setAlign('start')
+			->setSortable();
+
+		$grid->addColumnText('name', 'Name')
+			->setSortable()
+			->setFilterText();
+
+		$grid->addColumnNumber('countries_visited', 'Countries Visited')
+			->setFormat(0, '.', ',')
+			->setSortable();
+
+		$grid->addColumnText('status', 'Status');
+
+		// Columns summary - shows sum in footer row for specified columns
+		$columnsSummary = $grid->setColumnsSummary(['id', 'countries_visited']);
+		$columnsSummary->setFormat('id', 0, '.', ' ');
+		$columnsSummary->setFormat('countries_visited', 0, '.', ',');
+
+		return $grid;
+	}
+
+}

app/UI/ColumnsSummary/Templates/default.latte

@@ -0,0 +1,3 @@
+{block content}
+	{control grid}
+{/block}

app/UI/Edit/EditPresenter.php

@@ -84,8 +84,14 @@ public function createComponentGrid(): Datagrid
 			$this->redrawControl('flashes');
 		};
 
+		$inlineEdit->onCustomRedraw[] = function (): void {
+			$this['grid']->redrawControl();
+		};
+
 		$inlineEdit->setShowNonEditingColumns();
 
+		$grid->allowRowsInlineEdit(fn ($item): bool => $item['id'] % 2 === 0);
+
 		return $grid;
 	}
 

app/UI/Events/EventsPresenter.php

@@ -0,0 +1,66 @@
+<?php declare(strict_types = 1);
+
+namespace App\UI\Events;
+
+use App\UI\AbstractPresenter;
+use Contributte\Datagrid\Datagrid;
+
+final class EventsPresenter extends AbstractPresenter
+{
+
+	public function createComponentGrid(): Datagrid
+	{
+		$grid = new DataGrid();
+
+		$grid->setDataSource($this->dibiConnection->select('*')->from('users'));
+
+		$grid->setItemsPerPageList([20, 50, 100], true);
+
+		$grid->addColumnText('id', 'Id')
+			->setSortable();
+
+		$grid->addColumnText('email', 'E-mail')
+			->setSortable()
+			->setFilterText();
+
+		$grid->addColumnText('name', 'Name')
+			->setSortable()
+			->setFilterText();
+
+		$grid->addColumnText('status', 'Status');
+
+		$grid->setColumnsHideable();
+
+		// Event: onRedraw - triggered when grid is redrawn
+		$grid->onRedraw[] = function () use ($grid): void {
+			$grid->getPresenter()->flashMessage('Event: onRedraw triggered', 'info');
+		};
+
+		// Event: onRender - triggered when grid is rendered
+		$grid->onRender[] = function (Datagrid $grid): void {
+			// Useful for modifying grid state before rendering
+		};
+
+		// Event: onColumnAdd - triggered when a column is added
+		$grid->onColumnAdd[] = function (string $key, $column): void {
+			// Useful for modifying columns after they are added
+		};
+
+		// Event: onFiltersAssembled - triggered when filters are assembled
+		$grid->onFiltersAssembled[] = function (array $filters): void {
+			// Useful for modifying filters before they are applied
+		};
+
+		// Events: onColumnShow / onColumnHide - triggered when columns visibility changes
+		$grid->onColumnShow[] = function (string $column): void {
+			// Useful for tracking column visibility
+		};
+
+		$grid->onColumnHide[] = function (string $column): void {
+			// Useful for tracking column visibility
+		};
+
+		return $grid;
+	}
+
+}

app/UI/Events/Templates/default.latte

@@ -0,0 +1,3 @@
+{block content}
+	{control grid}
+{/block}

app/UI/Export/ExportPresenter.php

@@ -35,7 +35,7 @@ public function createComponentGrid(): Datagrid
 			die;
 		})->setAjax();
 
-		$grid->addExportCsvFiltered('Csv export (filtered)', 'examples.csv')
+		$grid->addExportCsvFiltered('Csv export (filtered)', 'examples.csv', 'windows-1250', ',', true)
 			->setTitle('Csv export (filtered)');
 
 		$columnName = new ColumnText($grid, 'name', 'name', 'Name');
@@ -44,13 +44,15 @@ public function createComponentGrid(): Datagrid
 				fn ($item) => $item['id'] % 2 === 0 ? 'No' : 'Yes'
 			);
 
-		$grid->addExportCsv('Csv export', 'examples-all.csv')
+		$grid->addExportCsv('Csv export', 'examples-all.csv', 'utf-8', ',', true)
 			->setTitle('Csv export')
 			->setColumns([
 				$columnName,
 				$columnEven,
 			]);
 
+		$grid->setColumnsExportOrder(['name', 'status', 'birth_date', 'id']);
+
 		return $grid;
 	}
 

app/UI/Filters/FiltersPresenter.php

@@ -20,12 +20,18 @@ public function createComponentGrid(): Datagrid
 
 		$grid->setItemsPerPageList([20, 50, 100], true);
 
+		$grid->setAutoSubmit(false);
+		$grid->setColumnReset();
+		$grid->setRefreshUrl();
+
 		$grid->addColumnText('id', 'Id')
 			->setFilterText()
 			->setExactSearch();
 
 		$grid->addColumnText('name', 'Name')
-			->setFilterText();
+			->setFilterText()
+			->setSplitWordsSearch(true)
+			->setConjunctionSearch();
 
 		$grid->addColumnStatus('status', 'Status')
 			->setFilterSelect([