@ezocel/rqgrid-vue

High-performance Vue 3 data grid component powered by RowsQuerier. Virtual scrolling, server-side filtering, sorting, grouping, column resizing, keyboard navigation, and theming out of the box.

Installation

npm install @ezocel/rqgrid-vue @ezocel/rqgrid-core

vue >= 3.4 is required as a peer dependency.

Quick Start

<script setup>
import { RqGrid } from '@ezocel/rqgrid-vue';
import '@ezocel/rqgrid-vue/style.css';
import '@ezocel/rqgrid-vue/themes/material.css';
</script>

<template>
    <RqGrid
        connector="my-connector"
        url="/api/rowsquerier/rqgrid"
        theme="material"
        style="height: 600px"
    />
</template>

Components

<RqGrid>

The main grid component. Renders a fully interactive data grid driven by a RowsQuerier connector.

| Prop | Type | Description | |------|------|-------------| | connector | string | Name of the RowsQuerier connector to query | | url | string | API endpoint URL | | theme | string | Theme class suffix (e.g. "material") | | rowHeight | number | Row height in pixels (default: 40) |

RqGridHeaderCell

Header cell sub-component (used internally, rarely needed directly).

RqGridFilterPopup

Filter popup sub-component (used internally, rarely needed directly).

Composables

useRqGrid(options)

Main orchestrator composable. Manages schema loading, data fetching, sort/filter state, and column configuration.

useVirtualScroll(options)

Virtual scroll lifecycle management. Handles scroll events, triggers data fetching, and computes visible row ranges.

useColumnAutoSize(options)

Auto-fit column widths based on header and cell content.

Themes

Import a theme CSS file to style the grid:

import '@ezocel/rqgrid-vue/themes/material.css';

Available themes:

• material — Material Design 3 inspired theme

CSS

Component styles are bundled separately and must be imported:

import '@ezocel/rqgrid-vue/style.css';

License

Copyright (c) 2023-2026 Ezocel S.A.S. All rights reserved. See LICENSE for details.