LITGRID COMMUNITY EDITION
Open-source Vue DataGrid
LitGrid brings row and column virtualization to Vue through an integration backed by its Web Component-based core. Community Edition is MIT licensed. The Vue package includes the Web Component dependency, so Vue applications only need to install @tipolox/litgrid-vue.
Vue · Web Components · TypeScript · MIT
LitGrid / Live example
See LitGrid in action
Explore the real LitGrid component using a sample product inventory. Try selecting rows, sorting from a column menu, or resizing a column.
Live grid
Sample product inventory
Generated sample data for exploring LitGrid interactions.
The TipoloX site renders this showcase through the React integration. Vue uses the same Web Component-based LitGrid core.
Architecture / Vue
Why use LitGrid in Vue?
Use the documented Vue component in a single-file component while LitGrid renders through its shared Web Component core.
Vue-facing integration
Import DataGrid from @tipolox/litgrid-vue and pass rows and columns as props in a Vue template.
One package to install
@tipolox/litgrid-vue includes the Web Component dependency.
Shared Web Component core
The Vue integration builds on the same LitGrid core used by the other framework integrations.
Useful for data-heavy UI
Row and column virtualization work alongside sorting, filtering, selection, keyboard navigation, and column controls.
Get started / Vue
Install LitGrid for Vue
Install the Vue package, then import its DataGrid component and bind data, columns, and height in a Vue single-file component.
01 / Install
Add the Vue package
Terminal
pnpm add @tipolox/litgrid-vueThe Vue package includes the Web Component dependency, so Vue applications only need to install @tipolox/litgrid-vue.
02 / Render
Set up a first grid
UsersGrid.vue
<script setup lang="ts">
import { DataGrid } from '@tipolox/litgrid-vue'
const data = [{ id: 1, name: 'Ada' }]
const columns = [
{ key: 'id', header: 'ID' },
{ key: 'name', header: 'Name' }
]
</script>
<template>
<DataGrid :data="data" :columns="columns" :height="320" />
</template>LitGrid / Capabilities
Built for data-heavy Vue applications
LitGrid combines virtualized rendering with controls for working with client-side data in Vue interfaces.
01 / Capability
Row and column virtualization
Render the visible part of a client-side dataset as users scroll through rows and columns.
02 / Capability
Sorting, filtering, pagination
Explore and organize rows with client-side data operations.
03 / Capability
Selection and keyboard navigation
Select grid content and navigate the interface with a keyboard.
04 / Capability
Column controls
Resize, reorder, and show or hide columns to shape a view.
05 / Capability
State persistence
Save and restore column state when returning to a view.
LitGrid / Integrations
One core, multiple frameworks
LitGrid is built around a Web Component core with integrations for React, Angular, Vue, and Blazor. Use the Vue package in a Vue application or choose the integration that fits your stack.
- Web ComponentsCustom element
- ReactIntegration
- AngularIntegration
- VueIntegration
- BlazorIntegration
Explore LitGrid
Try the grid in your browser.
Use the live demo, review the source, or follow the Vue guide.
View Vue documentation