li-grid

LiGrid

Lightweight Vue 3 data grid with server-side filtering, sorting, pagination, column toggling and translations.

📖 Documentation · 🎮 Live demo

Features

• One async dataLoader works with any backend
• Text, select, number range and date range filters
• Sortable columns and pagination
• Users can hide columns, and the choice is saved in localStorage
• Light, dark and auto (OS-following) themes, customizable via CSS variables
• Responsive: fits its container, with optional card layout on narrow screens
• Sticky first/last columns
• Custom cell and header slots
• English and Ukrainian built in, or bring your own translation
• TypeScript types included

Installation

npm install li-grid

Requires Vue 3.4+.

Quick start

<script setup lang="ts">
import {LiGrid} from "li-grid";
import type {GridConfig} from "li-grid";
import "li-grid/style.css";

const config: GridConfig = {
    columns: [
        {label: "ID", value: "id", sortable: "id"},
        {label: "Name", value: "name", sortable: "name"},
        {label: "Actions", slotName: "actions"},
    ],
    filters: [
        {label: "Name", inputName: "name", type: "text"},
    ],
    dataLoader: async (filters, sort, page) => {
        const response = await fetch("/api/users", {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({filters, sort, page}),
        });

        return response.json(); // { rows: [...], pagination: {...} }
    },
};
</script>

<template>
    <li-grid :config="config">
        <template #actions="{ row }">
            <a :href="https://github.com/deniskoronets/li-grid/blob/HEAD/`/users/${row.id}`">Edit</a>
        </template>
    </li-grid>
</template>

Have all your data in memory already? Use the built-in helper:

import {wrapObjectArrayWithGrid} from "li-grid";

dataLoader: (filters, sort, page) => wrapObjectArrayWithGrid(filters, sort, page, rows)

See the documentation for columns, filters, translations, styling and the full API.

Development

npm install
npm test           # run tests
npm run build      # build the library into dist/
npm run docs:dev   # run the docs site locally

Our sponsors

Author

Created and maintained by Denys Koronets.

Have a project? Hire me!

Need a custom data grid, a Vue 3 app, or help integrating LiGrid into your product? I'm open to freelance and contract work.

👉 Get in touch via GitHub.

License

Apache License 2.0. Copyright © 2026 Denys Koronets.

If you redistribute this code, keep the LICENSE and NOTICE files, as the license requires.