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 { useRef, useCallback, useMemo } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
registerAllModules();
6

7
// Serializes fetchRows query parameters into a URL query string that Symfony
8
// reads via $request->query->all().
9
//
10
// Handsontable sends:
11
//   sort:    { prop: 'name', order: 'asc' }  or  null
12
//   filters: [{ prop: 'price', operation: 'conjunction',
13
//               conditions: [{ name: 'gt', args: [100] }] }]  or  null
14
//
15
// Symfony reads:
16
//   sort[prop], sort[order]
17
//   filters[0][prop], filters[0][condition], filters[0][value], filters[0][value2]
18
//
19
// Each DataProviderFilterColumn can have multiple conditions (e.g. between),
20
// so we flatten them: one entry per condition, incrementing the index.
21
function buildUrl(base, { page, pageSize, sort, filters }) {
22
  const params = new URLSearchParams({
23
    page: String(page),
24
    pageSize: String(pageSize),
25
  });
26

27
  if (sort) {
28
    params.set('sort[prop]', sort.prop);
29
    params.set('sort[order]', sort.order);
30
  }
31

32
  if (filters?.length) {
33
    let idx = 0;
34

35
    filters.forEach(({ prop, conditions }) => {
36
      (conditions || []).forEach(({ name, args }) => {
37
        if (!name) return;
38
        params.set(`filters[${idx}][prop]`, prop);
39
        params.set(`filters[${idx}][condition]`, name);
40
        const a = args ?? [];
41
        // Single-value conditions: contains, gt, eq, begins_with …
42
        if (a[0] != null) params.set(`filters[${idx}][value]`, String(a[0]));
43
        // Range conditions: between, not_between
44
        if (a[1] != null) params.set(`filters[${idx}][value2]`, String(a[1]));
45
        idx++;
46
      });
47
    });
48
  }
49

50
  return `${base}?${params}`;
51
}
52

53
const ExampleComponent = () => {
54
  // hotRef.current.hotInstance is the underlying Handsontable instance.
55
  const hotRef = useRef(null);
56

57
  // beforeRowsMutation is sync, so we use a ref (not state) to track whether
58
  // the user already confirmed deletion. A plain { current: false } object
59
  // would be recreated on every render — useRef persists across renders.
60
  const removeConfirmedRef = useRef(false);
61

62
  // totalRows is updated by fetchRows and read by onRowsCreate to keep the
63
  // pagination counter in sync after a manual row insertion.
64
  const totalRowsRef = useRef(0);
65

66
  // fetchRows is called on every page change, sort, and filter.
67
  // signal: AbortSignal — pass it to fetch() so stale requests cancel
68
  // when the user sorts, filters, or changes pages quickly.
69
  const fetchRows = useCallback(async ({ page, pageSize, sort, filters }, { signal }) => {
70
    const url = buildUrl('/api/products', { page, pageSize, sort, filters });
71
    const res = await fetch(url, { signal });
72

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

75
    // Symfony returns: { data: [...], total: n }
76
    const json = await res.json();
77
    totalRowsRef.current = json.total;
78

79
    return { rows: json.data, totalRows: json.total };
80
  }, []);
81

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

92
    // The server returns the newly created rows. Instead of triggering a full
93
    // refetch, we manually insert the row into the current page and update the
94
    // pagination counter. Throwing 'stop refetch' prevents the default refetch.
95
    const data = await res.json();
96
    const row = data[0];
97
    const hot = hotRef.current?.hotInstance;
98
    if (!hot) return;
99

100
    hot.getPlugin('notification').showMessage({
101
      variant: 'success',
102
      title: 'Row added',
103
      message: `Created: ${row.sku} (id: ${row.id})`,
104
      duration: 3000,
105
    });
106

107
    const pageSize = hot.getSettings().pagination?.pageSize ?? 10;
108
    const rows = hot.getSourceData();
109
    const index = rows.findIndex(r => r.id === payload.referenceRowId);
110
    const insertAt = index >= 0 ? index + (payload.position === 'above' ? 0 : 1) : rows.length;
111
    rows.splice(insertAt, 0, row);
112
    hot.loadData(rows.slice(0, pageSize));
113
    totalRowsRef.current += 1;
114
    hot.runHooks('afterDataProviderFetch', { queryParameters: {}, totalRows: totalRowsRef.current });
115
    throw new Error('stop refetch');
116
  }, []);
117

118
  // onRowsUpdate fires after a cell edit, paste, or autofill batch.
119
  // rows is an array of { id, changes, rowData } objects.
120
  // Changes appear in the grid immediately (optimistic update) and roll back
121
  // if this callback throws or rejects.
122
  const onRowsUpdate = useCallback(async (rows) => {
123
    const res = await fetch('/api/products', {
124
      method: 'PATCH',
125
      headers: { 'Content-Type': 'application/json' },
126
      body: JSON.stringify(rows),
127
    });
128
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
129
  }, []);
130

131
  // onRowsRemove fires after the user confirms deletion.
132
  // rowIds is an array of stable row IDs (values of the rowId field).
133
  const onRowsRemove = useCallback(async (rowIds) => {
134
    const res = await fetch('/api/products', {
135
      method: 'DELETE',
136
      headers: { 'Content-Type': 'application/json' },
137
      body: JSON.stringify(rowIds),
138
    });
139
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
140
  }, []);
141

142
  const dataProvider = useMemo(
143
    () => ({
144
      // rowId must match the primary key field returned by the Symfony controller.
145
      // Handsontable uses this value in every update and remove callback.
146
      rowId: 'id',
147
      fetchRows,
148
      onRowsCreate,
149
      onRowsUpdate,
150
      onRowsRemove,
151
    }),
152
    [fetchRows, onRowsCreate, onRowsUpdate, onRowsRemove]
153
  );
154

155
  // beforeRowsMutation is sync (checks for a strict `=== false` return), so
156
  // we cannot await an async prompt inline. Instead: cancel the original
157
  // attempt, show a notification with Delete/Cancel actions, and on Delete
158
  // re-issue the remove via the DataProvider API. The ref lets the second
159
  // pass through without re-prompting.
160
  const beforeRowsMutation = useCallback((operation, payload) => {
161
    if (operation === 'remove' && !removeConfirmedRef.current) {
162
      const count = payload.rowsRemove.length;
163
      const hot = hotRef.current?.hotInstance;
164
      if (!hot) return false;
165

166
      const notification = hot.getPlugin('notification');
167
      const id = notification.showMessage({
168
        variant: 'warning',
169
        title: 'Delete rows',
170
        message: `Delete ${count} row${count !== 1 ? 's' : ''}? This cannot be undone.`,
171
        duration: 0,
172
        actions: [
173
          {
174
            label: 'Delete',
175
            type: 'primary',
176
            callback: () => {
177
              notification.hide(id);
178
              removeConfirmedRef.current = true;
179
              hot.getPlugin('dataProvider').removeRows(payload.rowsRemove).finally(() => {
180
                removeConfirmedRef.current = false;
181
              });
182
            },
183
          },
184
          {
185
            label: 'Cancel',
186
            type: 'secondary',
187
            callback: () => notification.hide(id),
188
          },
189
        ],
190
      });
191
      return false;
192
    }
193
  }, []);
194

195
  const filterElectronics = useCallback(() => {
196
    const filters = hotRef.current?.hotInstance?.getPlugin('filters');
197
    if (!filters) return;
198
    filters.clearConditions();
199
    filters.addCondition(2, 'eq', ['Electronics']);
200
    filters.filter();
201
  }, []);
202

203
  const clearFilters = useCallback(() => {
204
    const filters = hotRef.current?.hotInstance?.getPlugin('filters');
205
    if (!filters) return;
206
    filters.clearConditions();
207
    filters.filter();
208
  }, []);
209

210
  return (
211
    <div>
212
      <div className="toolbar">
213
        <button onClick={filterElectronics}>Show Electronics</button>
214
        <button onClick={clearFilters}>Clear filters</button>
215
      </div>
216
      <div id="example1">
217
        <HotTable
218
          ref={hotRef}
219
          dataProvider={dataProvider}
220
          // beforeRowsMutation fires before any create, update, or remove operation.
221
          beforeRowsMutation={beforeRowsMutation}
222
          // pagination: pageSize controls how many rows fetchRows requests per call.
223
          pagination={{ pageSize: 10 }}
224
          // columnSorting sends { prop, order } in queryParameters.sort.
225
          // Keep multiColumnSorting off -- it conflicts with dataProvider.
226
          columnSorting={true}
227
          // filters sends condition objects in queryParameters.filters.
228
          // The grid resets to page 1 automatically on each filter change.
229
          filters={true}
230
          // dropdownMenu shows the column header filter button.
231
          dropdownMenu={true}
232
          // contextMenu exposes "Insert row above / below" and "Remove row".
233
          contextMenu={true}
234
          // emptyDataState shows a loading overlay while fetchRows is in flight
235
          // and an empty-state overlay when the result set is empty.
236
          emptyDataState={true}
237
          // notification shows an error toast when fetchRows or any CRUD callback
238
          // rejects. Fetch failures include a Refetch button.
239
          notification={true}
240
          width="100%"
241
          height="auto"
242
          rowHeaders={true}
243
          colHeaders={['Name', 'SKU', 'Category', 'Price', 'Stock']}
244
          columns={[
245
            { data: 'name', type: 'text' },
246
            // SKU is generated server-side, so it is read-only in the grid.
247
            { data: 'sku', type: 'text', readOnly: true },
248
            {
249
              data: 'category',
250
              type: 'dropdown',
251
              source: ['Electronics', 'Accessories', 'Storage', 'Networking', 'Peripherals'],
252
            },
253
            { data: 'price', type: 'numeric', numericFormat: { pattern: '$0,0.00' } },
254
            { data: 'stock', type: 'numeric' },
255
          ]}
256
          licenseKey="non-commercial-and-evaluation"
257
        />
258
      </div>
259
    </div>
260
  );
261
};
262

263
export default ExampleComponent;

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.

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