Getting started

Installation

npm install li-grid

LiGrid requires Vue 3.4+.

Basic usage

<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: "Email", value: "email"},
    ],
    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>

That's it: the grid loads data when mounted and reloads whenever the user sorts, changes page or clicks Load.

Next steps

• Loading data: what dataLoader receives and must return
• Columns: formatting, slots, alignment, sticky columns
• Filters: filter types and their values
• Live demo

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.