Server-side data with Symfony

This tutorial shows how to connect Handsontable’s dataProvider plugin to a Symfony backend. You will build a product inventory grid that loads data with server-side pagination, sorting, and filtering, and that persists row create, update, and delete operations to a Symfony/Doctrine database. The recipe covers two API styles: a REST API (Steps 1–8) and an optional GraphQL variant using webonyx/graphql-php (Step 9).

View full example on GitHub

Difficulty: Intermediate
Time: ~30 minutes
Stack: Symfony 7 (PHP 8.2+), Doctrine ORM, Handsontable dataProvider

What You’ll Build

A product inventory data grid that:

Fetches paginated rows from GET /api/products on every page change
Sorts and filters rows on the server — the browser never loads the full dataset
Creates, updates, and deletes rows via POST, PATCH, and DELETE endpoints
Uses a stateless JSON API with no CSRF tokens required
Shows a loading overlay while data loads and an error toast when a request fails

Before you begin

PHP 8.2+ and Composer installed
A Symfony 7 project created (composer create-project symfony/skeleton inventory)

Doctrine ORM and Doctrine Migrations installed:

1
composer require doctrine/orm doctrine/doctrine-bundle doctrine/doctrine-migrations-bundle

A configured database (MySQL or PostgreSQL; set DATABASE_URL in .env)
Node.js 22 and Handsontable installed (npm install handsontable)

Scaffold the backend

Install the required Symfony packages:
Terminal window
```
1
composer require symfony/framework-bundle symfony/routing
```
Create the entity, repository, controller, and seed command:
Terminal window
```
1
php bin/console make:entity Product
2
php bin/console make:controller ProductController
```
What’s happening:
- make:entity Product generates src/Entity/Product.php and src/Repository/ProductRepository.php.
- make:controller ProductController generates src/Controller/ProductController.php.
- Routes are declared as PHP attributes directly on the controller class and methods — there is no separate routes file.

Define the Doctrine migration

Generate a migration from the entity mapping:

1
php bin/console doctrine:migrations:generate

Replace the generated up() body with the products schema:

1
<?php
2

3
declare(strict_types=1);
4

5
namespace DoctrineMigrations;
6

7
use Doctrine\DBAL\Schema\Schema;
8
use Doctrine\Migrations\AbstractMigration;
9

10
// Generated by: php bin/console doctrine:migrations:generate
11
// Run with:     php bin/console doctrine:migrations:migrate
12
final class Version20240101000000 extends AbstractMigration
13
{
14
    public function getDescription(): string
15
    {
16
        return 'Create products table';
17
    }
18

19
    public function up(Schema $schema): void
20
    {
21
        $this->addSql(<<<SQL
22
            CREATE TABLE products (
23
                id         INT AUTO_INCREMENT NOT NULL,
24
                name       VARCHAR(255)   NOT NULL,
25
                sku        VARCHAR(255)   NOT NULL,
26
                category   VARCHAR(255)   NOT NULL,
27
                price      DECIMAL(10, 2) NOT NULL,
28
                stock      INT            NOT NULL,
29
                sort_order INT UNSIGNED   NOT NULL DEFAULT 0,
30
                INDEX IDX_PRODUCTS_SORT_ORDER (sort_order),
31
                UNIQUE INDEX UNIQ_PRODUCTS_SKU (sku),
32
                PRIMARY KEY (id)
33
            ) DEFAULT CHARACTER SET utf8mb4 COLLATE `utf8mb4_unicode_ci` ENGINE = InnoDB
34
        SQL);
35
    }
36

37
    public function down(Schema $schema): void
38
    {
39
        $this->addSql('DROP TABLE products');
40
    }
41
}

What’s happening:

id INT AUTO_INCREMENT is the primary key. This is the value Handsontable uses as rowId.
sku VARCHAR UNIQUE is generated server-side, so the grid marks it readOnly: true.
price DECIMAL(10, 2) stores two decimal places, matching the numeric cell type in the frontend column definition.
sort_order INT UNSIGNED tracks display order independently of the primary key so that row insertions at arbitrary positions work correctly.

Run the migration:

1
php bin/console doctrine:migrations:migrate

Create the Product entity

Open src/Entity/Product.php and define the Doctrine mapping with typed properties:

1
<?php
2

3
namespace App\Entity;
4

5
use App\Repository\ProductRepository;
6
use Doctrine\ORM\Mapping as ORM;
7

8
#[ORM\Entity(repositoryClass: ProductRepository::class)]
9
#[ORM\Table(name: 'products')]
10
class Product
11
{
12
    #[ORM\Id]
13
    #[ORM\GeneratedValue]
14
    #[ORM\Column]
15
    private ?int $id = null;
16

17
    #[ORM\Column(length: 255)]
18
    private string $name = '';
19

20
    // SKU is generated server-side, so it is read-only in the grid.
21
    #[ORM\Column(length: 255, unique: true)]
22
    private string $sku = '';
23

24
    #[ORM\Column(length: 255)]
25
    private string $category = '';
26

27
    // Stored as decimal string by Doctrine; cast to float in the controller response.
28
    #[ORM\Column(type: 'decimal', precision: 10, scale: 2)]
29
    private string $price = '0.00';
30

31
    #[ORM\Column]
32
    private int $stock = 0;
33

34
    // Tracks display order independently of the primary key so that
35
    // row insertions at arbitrary positions work correctly.
36
    #[ORM\Column(options: ['unsigned' => true, 'default' => 0])]
37
    private int $sortOrder = 0;
38

39
    public function getId(): ?int { return $this->id; }
40

41
    public function getName(): string { return $this->name; }
42
    public function setName(string $name): self { $this->name = $name; return $this; }
43

44
    public function getSku(): string { return $this->sku; }
45
    public function setSku(string $sku): self { $this->sku = $sku; return $this; }
46

47
    public function getCategory(): string { return $this->category; }
48
    public function setCategory(string $category): self { $this->category = $category; return $this; }
49

50
    public function getPrice(): string { return $this->price; }
51
    public function setPrice(mixed $price): self { $this->price = (string) $price; return $this; }
52

53
    public function getStock(): int { return $this->stock; }
54
    public function setStock(mixed $stock): self { $this->stock = (int) $stock; return $this; }
55

56
    public function getSortOrder(): int { return $this->sortOrder; }
57
    public function setSortOrder(int $sortOrder): self { $this->sortOrder = $sortOrder; return $this; }
58
}

What’s happening:

Each column is declared as a PHP 8 typed property with a Doctrine #[ORM\Column] attribute. There is no $fillable array — Doctrine tracks persistence via the entity manager, not mass-assignment.
price is mapped as decimal and stored as a PHP string by Doctrine to preserve precision. The controller explicitly casts it to float when serializing the response, so Handsontable’s numeric cell type receives 1299.99 instead of "1299.99".
sortOrder is an extra column that keeps the display order stable when rows are inserted at arbitrary positions using the context menu.

Create the ProductRepository

The ProductRepository handles all query logic, keeping the controller thin. Open src/Repository/ProductRepository.php:

1
<?php
2

3
namespace App\Repository;
4

5
use App\Entity\Product;
6
use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
7
use Doctrine\ORM\QueryBuilder;
8
use Doctrine\Persistence\ManagerRegistry;
9

10
class ProductRepository extends ServiceEntityRepository
11
{
12
    // Columns that may appear in filter and sort parameters.
13
    // Validated before use in any query to prevent SQL injection.
14
    private const ALLOWED_COLUMNS = ['name', 'sku', 'category', 'price', 'stock'];
15

16
    public function __construct(ManagerRegistry $registry)
17
    {
18
        parent::__construct($registry, Product::class);
19
    }
20

21
    // Returns paginated products + total count for the given filters and sort.
22
    // Called by ProductController::index().
23
    public function findPage(int $page, int $pageSize, array $sort, array $filters): array
24
    {
25
        $qb = $this->buildFilteredQuery($filters);
26

27
        // Clone the builder before adding ORDER BY / LIMIT so the COUNT query
28
        // counts all filtered rows, not just the current page.
29
        $total = (int) (clone $qb)
30
            ->select('COUNT(p.id)')
31
            ->getQuery()
32
            ->getSingleScalarResult();
33

34
        if (!empty($sort['prop']) && in_array($sort['prop'], self::ALLOWED_COLUMNS, true)) {
35
            $direction = in_array(strtolower($sort['order'] ?? ''), ['asc', 'desc'])
36
                ? strtolower($sort['order'])
37
                : 'asc';
38
            $qb->orderBy("p.{$sort['prop']}", $direction);
39
        } else {
40
            // Default: preserve insertion order via sort_order column.
41
            $qb->orderBy('p.sortOrder', 'asc');
42
        }
43

44
        $products = $qb
45
            ->setFirstResult(($page - 1) * $pageSize)
46
            ->setMaxResults($pageSize)
47
            ->getQuery()
48
            ->getResult();
49

50
        return ['products' => $products, 'total' => $total];
51
    }
52

53
    /** @return Product[] */
54
    public function createBlankRows(int $count, string $position = 'below', ?int $referenceRowId = null): array
55
    {
56
        $em      = $this->getEntityManager();
57
        $created = [];
58

59
        $em->wrapInTransaction(function () use ($em, $count, $position, $referenceRowId, &$created) {
60
            $insertAt = $this->resolveInsertOrder($referenceRowId, $position, $count);
61

62
            for ($i = 0; $i < $count; $i++) {
63
                $product = (new Product())
64
                    ->setName('')
65
                    ->setSku('NEW-' . strtoupper(bin2hex(random_bytes(3))))
66
                    ->setCategory('Electronics')
67
                    ->setPrice(0)
68
                    ->setStock(0)
69
                    ->setSortOrder($insertAt + $i);
70

71
                $em->persist($product);
72
                $created[] = $product;
73
            }
74

75
            $em->flush();
76
        });
77

78
        return $created;
79
    }
80

81
    // Determines the sortOrder for the new row(s) and shifts existing rows to make room.
82
    private function resolveInsertOrder(?int $referenceRowId, string $position, int $count): int
83
    {
84
        if ($referenceRowId !== null) {
85
            $ref = $this->find($referenceRowId);
86
            if ($ref) {
87
                $insertAt = $position === 'above'
88
                    ? $ref->getSortOrder()
89
                    : $ref->getSortOrder() + 1;
90

91
                // Shift rows at or after insertAt to make room for the new rows.
92
                $this->createQueryBuilder('p')
93
                    ->update()
94
                    ->set('p.sortOrder', 'p.sortOrder + :count')
95
                    ->where('p.sortOrder >= :insertAt')
96
                    ->setParameter('count', $count)
97
                    ->setParameter('insertAt', $insertAt)
98
                    ->getQuery()
99
                    ->execute();
100

101
                return $insertAt;
102
            }
103
        }
104

105
        // No reference row — append after the current maximum.
106
        $max = $this->createQueryBuilder('p')
107
            ->select('MAX(p.sortOrder)')
108
            ->getQuery()
109
            ->getSingleScalarResult();
110

111
        return (int) ($max ?? 0) + 1;
112
    }
113

114
    // Body: [{ id, changes: { name?, price?, ... } }, ...]
115
    public function updateRows(array $rows): void
116
    {
117
        $em = $this->getEntityManager();
118

119
        foreach ($rows as $row) {
120
            $product = $this->find($row['id'] ?? null);
121
            if (!$product) {
122
                continue;
123
            }
124

125
            $changes = $row['changes'] ?? [];
126
            unset($changes['id']);
127

128
            foreach ($changes as $field => $value) {
129
                if (!in_array($field, self::ALLOWED_COLUMNS, true)) {
130
                    continue;
131
                }
132
                $setter = 'set' . ucfirst($field);
133
                if (method_exists($product, $setter)) {
134
                    $product->$setter($value);
135
                }
136
            }
137
        }
138

139
        $em->flush();
140
    }
141

142
    // Body: [1, 4, 7]
143
    public function deleteByIds(array $ids): void
144
    {
145
        if (empty($ids)) {
146
            return;
147
        }
148

149
        $this->createQueryBuilder('p')
150
            ->delete()
151
            ->where('p.id IN (:ids)')
152
            ->setParameter('ids', $ids)
153
            ->getQuery()
154
            ->execute();
155
    }
156

157
    private function buildFilteredQuery(array $filters): QueryBuilder
158
    {
159
        $qb = $this->createQueryBuilder('p');
160
        $i  = 0;
161

162
        foreach ($filters as $filter) {
163
            $prop      = $filter['prop']      ?? null;
164
            $condition = $filter['condition'] ?? null;
165
            $value     = $filter['value']     ?? null;
166
            $value2    = $filter['value2']    ?? null;
167

168
            // Validate $prop before interpolating it into DQL to prevent injection.
169
            if (!$prop || !$condition || !in_array($prop, self::ALLOWED_COLUMNS, true)) {
170
                continue;
171
            }
172

173
            $p  = "v{$i}";
174
            $p2 = "v2{$i}";
175
            $i++;
176

177
            switch ($condition) {
178
                // Text conditions — use LOWER() for case-insensitive matching.
179
                case 'contains':
180
                    $qb->andWhere("LOWER(p.{$prop}) LIKE :{$p}")
181
                       ->setParameter($p, '%' . $this->escapeLike(strtolower((string) $value)) . '%');
182
                    break;
183
                case 'not_contains':
184
                    $qb->andWhere("LOWER(p.{$prop}) NOT LIKE :{$p}")
185
                       ->setParameter($p, '%' . $this->escapeLike(strtolower((string) $value)) . '%');
186
                    break;
187
                case 'begins_with':
188
                    $qb->andWhere("LOWER(p.{$prop}) LIKE :{$p}")
189
                       ->setParameter($p, $this->escapeLike(strtolower((string) $value)) . '%');
190
                    break;
191
                case 'ends_with':
192
                    $qb->andWhere("LOWER(p.{$prop}) LIKE :{$p}")
193
                       ->setParameter($p, '%' . $this->escapeLike(strtolower((string) $value)));
194
                    break;
195
                // Numeric conditions
196
                case 'eq':  $qb->andWhere("p.{$prop} = :{$p}")->setParameter($p, $value);  break;
197
                case 'neq': $qb->andWhere("p.{$prop} != :{$p}")->setParameter($p, $value); break;
198
                case 'gt':  $qb->andWhere("p.{$prop} > :{$p}")->setParameter($p, $value);  break;
199
                case 'gte': $qb->andWhere("p.{$prop} >= :{$p}")->setParameter($p, $value); break;
200
                case 'lt':  $qb->andWhere("p.{$prop} < :{$p}")->setParameter($p, $value);  break;
201
                case 'lte': $qb->andWhere("p.{$prop} <= :{$p}")->setParameter($p, $value); break;
202
                case 'between':
203
                    $qb->andWhere("p.{$prop} BETWEEN :{$p} AND :{$p2}")
204
                       ->setParameter($p, $value)
205
                       ->setParameter($p2, $value2);
206
                    break;
207
                case 'not_between':
208
                    // DQL has no NOT BETWEEN — express as two comparisons.
209
                    $qb->andWhere("p.{$prop} < :{$p} OR p.{$prop} > :{$p2}")
210
                       ->setParameter($p, $value)
211
                       ->setParameter($p2, $value2);
212
                    break;
213
                case 'empty':
214
                    $isString = in_array($prop, ['name', 'sku', 'category'], true);
215
                    $qb->andWhere($isString
216
                        ? "p.{$prop} IS NULL OR p.{$prop} = ''"
217
                        : "p.{$prop} IS NULL");
218
                    break;
219
                case 'not_empty':
220
                    $isString = in_array($prop, ['name', 'sku', 'category'], true);
221
                    $qb->andWhere($isString
222
                        ? "p.{$prop} IS NOT NULL AND p.{$prop} != ''"
223
                        : "p.{$prop} IS NOT NULL");
224
                    break;
225
            }
226
        }
227

228
        return $qb;
229
    }
230

231
    // Escape LIKE metacharacters so literal % and _ in user input don't act as
232
    // wildcards. MySQL's default escape char is \, so we prefix \, %, and _ with \.
233
    private function escapeLike(string $value): string
234
    {
235
        return addcslashes($value, '\\%_');
236
    }
237
}

What’s happening:

`findPage()` — paginate, sort, and filter

findPage() builds a Doctrine QueryBuilder and applies filters, sorting, and pagination in sequence.

Handsontable sends query parameters through the buildUrl() frontend helper:

Query parameter	Example value	PHP access
`page`, `pageSize`	`1`, `10`	`$request->query->get('page')`
`sort[prop]`, `sort[order]`	`'name'`, `'asc'`	`$request->query->all('sort')`
`filters[0][prop]`, `filters[0][condition]`, `filters[0][value]`	`'price'`, `'gt'`, `'100'`	`$request->query->all('filters')`

The filter loop in buildFilteredQuery() maps Handsontable condition names to DQL clauses. Text conditions use LOWER() for case-insensitive matching:

Handsontable condition	DQL equivalent
`contains`	`LOWER(p.prop) LIKE '%value%'`
`begins_with`	`LOWER(p.prop) LIKE 'value%'`
`gt`	`p.prop > :value`
`between`	`p.prop BETWEEN :v AND :v2`
`not_between`	`p.prop < :v OR p.prop > :v2`
`empty`	`p.prop IS NULL OR p.prop = ''`

Both $prop values (for filters and for sort) are validated against ALLOWED_COLUMNS before being interpolated into DQL expressions, preventing injection through unsanitized user input.

Why setFirstResult()/setMaxResults() instead of a paginator helper?

Handsontable already sends page and pageSize directly, so manual offset/limit (setFirstResult(($page - 1) * $pageSize)->setMaxResults($pageSize)) returns the { data, total } shape that fetchRows expects without any adapter code.

`createBlankRows()` — insert rows at position

When the user inserts rows from the context menu, onRowsCreate sends:

1
{ "position": "above", "referenceRowId": 5, "rowsAmount": 1 }

createBlankRows() calls resolveInsertOrder() to find the correct sortOrder value for the new row. It then shifts all existing rows at or after that position by $count to make room, and inserts the new rows. The entire operation runs inside wrapInTransaction().

`updateRows()` — update changed cells

After a cell edit, onRowsUpdate calls PATCH /api/products with:

1
[{ "id": 4, "changes": { "price": 149.99 }, "rowData": { "..." } }]

updateRows() finds each product by id and calls the appropriate setter for each key in changes, so unchanged fields are not overwritten.

`deleteByIds()` — delete rows

onRowsRemove calls DELETE /api/products with a plain array of row IDs:

1
[4, 7, 12]

deleteByIds() deletes them in one DELETE ... WHERE id IN (...) DQL query.

Seed the database

Create a Symfony Console command to populate the products table:

1
<?php
2

3
namespace App\Command;
4

5
use App\Entity\Product;
6
use Doctrine\ORM\EntityManagerInterface;
7
use Symfony\Component\Console\Attribute\AsCommand;
8
use Symfony\Component\Console\Command\Command;
9
use Symfony\Component\Console\Input\InputInterface;
10
use Symfony\Component\Console\Output\OutputInterface;
11

12
// Run with: php bin/console app:seed-products
13
#[AsCommand(name: 'app:seed-products', description: 'Seed the products table with sample data')]
14
class SeedProductsCommand extends Command
15
{
16
    public function __construct(private readonly EntityManagerInterface $em)
17
    {
18
        parent::__construct();
19
    }
20

21
    protected function execute(InputInterface $input, OutputInterface $output): int
22
    {
23
        // Skip if already seeded — safe to re-run.
24
        if ($this->em->getRepository(Product::class)->count([]) > 0) {
25
            $output->writeln('Products already seeded, skipping.');
26
            return Command::SUCCESS;
27
        }
28

29
        $products = [
30
            ['name' => 'Laptop Pro 15',               'sku' => 'LAP-001', 'category' => 'Electronics',  'price' => 1299.99, 'stock' => 42],
31
            ['name' => 'Wireless Mouse',              'sku' => 'MOU-002', 'category' => 'Accessories',  'price' => 29.99,   'stock' => 315],
32
            ['name' => 'USB-C Hub 7-in-1',            'sku' => 'HUB-003', 'category' => 'Accessories',  'price' => 49.99,   'stock' => 178],
33
            ['name' => 'NVMe SSD 1 TB',               'sku' => 'SSD-004', 'category' => 'Storage',      'price' => 109.99,  'stock' => 260],
34
            ['name' => 'Mechanical Keyboard',         'sku' => 'KEY-005', 'category' => 'Peripherals',  'price' => 139.99,  'stock' => 95],
35
            ['name' => 'Gigabit Switch 8-Port',       'sku' => 'SW8-006', 'category' => 'Networking',   'price' => 59.99,   'stock' => 74],
36
            ['name' => 'Portable Monitor 15"',        'sku' => 'MON-007', 'category' => 'Electronics',  'price' => 249.99,  'stock' => 38],
37
            ['name' => 'Webcam 4K',                   'sku' => 'CAM-008', 'category' => 'Peripherals',  'price' => 89.99,   'stock' => 112],
38
            ['name' => 'External HDD 2 TB',           'sku' => 'HDD-009', 'category' => 'Storage',      'price' => 74.99,   'stock' => 193],
39
            ['name' => 'Wi-Fi 6 Router',              'sku' => 'RTR-010', 'category' => 'Networking',   'price' => 179.99,  'stock' => 55],
40
            ['name' => 'Noise-Cancelling Headphones', 'sku' => 'HP-011',  'category' => 'Accessories',  'price' => 199.99,  'stock' => 67],
41
            ['name' => 'Thunderbolt Dock',            'sku' => 'DOC-012', 'category' => 'Accessories',  'price' => 219.99,  'stock' => 31],
42
            ['name' => 'Laptop Stand',                'sku' => 'STD-013', 'category' => 'Accessories',  'price' => 39.99,   'stock' => 220],
43
            ['name' => 'Gaming Controller',           'sku' => 'CTR-014', 'category' => 'Peripherals',  'price' => 69.99,   'stock' => 148],
44
            ['name' => 'HDMI Cable 2 m',              'sku' => 'CBL-015', 'category' => 'Accessories',  'price' => 12.99,   'stock' => 500],
45
            ['name' => 'MicroSD 256 GB',              'sku' => 'MSD-016', 'category' => 'Storage',      'price' => 29.99,   'stock' => 387],
46
            ['name' => 'PoE Switch 24-Port',          'sku' => 'POE-017', 'category' => 'Networking',   'price' => 299.99,  'stock' => 18],
47
            ['name' => 'Smart Plug 4-Pack',           'sku' => 'PLG-018', 'category' => 'Electronics',  'price' => 34.99,   'stock' => 142],
48
            ['name' => 'USB Microphone',              'sku' => 'MIC-019', 'category' => 'Peripherals',  'price' => 79.99,   'stock' => 89],
49
            ['name' => 'Ergonomic Chair Mat',         'sku' => 'MAT-020', 'category' => 'Accessories',  'price' => 44.99,   'stock' => 61],
50
            ['name' => 'Tablet 10" Wi-Fi',            'sku' => 'TAB-021', 'category' => 'Electronics',  'price' => 349.99,  'stock' => 27],
51
            ['name' => 'Power Bank 20000 mAh',        'sku' => 'PBK-022', 'category' => 'Accessories',  'price' => 49.99,   'stock' => 203],
52
            ['name' => 'OLED Monitor 27"',            'sku' => 'MON-023', 'category' => 'Electronics',  'price' => 699.99,  'stock' => 14],
53
            ['name' => 'USB-A 4-Port Hub',            'sku' => 'HUB-024', 'category' => 'Accessories',  'price' => 19.99,   'stock' => 341],
54
            ['name' => 'SSD Enclosure',               'sku' => 'ENC-025', 'category' => 'Storage',      'price' => 24.99,   'stock' => 115],
55
            ['name' => 'Network Cable Cat 6 10 m',   'sku' => 'CBL-026', 'category' => 'Networking',   'price' => 9.99,    'stock' => 620],
56
            ['name' => 'Drawing Tablet',              'sku' => 'TAB-027', 'category' => 'Peripherals',  'price' => 189.99,  'stock' => 43],
57
            ['name' => 'Smart Switch',                'sku' => 'SW2-028', 'category' => 'Electronics',  'price' => 44.99,   'stock' => 78],
58
            ['name' => 'Desk Lamp LED',               'sku' => 'LMP-029', 'category' => 'Accessories',  'price' => 34.99,   'stock' => 99],
59
            ['name' => 'RAID Controller',             'sku' => 'RAD-030', 'category' => 'Storage',      'price' => 149.99,  'stock' => 22],
60
            ['name' => 'VPN Router',                  'sku' => 'VPN-031', 'category' => 'Networking',   'price' => 219.99,  'stock' => 30],
61
            ['name' => 'Foot Pedal USB',              'sku' => 'FTP-032', 'category' => 'Peripherals',  'price' => 59.99,   'stock' => 47],
62
            ['name' => 'Mini PC',                     'sku' => 'MPC-033', 'category' => 'Electronics',  'price' => 449.99,  'stock' => 19],
63
            ['name' => 'Cable Management Kit',        'sku' => 'KIT-034', 'category' => 'Accessories',  'price' => 14.99,   'stock' => 265],
64
            ['name' => 'M.2 SSD 500 GB',              'sku' => 'SSD-035', 'category' => 'Storage',      'price' => 59.99,   'stock' => 183],
65
            ['name' => 'Managed Switch 48-Port',      'sku' => 'MSW-036', 'category' => 'Networking',   'price' => 599.99,  'stock' => 8],
66
            ['name' => 'RGB LED Strip',               'sku' => 'LED-037', 'category' => 'Electronics',  'price' => 24.99,   'stock' => 320],
67
            ['name' => 'Monitor Arm Single',          'sku' => 'ARM-038', 'category' => 'Accessories',  'price' => 54.99,   'stock' => 73],
68
            ['name' => 'Barcode Scanner USB',         'sku' => 'SCN-039', 'category' => 'Peripherals',  'price' => 119.99,  'stock' => 56],
69
            ['name' => 'NAS Enclosure 4-Bay',         'sku' => 'NAS-040', 'category' => 'Storage',      'price' => 329.99,  'stock' => 11],
70
            ['name' => 'Fiber Converter',             'sku' => 'FBC-041', 'category' => 'Networking',   'price' => 89.99,   'stock' => 25],
71
            ['name' => 'Wireless Presenter',          'sku' => 'PRE-042', 'category' => 'Peripherals',  'price' => 39.99,   'stock' => 67],
72
            ['name' => 'UPS 1500 VA',                 'sku' => 'UPS-043', 'category' => 'Electronics',  'price' => 259.99,  'stock' => 16],
73
            ['name' => 'Zip Ties 100-Pack',           'sku' => 'ZTP-044', 'category' => 'Accessories',  'price' => 7.99,    'stock' => 950],
74
            ['name' => 'HDD 4 TB Desktop',            'sku' => 'HDD-045', 'category' => 'Storage',      'price' => 89.99,   'stock' => 94],
75
            ['name' => 'Patch Panel 24-Port',         'sku' => 'PNL-046', 'category' => 'Networking',   'price' => 49.99,   'stock' => 35],
76
            ['name' => 'Numeric Keypad',              'sku' => 'KPD-047', 'category' => 'Peripherals',  'price' => 29.99,   'stock' => 130],
77
            ['name' => 'Server Rack 12U',             'sku' => 'RCK-048', 'category' => 'Networking',   'price' => 349.99,  'stock' => 7],
78
            ['name' => 'Thermal Paste 5 g',           'sku' => 'TPT-049', 'category' => 'Accessories',  'price' => 8.99,    'stock' => 480],
79
            ['name' => 'Flash Drive 128 GB',          'sku' => 'USB-050', 'category' => 'Storage',      'price' => 17.99,   'stock' => 740],
80
            ['name' => 'HDMI Splitter 4-Port',        'sku' => 'SPL-051', 'category' => 'Electronics',  'price' => 29.99,   'stock' => 88],
81
            ['name' => 'Smart Card Reader',           'sku' => 'SCR-052', 'category' => 'Peripherals',  'price' => 19.99,   'stock' => 210],
82
        ];
83

84
        foreach ($products as $i => $data) {
85
            $product = (new Product())
86
                ->setName($data['name'])
87
                ->setSku($data['sku'])
88
                ->setCategory($data['category'])
89
                ->setPrice($data['price'])
90
                ->setStock($data['stock'])
91
                ->setSortOrder($i + 1);
92
            $this->em->persist($product);
93
        }
94

95
        $this->em->flush();
96
        $output->writeln(count($products) . ' products seeded successfully.');
97
        return Command::SUCCESS;
98
    }
99
}

What’s happening:

The command is registered automatically via the #[AsCommand] attribute.
It checks count([]) > 0 before inserting, so it is safe to re-run on container restarts.
The 52 rows create six pages at the default pageSize: 10, making pagination controls visible from the first load.

Run the seeder:

1
php bin/console app:seed-products

Build the ProductController

ProductController handles all four HTTP verbs. Routes are declared as PHP attributes on the class and each method:

1
<?php
2

3
namespace App\Controller;
4

5
use App\Entity\Product;
6
use App\Repository\ProductRepository;
7
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
8
use Symfony\Component\HttpFoundation\JsonResponse;
9
use Symfony\Component\HttpFoundation\Request;
10
use Symfony\Component\Routing\Attribute\Route;
11

12
// Routes are declared as PHP attributes directly on the controller.
13
// All four HTTP verbs share the base /api/products path.
14
#[Route('/api/products')]
15
class ProductController extends AbstractController
16
{
17
    public function __construct(private readonly ProductRepository $products) {}
18

19
    // GET /api/products
20
    // Query string — what Handsontable sends via buildUrl():
21
    //   page, pageSize, sort[prop], sort[order],
22
    //   filters[0][prop], filters[0][condition], filters[0][value], filters[0][value2]
23
    #[Route('', methods: ['GET'])]
24
    public function index(Request $request): JsonResponse
25
    {
26
        $page     = max(1, (int) $request->query->get('page', 1));
27
        $pageSize = max(1, (int) $request->query->get('pageSize', 10));
28
        $sort     = $request->query->all('sort');     // ['prop' => ..., 'order' => ...]
29
        $filters  = $request->query->all('filters');  // array of filter objects
30

31
        ['products' => $products, 'total' => $total] =
32
            $this->products->findPage($page, $pageSize, $sort, $filters);
33

34
        // Map entities to plain arrays. Cast price to float so Handsontable's
35
        // numeric cell type receives 1299.99 instead of the Doctrine string "1299.99".
36
        $data = array_map(fn(Product $p) => [
37
            'id'         => $p->getId(),
38
            'name'       => $p->getName(),
39
            'sku'        => $p->getSku(),
40
            'category'   => $p->getCategory(),
41
            'price'      => (float) $p->getPrice(),
42
            'stock'      => $p->getStock(),
43
            'sort_order' => $p->getSortOrder(),
44
        ], $products);
45

46
        // Return the shape that fetchRows expects: { data: [...], total: n }
47
        return $this->json(['data' => $data, 'total' => $total]);
48
    }
49

50
    // POST /api/products
51
    // Body (JSON): { position, referenceRowId, rowsAmount }
52
    // Matches the onRowsCreate payload shape.
53
    #[Route('', methods: ['POST'])]
54
    public function store(Request $request): JsonResponse
55
    {
56
        $payload        = json_decode($request->getContent(), true) ?? [];
57
        $rowsAmount     = max(1, (int) ($payload['rowsAmount'] ?? 1));
58
        $position       = $payload['position'] ?? 'below';
59
        $referenceRowId = isset($payload['referenceRowId']) ? (int) $payload['referenceRowId'] : null;
60

61
        $created = $this->products->createBlankRows($rowsAmount, $position, $referenceRowId);
62

63
        $data = array_map(fn(Product $p) => [
64
            'id'         => $p->getId(),
65
            'name'       => $p->getName(),
66
            'sku'        => $p->getSku(),
67
            'category'   => $p->getCategory(),
68
            'price'      => (float) $p->getPrice(),
69
            'stock'      => $p->getStock(),
70
            'sort_order' => $p->getSortOrder(),
71
        ], $created);
72

73
        return $this->json($data, 201);
74
    }
75

76
    // PATCH /api/products
77
    // Body (JSON): [{ id, changes: { name?, price?, ... }, rowData? }, ...]
78
    // Matches the onRowsUpdate payload shape.
79
    #[Route('', methods: ['PATCH'])]
80
    public function batchUpdate(Request $request): JsonResponse
81
    {
82
        $rows = json_decode($request->getContent(), true) ?? [];
83

84
        $this->products->updateRows($rows);
85

86
        return $this->json(null, 200);
87
    }
88

89
    // DELETE /api/products
90
    // Body (JSON): [1, 4, 7]  — array of product IDs
91
    // Matches the onRowsRemove payload shape.
92
    #[Route('', methods: ['DELETE'])]
93
    public function batchDestroy(Request $request): JsonResponse
94
    {
95
        $ids = json_decode($request->getContent(), true) ?? [];
96

97
        $this->products->deleteByIds($ids);
98

99
        return $this->json(null, 204);
100
    }
101
}

What’s happening:

#[Route('/api/products')] on the class sets the shared base path. Method-level #[Route('', methods: ['GET'])] attributes add the HTTP method constraint.
index() delegates all query logic to ProductRepository::findPage() and maps the returned entities to plain arrays. The (float) cast on $p->getPrice() converts Doctrine’s decimal string to a PHP float so Handsontable’s numeric cell type receives a number, not a string.
store() delegates to createBlankRows(), maps the returned entities to plain arrays (including sort_order), and returns the created rows as JSON with HTTP 201. The frontend reads this response to display a success notification and manually insert the row into the current page.
batchUpdate() delegates to updateRows() and returns HTTP 200.
batchDestroy() delegates to deleteByIds() and returns HTTP 204.

Verify the routes are registered:

1
php bin/console debug:router | grep products

Set up the Vite dev server

Create a vite.config.js at the root of your frontend project and configure a proxy so requests go to Vite (:5173) and are forwarded to Symfony without triggering CORS:
```
1
import { defineConfig } from 'vite';
2

3
export default defineConfig({
4
  server: {
5
    port: 5173,
6
    proxy: {
7
      '/api': 'http://localhost:8000',
8
    },
9
  },
10
});
```
What’s happening:
- The Vite dev server forwards every /api/* request to the Symfony server running on port 8000. Because both the HTML page and the API requests share the same origin (localhost:5173), the browser never sees a cross-origin request — no CORS headers are needed on the backend.
- In production, deploy the frontend and backend behind the same reverse proxy (nginx or Apache), or configure CORS headers on the Symfony server for your production origin.
- No CSRF token is needed for this stateless JSON API. Symfony’s CSRF protection applies to form-based flows, not Content-Type: application/json requests from a browser frontend.

Wire up Handsontable

With the Symfony server running (symfony server:start or php -S localhost:8000 -t public/) and the Vite dev server running (npm run dev), open http://localhost:5173 to see the grid. The complete frontend code is in the files below.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
registerAllModules();
5

6
// Serializes fetchRows query parameters into a URL query string that Symfony
7
// reads via $request->query->all().
8
//
9
// Handsontable sends:
10
//   sort:    { prop: 'name', order: 'asc' }  or  null
11
//   filters: [{ prop: 'price', conditions: [{ name: 'gt', args: [100] }] }]  or  null
12
//
13
// Symfony reads:
14
//   sort[prop], sort[order]
15
//   filters[0][prop], filters[0][condition], filters[0][value], filters[0][value2]
16
function buildUrl(base, { page, pageSize, sort, filters }) {
17
  const params = new URLSearchParams({
18
    page: String(page),
19
    pageSize: String(pageSize),
20
  });
21

22
  if (sort) {
23
    params.set('sort[prop]', sort.prop);
24
    params.set('sort[order]', sort.order);
25
  }
26

27
  if (filters?.length) {
28
    let idx = 0;
29
    filters.forEach(({ prop, conditions }) => {
30
      (conditions || []).forEach(({ name, args }) => {
31
        if (!name) return;
32
        params.set(`filters[${idx}][prop]`, prop);
33
        params.set(`filters[${idx}][condition]`, name);
34
        const a = args ?? [];
35
        // Single-value conditions: contains, gt, eq, begins_with …
36
        if (a[0] != null) params.set(`filters[${idx}][value]`, String(a[0]));
37
        // Range conditions: between, not_between
38
        if (a[1] != null) params.set(`filters[${idx}][value2]`, String(a[1]));
39
        idx++;
40
      });
41
    });
42
  }
43

44
  return `${base}?${params}`;
45
}
46

47
const container = document.querySelector('#example1');
48

49
let removeConfirmed = false;
50
let totalRows = 0;
51

52
// eslint-disable-next-line no-unused-vars
53
const hot = new Handsontable(container, {
54
  dataProvider: {
55
    // rowId must match the primary key field returned by the Symfony controller.
56
    // Handsontable uses this value in every update and remove callback.
57
    rowId: 'id',
58

59
    // fetchRows is called on every page change, sort, and filter.
60
    // queryParameters: { page, pageSize, sort, filters }
61
    // signal: AbortSignal — pass it to fetch() so stale requests cancel
62
    // when the user sorts, filters, or changes pages quickly.
63
    fetchRows: async ({ page, pageSize, sort, filters }, { signal }) => {
64
      const url = buildUrl('/api/products', { page, pageSize, sort, filters });
65
      const res = await fetch(url, { signal });
66

67
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
68

69
      // Symfony returns: { data: [...], total: n }
70
      const json = await res.json();
71
      totalRows = json.total;
72

73
      return { rows: json.data, totalRows: json.total };
74
    },
75

76
    // onRowsCreate fires when the user inserts rows from the context menu.
77
    // payload: { position: 'above'|'below', referenceRowId, rowsAmount }
78
    onRowsCreate: async (payload) => {
79
      const res = await fetch('/api/products', {
80
        method: 'POST',
81
        headers: { 'Content-Type': 'application/json' },
82
        body: JSON.stringify(payload),
83
      });
84
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
85

86
      // The server returns the newly created rows. Instead of triggering a full
87
      // refetch, we manually insert the row into the current page and update the
88
      // pagination counter. Throwing 'stop refetch' prevents the default refetch.
89
      const data = await res.json();
90
      const row = data[0];
91
      hot.getPlugin('notification').showMessage({
92
        variant: 'success',
93
        title: 'Row added',
94
        message: `Created: ${row.sku} (id: ${row.id})`,
95
        duration: 3000,
96
      });
97

98
      const pageSize = hot.getSettings().pagination?.pageSize ?? 10;
99
      const rows = hot.getSourceData();
100
      const index = rows.findIndex(r => r.id === payload.referenceRowId);
101
      const insertAt = index >= 0 ? index + (payload.position === 'above' ? 0 : 1) : rows.length;
102
      rows.splice(insertAt, 0, row);
103
      hot.loadData(rows.slice(0, pageSize));
104
      totalRows += 1;
105
      hot.runHooks('afterDataProviderFetch', { queryParameters: {}, totalRows });
106
      throw new Error('stop refetch');
107
    },
108

109
    // onRowsUpdate fires after a cell edit, paste, or autofill batch.
110
    // rows is an array of { id, changes, rowData } objects.
111
    // Changes appear in the grid immediately (optimistic update) and roll back
112
    // if this callback throws or rejects.
113
    onRowsUpdate: async (rows) => {
114
      const res = await fetch('/api/products', {
115
        method: 'PATCH',
116
        headers: { 'Content-Type': 'application/json' },
117
        body: JSON.stringify(rows),
118
      });
119
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
120
    },
121

122
    // onRowsRemove fires after the user confirms deletion.
123
    // rowIds is an array of stable row IDs (values of the rowId field).
124
    onRowsRemove: async (rowIds) => {
125
      const res = await fetch('/api/products', {
126
        method: 'DELETE',
127
        headers: { 'Content-Type': 'application/json' },
128
        body: JSON.stringify(rowIds),
129
      });
130
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
131
    },
132
  },
133

134
  // beforeRowsMutation is sync (checks for a strict `=== false` return), so
135
  // we cannot await an async prompt inline. Instead: cancel the original
136
  // attempt, show a notification with Delete/Cancel actions, and on Delete
137
  // re-issue the remove via the DataProvider API. The flag lets the second
138
  // pass through without re-prompting.
139
  beforeRowsMutation(operation, payload) {
140
    if (operation === 'remove' && !removeConfirmed) {
141
      const count = payload.rowsRemove.length;
142
      const notification = hot.getPlugin('notification');
143
      const id = notification.showMessage({
144
        variant: 'warning',
145
        title: 'Delete rows',
146
        message: `Delete ${count} row${count !== 1 ? 's' : ''}? This cannot be undone.`,
147
        duration: 0,
148
        actions: [
149
          {
150
            label: 'Delete',
151
            type: 'primary',
152
            callback: () => {
153
              notification.hide(id);
154
              removeConfirmed = true;
155
              hot.getPlugin('dataProvider').removeRows(payload.rowsRemove).finally(() => {
156
                removeConfirmed = false;
157
              });
158
            },
159
          },
160
          {
161
            label: 'Cancel',
162
            type: 'secondary',
163
            callback: () => notification.hide(id),
164
          },
165
        ],
166
      });
167
      return false;
168
    }
169
  },
170

171
  // pagination: pageSize controls how many rows fetchRows requests per call.
172
  pagination: { pageSize: 10 },
173

174
  // columnSorting sends { prop, order } in queryParameters.sort.
175
  // Keep multiColumnSorting off — it conflicts with dataProvider.
176
  columnSorting: true,
177

178
  // filters sends condition objects in queryParameters.filters.
179
  // The grid resets to page 1 automatically on each filter change.
180
  filters: true,
181

182
  // dropdownMenu shows the column header filter button.
183
  dropdownMenu: true,
184

185
  // contextMenu exposes "Insert row above / below" and "Remove row".
186
  contextMenu: true,
187

188
  // emptyDataState shows a loading overlay while fetchRows is in flight
189
  // and an empty-state overlay when the result set is empty.
190
  emptyDataState: true,
191

192
  // notification shows an error toast when fetchRows or any CRUD callback
193
  // rejects. Fetch failures include a Refetch button.
194
  notification: true,
195

196
  width: '100%',
197
  height: 'auto',
198
  rowHeaders: true,
199
  colHeaders: ['Name', 'SKU', 'Category', 'Price', 'Stock'],
200
  columns: [
201
    { data: 'name', type: 'text' },
202
    // SKU is generated server-side, so it is read-only in the grid.
203
    { data: 'sku', type: 'text', readOnly: true },
204
    {
205
      data: 'category',
206
      type: 'dropdown',
207
      source: ['Electronics', 'Accessories', 'Storage', 'Networking', 'Peripherals'],
208
    },
209
    { data: 'price', type: 'numeric', numericFormat: { pattern: '$0,0.00' } },
210
    { data: 'stock', type: 'numeric' },
211
  ],
212
  licenseKey: 'non-commercial-and-evaluation',
213
});
214

215
document.getElementById('btn-filter-empty').addEventListener('click', () => {
216
  const filters = hot.getPlugin('filters');
217
  filters.clearConditions();
218
  filters.addCondition(2, 'eq', ['Electronics']);
219
  filters.filter();
220
});
221

222
document.getElementById('btn-clear-filters').addEventListener('click', () => {
223
  const filters = hot.getPlugin('filters');
224
  filters.clearConditions();
225
  filters.filter();
226
});
227

228
export default hot;

What’s happening:

`buildUrl` helper

buildUrl serializes the queryParameters object that fetchRows receives into a URL query string that Symfony reads with $request->query->all(). It converts the Handsontable filter shape — { prop, conditions: [{ name, args }] } (each filter can carry multiple conditions) — into the flat bracket-notation parameters Symfony parses automatically.

`fetchRows`

fetchRows is called on every page change, sort, and filter. Passing signal to fetch() lets the browser cancel stale in-flight requests when the user sorts or pages quickly. Throwing on a non-ok response lets notification: true display an error toast automatically. totalRows = json.total saves the current server-side total so onRowsCreate can increment it without a refetch.

`onRowsCreate`, `onRowsUpdate`, `onRowsRemove`

No CSRF token header is required. Symfony’s built-in CSRF protection targets HTML form submissions, not JSON API requests.

onRowsCreate uses a Symfony-specific pattern instead of a simple return. After the server responds with the new row, the callback: shows a success notification, splices the row into the current page data at the correct position, increments totalRows, and fires afterDataProviderFetch to update the pagination counter. It then throws new Error('stop refetch'), which signals Handsontable to skip the automatic refetch that would normally follow a create. This avoids a second round-trip because the sortOrder column ensures the inserted row always appears at a predictable offset on the current page — a full refetch is unnecessary.

Cell edits via onRowsUpdate appear in the grid immediately (optimistic update). If the server returns a non-2xx response or a callback throws for a reason other than 'stop refetch', Handsontable rolls back the values and fires afterRowsMutationError.

`beforeRowsMutation`

beforeRowsMutation fires before any create, update, or remove operation. Returning false cancels the operation — onRowsRemove is not called and no rows are deleted on the server.

Because beforeRowsMutation is synchronous and checks for a strict === false return, you cannot use window.confirm() or other async dialogs. Instead, cancel the first attempt by returning false, show a notification with Delete and Cancel actions, and on Delete re-issue the remove via the DataProvider API. The removeConfirmed flag lets the second pass through without re-prompting.

`notification: true` and `emptyDataState: true`

notification: true enables the built-in error toast. When fetchRows or a mutation callback throws, Handsontable shows a translated error message. Fetch failures also add a Refetch action that retries the last request.

emptyDataState: true shows a loading overlay while fetchRows is in flight and an empty-state message when the server returns zero rows.

contextMenu: true enables the right-click context menu with “Insert row above / below” and “Remove row” items.

Alternative — Use a GraphQL API

Instead of the four REST endpoints you can expose the same logic through a single /graphql endpoint using webonyx/graphql-php.

Install the package:

1
composer require webonyx/graphql-php

9a. Define the schema

Create src/GraphQL/ProductSchema.php. This file defines every type, query, and mutation the frontend can call:

1
<?php
2

3
namespace App\GraphQL;
4

5
use App\Entity\Product;
6
use App\Repository\ProductRepository;
7
use GraphQL\Type\Definition\InputObjectType;
8
use GraphQL\Type\Definition\ObjectType;
9
use GraphQL\Type\Definition\Type;
10
use GraphQL\Type\Schema;
11

12
class ProductSchema
13
{
14
    public static function build(ProductRepository $repository): Schema
15
    {
16
        // --- Output types ---
17

18
        $productType = new ObjectType([
19
            'name'   => 'Product',
20
            'fields' => [
21
                'id'         => Type::nonNull(Type::int()),
22
                'name'       => Type::nonNull(Type::string()),
23
                'sku'        => Type::nonNull(Type::string()),
24
                'category'   => Type::nonNull(Type::string()),
25
                'price'      => Type::nonNull(Type::float()),
26
                'stock'      => Type::nonNull(Type::int()),
27
                'sort_order' => Type::nonNull(Type::int()),
28
            ],
29
        ]);
30

31
        // Wraps the paginated list so fetchRows can read { data, total }.
32
        $productsPageType = new ObjectType([
33
            'name'   => 'ProductsPage',
34
            'fields' => [
35
                'data'  => Type::nonNull(Type::listOf(Type::nonNull($productType))),
36
                'total' => Type::nonNull(Type::int()),
37
            ],
38
        ]);
39

40
        // --- Input types ---
41

42
        // Matches queryParameters.sort from fetchRows: { prop, order }
43
        $sortInput = new InputObjectType([
44
            'name'   => 'SortInput',
45
            'fields' => [
46
                'prop'  => Type::nonNull(Type::string()),
47
                'order' => Type::nonNull(Type::string()),
48
            ],
49
        ]);
50

51
        // Flat representation of one Handsontable condition after mapFilters():
52
        //   { prop, condition, value?, value2? }
53
        $filterInput = new InputObjectType([
54
            'name'   => 'FilterInput',
55
            'fields' => [
56
                'prop'      => Type::nonNull(Type::string()),
57
                'condition' => Type::nonNull(Type::string()),
58
                'value'     => Type::string(),
59
                'value2'    => Type::string(),
60
            ],
61
        ]);
62

63
        $productChangesInput = new InputObjectType([
64
            'name'   => 'ProductChangesInput',
65
            'fields' => [
66
                'name'     => Type::string(),
67
                'sku'      => Type::string(),
68
                'category' => Type::string(),
69
                'price'    => Type::float(),
70
                'stock'    => Type::int(),
71
            ],
72
        ]);
73

74
        // Matches one entry in the onRowsUpdate payload: { id, changes }
75
        $productUpdateInput = new InputObjectType([
76
            'name'   => 'ProductUpdateInput',
77
            'fields' => [
78
                'id'      => Type::nonNull(Type::int()),
79
                'changes' => Type::nonNull($productChangesInput),
80
            ],
81
        ]);
82

83
        // --- Query ---
84

85
        $queryType = new ObjectType([
86
            'name'   => 'Query',
87
            'fields' => [
88
                // Replaces GET /api/products — paginate, sort, filter.
89
                'products' => [
90
                    'type' => Type::nonNull($productsPageType),
91
                    'args' => [
92
                        'page'     => ['type' => Type::int(),                              'defaultValue' => 1],
93
                        'pageSize' => ['type' => Type::int(),                              'defaultValue' => 10],
94
                        'sort'     => ['type' => $sortInput],
95
                        'filters'  => ['type' => Type::listOf(Type::nonNull($filterInput))],
96
                    ],
97
                    'resolve' => function ($root, array $args) use ($repository): array {
98
                        $page     = max(1, $args['page']     ?? 1);
99
                        $pageSize = max(1, $args['pageSize'] ?? 10);
100
                        $sort     = $args['sort']    ?? [];
101
                        $filters  = $args['filters'] ?? [];
102

103
                        ['products' => $products, 'total' => $total] =
104
                            $repository->findPage($page, $pageSize, $sort, $filters);
105

106
                        return [
107
                            'data'  => array_map(fn(Product $p) => [
108
                                'id'         => $p->getId(),
109
                                'name'       => $p->getName(),
110
                                'sku'        => $p->getSku(),
111
                                'category'   => $p->getCategory(),
112
                                'price'      => (float) $p->getPrice(),
113
                                'stock'      => $p->getStock(),
114
                                'sort_order' => $p->getSortOrder(),
115
                            ], $products),
116
                            'total' => $total,
117
                        ];
118
                    },
119
                ],
120
            ],
121
        ]);
122

123
        // --- Mutations ---
124

125
        $mutationType = new ObjectType([
126
            'name'   => 'Mutation',
127
            'fields' => [
128
                // Replaces POST /api/products — insert blank rows at position.
129
                'createProducts' => [
130
                    'type' => Type::nonNull(Type::listOf(Type::nonNull($productType))),
131
                    'args' => [
132
                        'rowsAmount'     => ['type' => Type::int(),    'defaultValue' => 1],
133
                        'position'       => ['type' => Type::string(), 'defaultValue' => 'below'],
134
                        'referenceRowId' => ['type' => Type::int()],
135
                    ],
136
                    'resolve' => function ($root, array $args) use ($repository): array {
137
                        $created = $repository->createBlankRows(
138
                            max(1, $args['rowsAmount'] ?? 1),
139
                            $args['position']       ?? 'below',
140
                            $args['referenceRowId'] ?? null,
141
                        );
142

143
                        return array_map(fn(Product $p) => [
144
                            'id'         => $p->getId(),
145
                            'name'       => $p->getName(),
146
                            'sku'        => $p->getSku(),
147
                            'category'   => $p->getCategory(),
148
                            'price'      => (float) $p->getPrice(),
149
                            'stock'      => $p->getStock(),
150
                            'sort_order' => $p->getSortOrder(),
151
                        ], $created);
152
                    },
153
                ],
154
                // Replaces PATCH /api/products — update changed cells.
155
                'updateProducts' => [
156
                    'type' => Type::nonNull(Type::boolean()),
157
                    'args' => [
158
                        'rows' => Type::nonNull(Type::listOf(Type::nonNull($productUpdateInput))),
159
                    ],
160
                    'resolve' => function ($root, array $args) use ($repository): bool {
161
                        $repository->updateRows($args['rows']);
162
                        return true;
163
                    },
164
                ],
165
                // Replaces DELETE /api/products — delete rows by ID.
166
                'deleteProducts' => [
167
                    'type' => Type::nonNull(Type::boolean()),
168
                    'args' => [
169
                        'ids' => Type::nonNull(Type::listOf(Type::nonNull(Type::int()))),
170
                    ],
171
                    'resolve' => function ($root, array $args) use ($repository): bool {
172
                        $repository->deleteByIds($args['ids']);
173
                        return true;
174
                    },
175
                ],
176
            ],
177
        ]);
178

179
        return new Schema(['query' => $queryType, 'mutation' => $mutationType]);
180
    }
181
}

What’s happening:

$productType — the shape of a single product row, returned by both products.data[] and createProducts[].
$sortInput / $filterInput / $productUpdateInput — input types that mirror the shapes Handsontable passes to fetchRows, onRowsCreate, and onRowsUpdate.
Query.products — replaces GET /api/products. Accepts page, pageSize, sort, and filters and delegates to ProductRepository::findPage().
Mutation.createProducts — replaces POST /api/products. Returns the newly created rows so the frontend can show a success notification.
Mutation.updateProducts / Mutation.deleteProducts — replace PATCH and DELETE. Both return a boolean; actual data comes from a subsequent fetchRows call.

9b. Add the GraphQL controller

Create src/Controller/GraphQLController.php:

1
<?php
2

3
namespace App\Controller;
4

5
use App\GraphQL\ProductSchema;
6
use App\Repository\ProductRepository;
7
use GraphQL\Error\DebugFlag;
8
use GraphQL\GraphQL;
9
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
10
use Symfony\Component\HttpFoundation\JsonResponse;
11
use Symfony\Component\HttpFoundation\Request;
12
use Symfony\Component\Routing\Attribute\Route;
13

14
// A single route handles every GraphQL request — query and mutation alike.
15
#[Route('/graphql', methods: ['POST'])]
16
class GraphQLController extends AbstractController
17
{
18
    public function __construct(private readonly ProductRepository $products) {}
19

20
    public function __invoke(Request $request): JsonResponse
21
    {
22
        $body      = json_decode($request->getContent(), true) ?? [];
23
        $query     = $body['query']     ?? '';
24
        $variables = $body['variables'] ?? null;
25

26
        $schema = ProductSchema::build($this->products);
27
        $result = GraphQL::executeQuery($schema, $query, null, null, $variables);
28

29
        // Include stack traces in debug mode only.
30
        $debug = $this->getParameter('kernel.debug')
31
            ? DebugFlag::INCLUDE_DEBUG_MESSAGE | DebugFlag::INCLUDE_TRACE
32
            : DebugFlag::NONE;
33

34
        return $this->json($result->toArray($debug));
35
    }
36
}

What’s happening:

The controller handles every GraphQL request in one place. It decodes the request body, builds the schema from ProductSchema::build(), executes the query or mutation via GraphQL::executeQuery(), and returns the result as JSON. Stack traces are included in the response only when kernel.debug is true.

9c. Wire up the frontend

The frontend replaces the per-endpoint fetch() calls with a single gql() helper and adds a mapFilters() function to convert Handsontable’s conditions array into the flat FilterInput shape the schema expects. The Handsontable configuration — columns, plugins, beforeRowsMutation — is otherwise identical to the REST example.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
registerAllModules();
5

6
// Sends a GraphQL request to POST /graphql and returns response.data.
7
// Throws on HTTP errors and on GraphQL-level errors so notification: true
8
// can display an error toast automatically.
9
async function gql(query, variables = {}) {
10
  const res = await fetch('/graphql', {
11
    method: 'POST',
12
    headers: { 'Content-Type': 'application/json' },
13
    body: JSON.stringify({ query, variables }),
14
  });
15
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
16
  const json = await res.json();
17
  if (json.errors?.length) throw new Error(json.errors[0].message);
18
  return json.data;
19
}
20

21
// --- GraphQL operations ---
22

23
const FETCH_PRODUCTS = `
24
  query FetchProducts($page: Int, $pageSize: Int, $sort: SortInput, $filters: [FilterInput!]) {
25
    products(page: $page, pageSize: $pageSize, sort: $sort, filters: $filters) {
26
      data { id name sku category price stock sort_order }
27
      total
28
    }
29
  }
30
`;
31

32
const CREATE_PRODUCTS = `
33
  mutation CreateProducts($rowsAmount: Int, $position: String, $referenceRowId: Int) {
34
    createProducts(rowsAmount: $rowsAmount, position: $position, referenceRowId: $referenceRowId) {
35
      id name sku category price stock sort_order
36
    }
37
  }
38
`;
39

40
const UPDATE_PRODUCTS = `
41
  mutation UpdateProducts($rows: [ProductUpdateInput!]!) {
42
    updateProducts(rows: $rows)
43
  }
44
`;
45

46
const DELETE_PRODUCTS = `
47
  mutation DeleteProducts($ids: [Int!]!) {
48
    deleteProducts(ids: $ids)
49
  }
50
`;
51

52
// Converts Handsontable's filters shape — [{ prop, conditions: [{ name, args }] }] —
53
// to the flat FilterInput array the GraphQL schema expects.
54
function mapFilters(filters) {
55
  const result = [];
56
  filters.forEach(({ prop, conditions }) => {
57
    (conditions || []).forEach(({ name, args }) => {
58
      if (!name) return;
59
      const a = args ?? [];
60
      result.push({
61
        prop,
62
        condition: name,
63
        value:     a[0] != null ? String(a[0]) : null,
64
        value2:    a[1] != null ? String(a[1]) : null,
65
      });
66
    });
67
  });
68
  return result;
69
}
70

71
const container = document.querySelector('#example1');
72

73
let removeConfirmed = false;
74

75
// eslint-disable-next-line no-unused-vars
76
const hot = new Handsontable(container, {
77
  dataProvider: {
78
    rowId: 'id',
79

80
    fetchRows: async ({ page, pageSize, sort, filters }, { signal }) => {
81
      const data = await gql(FETCH_PRODUCTS, {
82
        page,
83
        pageSize,
84
        sort:    sort    ? { prop: sort.prop, order: sort.order } : null,
85
        filters: filters ? mapFilters(filters) : null,
86
      });
87
      return { rows: data.products.data, totalRows: data.products.total };
88
    },
89

90
    onRowsCreate: async (payload) => {
91
      const data = await gql(CREATE_PRODUCTS, {
92
        rowsAmount:     payload.rowsAmount,
93
        position:       payload.position,
94
        referenceRowId: payload.referenceRowId ?? null,
95
      });
96

97
      const rows = data.createProducts;
98
      const row = rows[0];
99
      hot.getPlugin('notification').showMessage({
100
        variant:  'success',
101
        title:    'Row added',
102
        message:  `Created: ${row.sku} (id: ${row.id})`,
103
        duration: 3000,
104
      });
105

106
      // Return the created rows so dataProvider can update its row map with
107
      // server-assigned ids.
108
      return rows;
109
    },
110

111
    onRowsUpdate: async (rows) => {
112
      await gql(UPDATE_PRODUCTS, {
113
        rows: rows.map(({ id, changes }) => ({ id, changes })),
114
      });
115
    },
116

117
    onRowsRemove: async (rowIds) => {
118
      await gql(DELETE_PRODUCTS, { ids: rowIds });
119
    },
120
  },
121

122
  beforeRowsMutation(operation, payload) {
123
    if (operation === 'remove' && !removeConfirmed) {
124
      const count = payload.rowsRemove.length;
125
      const notification = hot.getPlugin('notification');
126
      const id = notification.showMessage({
127
        variant:  'warning',
128
        title:    'Delete rows',
129
        message:  `Delete ${count} row${count !== 1 ? 's' : ''}? This cannot be undone.`,
130
        duration: 0,
131
        actions: [
132
          {
133
            label: 'Delete',
134
            type:  'primary',
135
            callback: () => {
136
              notification.hide(id);
137
              removeConfirmed = true;
138
              hot.getPlugin('dataProvider').removeRows(payload.rowsRemove).finally(() => {
139
                removeConfirmed = false;
140
              });
141
            },
142
          },
143
          {
144
            label:    'Cancel',
145
            type:     'secondary',
146
            callback: () => notification.hide(id),
147
          },
148
        ],
149
      });
150
      return false;
151
    }
152
  },
153

154
  pagination:    { pageSize: 10 },
155
  columnSorting: true,
156
  filters:       true,
157
  dropdownMenu:  true,
158
  contextMenu:   true,
159
  emptyDataState: true,
160
  notification:  true,
161

162
  width:      '100%',
163
  height:     'auto',
164
  rowHeaders: true,
165
  colHeaders: ['Name', 'SKU', 'Category', 'Price', 'Stock'],
166
  columns: [
167
    { data: 'name',     type: 'text' },
168
    { data: 'sku',      type: 'text', readOnly: true },
169
    { data: 'category', type: 'dropdown', source: ['Electronics', 'Accessories', 'Storage', 'Networking', 'Peripherals'] },
170
    { data: 'price',    type: 'numeric', numericFormat: { pattern: '$0,0.00' } },
171
    { data: 'stock',    type: 'numeric' },
172
  ],
173
  licenseKey: 'non-commercial-and-evaluation',
174
});
175

176
document.getElementById('btn-filter-empty').addEventListener('click', () => {
177
  const filters = hot.getPlugin('filters');
178
  filters.clearConditions();
179
  filters.addCondition(2, 'eq', ['Electronics']);
180
  filters.filter();
181
});
182

183
document.getElementById('btn-clear-filters').addEventListener('click', () => {
184
  const filters = hot.getPlugin('filters');
185
  filters.clearConditions();
186
  filters.filter();
187
});
188

189
export default hot;

What’s happening:

`gql()` helper

Every GraphQL request is a POST to /graphql with a { query, variables } body. The helper throws on both HTTP-level errors and GraphQL-level errors (the errors array in the response), so notification: true displays an error toast automatically in both cases.

`mapFilters()` helper

Handsontable sends filters as [{ prop, conditions: [{ name, args }] }]. mapFilters() flattens each condition into a separate FilterInput object matching the $filterInput GraphQL type — the same field names that ProductRepository::findPage() already reads.

Operations

Frontend constant	Type	Replaces
`FETCH_PRODUCTS`	`query`	`GET /api/products`
`CREATE_PRODUCTS`	`mutation`	`POST /api/products`
`UPDATE_PRODUCTS`	`mutation`	`PATCH /api/products`
`DELETE_PRODUCTS`	`mutation`	`DELETE /api/products`

fetchRows, onRowsCreate, onRowsUpdate, and onRowsRemove pass their variables directly to gql(). No URL building or query-string serialization is needed — variables are sent as a typed JSON object.

How It Works — Complete Flow

Initial load: fetchRows fires with { page: 1, pageSize: 10, sort: null, filters: null }. Symfony returns { data: [...10 rows...], total: 52 }. The grid renders the first page with a pagination bar.
Sort: The user clicks the Price header. fetchRows fires with sort: { prop: 'price', order: 'asc' }. Symfony applies ->orderBy('p.price', 'asc') and returns the first page sorted by price.
Filter: The user opens the Category filter and types “Electronics”. fetchRows fires with the filter condition. Symfony applies LOWER(p.category) LIKE '%electronics%' and returns the matching rows.
Edit: The user changes a price cell. The new value appears immediately. onRowsUpdate fires with [{ id: 4, changes: { price: 149.99 } }]. Symfony updates the row. On success, Handsontable silently refetches the current page.
Insert: The user right-clicks and selects Insert row below. onRowsCreate fires with { position: 'below', referenceRowId: 4, rowsAmount: 1 }. Symfony shifts existing rows, inserts a blank row with the correct sortOrder, and returns the created row as JSON. The frontend inserts it into the current page data and shows a success notification — no automatic refetch is triggered.
Delete: The user selects two rows and chooses Remove rows. beforeRowsMutation intercepts the operation, returns false, and shows a warning notification with Delete and Cancel action buttons. On Delete, onRowsRemove fires with [4, 7]. Symfony deletes both rows.
Error: The server returns 500. fetchRows throws. Handsontable shows an error toast with a Refetch button.

What you learned

How to map Handsontable’s queryParameters to Symfony’s $request->query->all() with the buildUrl() helper.
How to apply Handsontable filter condition names as Doctrine QueryBuilder andWhere() clauses.
Why a separate ProductRepository keeps the controller thin and makes the query logic testable in isolation.
Why sortOrder is needed: the primary key reflects insertion order, but rows inserted via the context menu need an independent ordering column to preserve their display position.
How Doctrine maps decimal columns to PHP strings and why the controller must cast them to float before serializing the JSON response.
How to validate column names against ALLOWED_COLUMNS before interpolating them into DQL expressions to prevent injection.
Why no CSRF token is needed for a stateless JSON API and how to avoid CORS entirely by proxying API requests through the Vite dev server.
How notification: true provides error toasts and a Refetch action with no extra code.
How beforeRowsMutation intercepts operations before they reach the server.

Next steps

Server-side data overview — DataProvider plugin reference
Configuration and query parameters — all fetchRows query fields
Server-side CRUD — mutation lifecycle and hooks
Fetching, hooks, and examples — error handling and loading UI
Server-side data with Laravel — the same Handsontable frontend wired to a Laravel backend

Server-side data with Symfony

What You’ll Build

Before you begin

Scaffold the backend

Define the Doctrine migration

Create the Product entity

Create the ProductRepository

findPage() — paginate, sort, and filter

createBlankRows() — insert rows at position

updateRows() — update changed cells

deleteByIds() — delete rows

Seed the database

Build the ProductController

Set up the Vite dev server

Wire up Handsontable

buildUrl helper

fetchRows

onRowsCreate, onRowsUpdate, onRowsRemove

beforeRowsMutation

notification: true and emptyDataState: true

Alternative — Use a GraphQL API

9a. Define the schema

9b. Add the GraphQL controller

9c. Wire up the frontend

gql() helper

mapFilters() helper

Operations

How It Works — Complete Flow

What you learned

Next steps

`findPage()` — paginate, sort, and filter

`createBlankRows()` — insert rows at position

`updateRows()` — update changed cells

`deleteByIds()` — delete rows

`buildUrl` helper

`fetchRows`

`onRowsCreate`, `onRowsUpdate`, `onRowsRemove`

`beforeRowsMutation`

`notification: true` and `emptyDataState: true`

`gql()` helper

`mapFilters()` helper