PHPackages drago-ex/datagrid - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Search & Filtering](/categories/search) 4. / 5. drago-ex/datagrid ActiveLibrary[Search & Filtering](/categories/search) drago-ex/datagrid ================= A simple datagrid for sorting and filtering data. v1.1.0(1w ago)02141MITPHPPHP >=8.3 <9CI passing Since Jun 7Pushed 5d agoCompare [ Source](https://github.com/drago-ex/datagrid)[ Packagist](https://packagist.org/packages/drago-ex/datagrid)[ RSS](/packages/drago-ex-datagrid/feed)WikiDiscussions main Synced today READMEChangelog (4)Dependencies (7)Versions (4)Used By (1) Drago DataGrid ============== [](#drago-datagrid) Drago DataGrid is a Nette component for rendering Bootstrap 5 tables with filtering, sorting, pagination and row actions. [![License: MIT](https://camo.githubusercontent.com/fdf2982b9f5d7489dcf44570e714e3a15fce6253e0cc6b5aa61a075aac2ff71b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d79656c6c6f772e737667)](https://github.com/drago-ex/datagrid/blob/main/license)[![PHP version](https://camo.githubusercontent.com/01f7e10cf8573a20df2a41139852842a2b4212fffa3bf40f39c8b86f96dea85a/68747470733a2f2f62616467652e667572792e696f2f70682f647261676f2d657825324664617461677269642e737667)](https://badge.fury.io/ph/drago-ex%2Fdatagrid)[![Coding Style](https://github.com/drago-ex/datagrid/actions/workflows/coding-style.yml/badge.svg)](https://github.com/drago-ex/datagrid/actions/workflows/coding-style.yml) Requirements ------------ [](#requirements) - PHP >= 8.3 - Nette Framework - Dibi - Latte - Bootstrap 5 - Naja Installation ------------ [](#installation) ``` composer require drago-ex/datagrid ``` Frontend Assets --------------- [](#frontend-assets) Add the Composer package as a local npm dependency: ``` { "type": "module", "dependencies": { "drago-datagrid": "file:vendor/drago-ex/datagrid" } } ``` Install dependencies: ``` npm install ``` Import the assets: ``` import naja from 'naja'; import DataGrid from 'drago-datagrid'; import 'drago-datagrid/styles/datagrid'; naja.initialize(); new DataGrid().initialize(naja); ``` Basic Usage ----------- [](#basic-usage) ``` use Dibi\Connection; use Drago\Datagrid\DataGrid; use Nette\Application\UI\Presenter; final class ProductPresenter extends Presenter { public function __construct( private readonly Connection $db, ) { } protected function createComponentGrid(): DataGrid { $grid = new DataGrid; $grid->setDataSource( $this->db->select('*')->from('products') ); $grid->addColumnText('name', 'Name')->setFilterText(); $grid->addColumnText('status', 'Status')->setFilterSelect([ 'active' => 'Active', 'inactive' => 'Inactive', ]); $grid->addColumnDate('created_at', 'Created', format: 'd.m.Y')->setFilterDate(); return $grid; } } ``` Render the component in Latte: ``` {control grid} ``` Data Source ----------- [](#data-source) The grid expects a `Dibi\Fluent` data source. Filtering, sorting and pagination are applied to a cloned query during rendering. ``` $grid->setDataSource( $this->db->select('*')->from('products')->orderBy('id DESC') ); ``` The data source controls the initial order. The grid keeps its sorting indicator neutral until a user selects a sortable column. The first click sorts that column ascending, and subsequent clicks toggle between ascending and descending order. For stable pagination, always use a deterministic initial order. When ordering by a non-unique value, add the primary key as the final sorting criterion. ``` $grid->setDataSource( $this->db->select('*') ->from('products') ->orderBy('name ASC') ->orderBy('id ASC') ); ``` Columns ------- [](#columns) ``` $grid->addColumnText('name', 'Product Name'); $grid->addColumnText('sku', 'SKU', sortable: false); $grid->addColumnDate('updated_at', 'Updated', format: 'd.m.Y'); ``` Column arguments: - `name` - database column name - `label` - column label - `sortable` - enables header sorting, default is `true` - `formatter` - optional callback for rendering cell values Natural numeric sorting can be enabled on text columns: ``` $grid->addColumnText('code', 'Code')->setNaturalSort(); ``` Column text alignment can be changed with Bootstrap alignment helpers: ``` $grid->addColumnText('id', 'ID')->alignRight(); $grid->addColumnText('status', 'Status')->alignCenter(); $grid->addColumnText('name', 'Name')->alignLeft(); ``` Alignment affects only table rendering. It does not validate or convert the column value. Filters ------- [](#filters) ``` $grid->addColumnText('name', 'Name')->setFilterText(); $grid->addColumnText('status', 'Status')->setFilterSelect([ 'active' => 'Active', 'inactive' => 'Inactive', ]); $grid->addColumnDate('created_at', 'Created')->setFilterDate(); ``` Filter types: - `setFilterText()` - LIKE search - `setFilterSelect(array $items)` - exact match select - `setFilterDate()` - date filter in `YYYY-MM-DD` format Date filters also support range values in the form `YYYY-MM-DD|YYYY-MM-DD`. Active filters can be cleared individually with the small clear button next to the filter input. The reset button clears all filters at once. Filter Modes ------------ [](#filter-modes) Filters can be rendered in two modes: ``` $grid->setFilterMode('top'); ``` `top` is the default mode. Filters are displayed in a toolbar above the table. ``` $grid->setFilterMode('inline'); ``` `inline` displays filters in a second table header row under the related columns. Both modes use the same filter definitions and AJAX behavior. Row Actions ----------- [](#row-actions) Set the primary key before adding actions: ``` $grid->setPrimaryKey('id'); ``` Add action callbacks: ``` $grid->addAction('Edit', 'edit!', 'ajax btn btn-sm btn-primary', function (int $id): void { $this->redirect('edit', $id); }); $grid->addAction('Delete', 'delete!', 'ajax btn btn-sm btn-danger', function (int $id): void { // Delete row }); ``` Actions can be shown or hidden per row: ``` $grid->addAction( 'Activate', 'activate!', 'ajax btn btn-sm btn-success', callback: fn(int $id) => $this->activate($id), condition: fn(array $row): bool => !$row['active'], ); ``` The `condition` callback receives the current row as `array`. Row Click --------- [](#row-click) The whole row can trigger an action: ``` $grid->setPrimaryKey('id'); $grid->setRowClickAction('edit!'); $grid->addAction('Edit', 'edit!', 'ajax btn btn-sm btn-primary', function (int $id): void { $this->redirect('edit', $id); }); ``` If the action signal matches `setRowClickAction()`, the action button is hidden and only the row click is used. Action Display -------------- [](#action-display) Show row actions only on hover: ``` $grid->setAutoHideActions(); ``` Actions with signals `edit!` and `delete!` are displayed after other custom actions. Formatting Values ----------------- [](#formatting-values) Simple values are escaped automatically: ``` $grid->addColumnText('price', 'Price', formatter: function (mixed $value, array $row): string { return number_format((float) $value, 2) . ' CZK'; }); ``` Return `Nette\Utils\Html` when you want to render HTML: ``` use Nette\Utils\Html; $grid->addColumnText('status', 'Status', formatter: function (mixed $value, array $row): Html { return Html::el('span') ->class($value === 'active' ? 'badge bg-success' : 'badge bg-secondary') ->setText((string) $value); }); ``` Localization ------------ [](#localization) The grid supports `Nette\Localization\Translator`: ``` $grid->setTranslator($this->translator); ``` Translated values include column labels, action labels, filter labels, reset button and pagination text. AJAX ---- [](#ajax) The grid is built for Naja. Filtering, sorting, pagination, page size changes and row actions are handled through AJAX and keep browser history updated. Text filters are submitted by pressing Enter. Select and date filters are submitted automatically when their value changes. Security -------- [](#security) - Cell values are escaped unless a formatter returns `Nette\Utils\Html`. - Filters use parameterized Dibi queries. - Sort direction is normalized to `ASC` or `DESC` before it is applied to SQL. - Empty filter values are removed from persistent parameters. ### Health Score 25 — LowBetter than 35% of packages Maintenance65 Regular maintenance activity Popularity14 Limited adoption so far Community8 Small or concentrated contributor base Maturity11 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~7 days Total 3 Last Release 12d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/5998929?v=4)[Zdeněk Papučík](/maintainers/accgit)[@accgit](https://github.com/accgit) --- Top Contributors [![accgit](https://avatars.githubusercontent.com/u/5998929?v=4)](https://github.com/accgit "accgit (133 commits)") ### Embed Badge ![Health badge](/badges/drago-ex-datagrid/health.svg) ``` [![Health](https://phpackages.com/badges/drago-ex-datagrid/health.svg)](https://phpackages.com/packages/drago-ex-datagrid) ``` ### Alternatives [tomaj/nette-api Nette api 36273.2k8](/packages/tomaj-nette-api)[nette/web-project Nette: Standard Web Project 10993.3k](/packages/nette-web-project)[nette/code-checker ✅ Nette CodeChecker: A simple tool to check source code against a set of Nette coding standards. 911.7M6](/packages/nette-code-checker) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)