Most Vue projects hit the same wall sooner or later: a plain <table> stops being enough. You need sorting, a search box, per-column filters, grouping with totals, inline editing with validation, an export button, and eventually a table too big to load at once.

I've been building inandu-grid-vue , a Vue 3 data grid that covers that list without an enterprise tier. It's MIT-licensed, ships as a single component plus a headless composable, and is about 19 KB gzipped (JS) plus 2 KB of CSS, with vue as its only peer dependency. This post walks through how it works, with code you can paste.

Live demo: https://inandusolutions.github.io/inandu-grid-vue/

Edit it in StackBlitz: https://stackblitz.com/github/inandusolutions/inandu-grid-vue/tree/main/examples/stackblitz

npm: @inandu-solutions/grid-vue

Source: https://github.com/inandusolutions/inandu-grid-vue

Install and render a grid

npm install @inandu-solutions/grid-vue

Enter fullscreen mode

Exit fullscreen mode

<script setup lang= "ts" > import {…