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(1mo ago)02211MITPHPPHP >=8.3 <9CI passing

Since Jun 7Pushed 3w 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 1w ago

READMEChangelog (4)Dependencies (7)Versions (5)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

44

—

FairBetter than 90% of packages

Maintenance92

Actively maintained with recent releases

Popularity13

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

 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

4

Last Release

50d 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 (134 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

[nette/web-project

Nette: Standard Web Project

11093.7k](/packages/nette-web-project)[tomaj/nette-api

Nette api

36276.9k8](/packages/tomaj-nette-api)[nette/code-checker

✅ Nette CodeChecker: A simple tool to check source code against a set of Nette coding standards.

881.7M6](/packages/nette-code-checker)[nepada/form-renderer

Latte template based form renderer for Nette forms with full support for Bootstrap 3, 4 & 5.

11254.5k](/packages/nepada-form-renderer)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)