@connexcs/sr-grid

SR-Grid

A full-featured Vue 3 data grid inspired by AG Grid. Built from scratch with TypeScript and zero runtime dependencies.

Features

• Virtual Scrolling — handles 1M+ rows at 60 fps (row and column virtualization)
• Rich Column Model — resize, reorder, pin, hide, auto-size, flex widths, column groups
• Sorting — single & multi-column, custom comparators
• Filtering — text, number, date, set filters, floating filters, quick filter, advanced filter builder
• In-Cell Editing — single/double-click, undo/redo, batch editing, custom editors
• Row Grouping & Aggregation — group by any column with sum/avg/min/max/count/custom
• Pivot Mode — dynamic pivot columns with multi-level support
• Tree Data — hierarchical data from flat arrays
• Master/Detail — expandable detail rows with custom renderers
• Server-Side Row Model — lazy loading with block caching, retry, dedup, timeout
• Infinite Scroll — block-based infinite scrolling with prefetch
• Clipboard — copy/paste with Excel-compatible formatting
• Range Selection — drag to select cell ranges, fill handle
• Row Drag & Drop — managed drag reordering
• Export — CSV and native XLSX export (zero dependencies)
• Context Menu — right-click menus with custom items
• Sidebar — columns and filters tool panels
• Pagination — client-side and server-side
• RTL & i18n — full right-to-left layout, 50+ localizable strings
• Theming — default, dark, blue themes with CSS custom properties
• Accessibility — ARIA roles, keyboard navigation, screen reader announcements

Installation

npm install @connexcs/sr-grid

Quick Start

<script setup lang="ts">
import { ref } from 'vue'
import { SrGrid } from '@connexcs/sr-grid'
import type { ColumnDef, GridApi, GridReadyEvent } from '@connexcs/sr-grid'
import '@connexcs/sr-grid/style.css'

const columnDefs: ColumnDef[] = [
  { field: 'name', headerName: 'Name', sortable: true, filter: 'text' },
  { field: 'age', headerName: 'Age', type: 'number', sortable: true },
  { field: 'country', headerName: 'Country', filter: 'set' },
]

const rowData = ref([
  { name: 'Alice', age: 30, country: 'USA' },
  { name: 'Bob', age: 25, country: 'UK' },
  { name: 'Carol', age: 35, country: 'Canada' },
])

let api: GridApi
function onGridReady(e: GridReadyEvent) {
  api = e.api
  api.sizeColumnsToFit()
}
</script>

<template>
  <div style="height: 400px">
    <SrGrid
      :column-defs="columnDefs"
      :row-data="rowData"
      row-selection="multiple"
      @grid-ready="onGridReady"
    />
  </div>
</template>

Vanilla JS

import { createGrid } from '@connexcs/sr-grid'
import '@connexcs/sr-grid/style.css'

const api = await createGrid(document.getElementById('grid')!, {
  columnDefs: [
    { field: 'name', sortable: true },
    { field: 'age', type: 'number' },
  ],
  rowData: [
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 25 },
  ],
})

Documentation

Full documentation is available at the docs site.

• Getting Started
• Installation
• Quick Start
• API Reference
• Features
• Theming

Exports

// Components
import { SrGrid, SrSelectEditor, SrDateEditor, SrSidebar, SrColumnsToolPanel, SrFiltersToolPanel, SrCurrencyRenderer, SrFlagRenderer } from '@connexcs/sr-grid'

// Vanilla JS API
import { createGrid, destroyGrid } from '@connexcs/sr-grid'

// Composables (advanced)
import { useVirtualScroll, useSorting, useFiltering, /* ... */ } from '@connexcs/sr-grid'

// Utilities
import { parseCsv, parseJsonData, generateColumnDefs, buildXlsxBlob } from '@connexcs/sr-grid'

// Types
import type { ColumnDef, GridOptions, GridApi, RowNode } from '@connexcs/sr-grid'

Requirements

• Vue 3.4+
• Node.js 18+

License

MIT