Writable Grid · Vue + TanStack

Meets all nine qualities of quality code

Description

A paged, cell-editable grid of companies with Add, Remove, Save and Reset, built in Vue 3 on TanStack Table. Add a row and it appears at the top with its name already open for typing. Remove one and it goes. Edit a cell and it picks up the corner triangle. None of it has reached the server yet — and while any of it is waiting, the grid will not sort and will not page, because either would fetch a new page and take your unsaved work with it.

Open this example in a new tab ↗

Saki's May 2014 Writable Grid example, rebuilt five times: the Ext JS original, this one, and React, Angular and Svelte. The four modern builds use the same table library, TanStack Table, so the only difference between them is the framework. All five behave alike and each has its own database, so you can open any two side by side and try the same steps.

What Vue brought to it