GridStore

The headless data engine for high-performance JavaScript grids.

Reactive CRUD, filtering, sorting, pagination, and selection without coupling your data layer to a UI framework.

Zero dependencies · TypeScript-first · Headless · React · Vue · Vanilla JS

Documentation · Report Issue · npm Package

⚡ Quick Install

# npm
npm install @lokesh_kumar/community-grid-store

# yarn
yarn add @lokesh_kumar/community-grid-store

# pnpm
pnpm add @lokesh_kumar/community-grid-store

⏱️ 60-Second Quickstart

import { CommunityGridStore } from '@lokesh_kumar/community-grid-store';

// 1. Initialize store
const store = new CommunityGridStore({
  idField: 'id',
  initialData: [
    { id: 1, name: 'Alice', department: 'Engineering', salary: 120000 },
    { id: 2, name: 'Bob', department: 'Finance', salary: 95000 },
    { id: 3, name: 'Charlie', department: 'Engineering', salary: 110000 }
  ]
});

// 2. Filter & Sort
store.setFilters([
  { field: 'department', operator: 'equals', value: 'Engineering' }
]);
store.setSort('salary', 'desc');

// 3. Read processed view rows
console.log(store.getViewRows());
// Output: [Alice ($120k), Charlie ($110k)]

🧠 Why GridStore?

Most grid libraries tightly couple DOM rendering with heavy data computation. When data updates rapidly, UI re-renders stall the main thread.

GridStore separates data computation from rendering:

Raw Data  ──►  CRUD / Patch  ──►  Filter Pipeline  ──►  Sorting Engine  ──►  Pagination  ──►  Reactive View State
                                                                                                    │
                                    React / Vue / Vanilla JS DOM  ◄─────────────────────────────────┘

Your UI framework owns the DOM. GridStore owns the data pipeline.

🚀 Capabilities

| Feature | Community Edition | Description | | :--- | :---: | :--- | | Reactive State Engine | ✅ | Micro-batched event emissions on CRUD, sort, filter, and pagination | | Full CRUD & Cell Updates | ✅ | insertRow, updateRow, updateCell, deleteRow with instant view sync | | Nested Property Access | ✅ | Deep dot-path access (e.g. user.profile.title) across all operations | | Multi-Column Sorting | ✅ | Multi-level sorting with custom comparator support | | 11 Filter Operators | ✅ | equals, contains, startsWith, endsWith, gt, lt, gte, lte, between, in, notEquals | | Client-Side Pagination | ✅ | Configurable pageSize, fast indexing, and page navigation | | Selection Management | ✅ | single, multiple, and none modes with multi-row toggling | | Framework Adapters | ✅ | Official first-class hooks and composables for React and Vue 3 | | Zero Dependencies | ✅ | Pure TypeScript core with zero runtime dependencies |

🧩 Framework Integrations

React Integration

import React from 'react';
import { CommunityGridStore } from '@lokesh_kumar/community-grid-store';
import { useGridStore } from '@lokesh_kumar/community-grid-store/react';

const store = new CommunityGridStore({
  initialData: [
    { id: 1, name: 'Alice', role: 'Staff Engineer' },
    { id: 2, name: 'Bob', role: 'Product Manager' }
  ]
});

export function DataGrid() {
  const { viewRows, setSort, selectRow, selectedIds } = useGridStore(store);

  return (
    <table>
      <thead>
        <tr>
          <th onClick={() => setSort('name', 'asc')}>Name ⇕</th>
          <th>Role</th>
        </tr>
      </thead>
      <tbody>
        {viewRows.map(row => (
          <tr 
            key={row.id} 
            onClick={() => selectRow(row.id)}
            style={{ background: selectedIds.includes(row.id) ? '#e6f7ff' : 'transparent' }}
          >
            <td>{row.name}</td>
            <td>{row.role}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Vue 3 Integration

<script setup lang="ts">
import { CommunityGridStore } from '@lokesh_kumar/community-grid-store';
import { useGridStore } from '@lokesh_kumar/community-grid-store/vue';

const store = new CommunityGridStore({
  initialData: [
    { id: 1, symbol: 'NVDA', price: 128.5 },
    { id: 2, symbol: 'AAPL', price: 224.2 }
  ]
});

const { viewRows, setSort } = useGridStore(store);
</script>

<template>
  <div>
    <button @click="setSort('price', 'desc')">Sort by Price</button>
    <ul>
      <li v-for="row in viewRows" :key="row.id">
        {{ row.symbol }} - ${{ row.price }}
      </li>
    </ul>
  </div>
</template>

Vanilla TypeScript / JavaScript

import { CommunityGridStore } from '@lokesh_kumar/community-grid-store';

const store = new CommunityGridStore({
  idField: 'id',
  initialData: [{ id: 1, name: 'Sample' }]
});

// Subscribe to state transitions
const unsubscribe = store.subscribe(state => {
  console.log('Updated rows:', state.viewRows);
});

// Mutate data
store.updateCell(1, 'name', 'Updated Sample');

🛠️ API Reference

Store Configuration

import { CommunityGridStore } from '@lokesh_kumar/community-grid-store';

const store = new CommunityGridStore({
  idField: 'id',              // Unique ID column key (default: 'id')
  pageSize: 25,               // Rows per page (default: 25)
  selectionMode: 'multiple',  // 'single' | 'multiple' | 'none'
  multiSort: true,            // Enable multi-column sorting
  columns: [
    { field: 'name', headerName: 'Full Name', sortable: true, filterable: true },
    { field: 'profile.role', headerName: 'Role', sortable: true }
  ],
  initialData: [...]
});

CRUD Operations

// Insert row at specific index (or append if index omitted)
store.insertRow({ id: 4, name: 'Dana', department: 'Design' }, 0);

// Update single cell with fine-grained reactivity
store.updateCell(1, 'department', 'Executive');

// Update entire row
store.updateRow(1, { name: 'Alice Smith', salary: 135000 });

// Delete row by ID
store.deleteRow(2);

Filtering & Sorting

// Multi-condition filtering
store.setFilters([
  { field: 'salary', operator: 'gte', value: 100000 },
  { field: 'name', operator: 'contains', value: 'li' }
]);

// Clear all active filters
store.clearFilters();

// Multi-column sorting
store.setMultiSort([
  { field: 'department', direction: 'asc' },
  { field: 'salary', direction: 'desc' }
]);

Pagination & Selection

// Pagination controls
store.setPageSize(50);
store.setPage(2);
store.nextPage();
store.prevPage();

// Selection controls
store.selectRow(1);
store.toggleRowSelection(2);
store.selectAll();
store.clearSelection();

🏢 Upgrade to PRO & Enterprise

For high-frequency financial applications, trading desks, and massive datasets requiring MVCC branching, transaction safety, real-time collaboration, and streaming:

| Capability | Community Edition | GridStore PRO & Enterprise | | :--- | :---: | :---: | | Recommended Workload | Up to 50,000 in-memory rows | Millions of rows with worker indexing | | Time-Machine & MVCC | ❌ | Git-for-Data Branching, Timeline Scrubbing & Rollbacks | | ACID-style Transactions | ❌ | Atomic commits, rollback, savepoints & conflict merge | | High-Frequency Streaming | ❌ | 10,000+ ticks/sec RAF batching with sparkline buffers | | Excel Formula DAG Engine | ❌ | Reactive cross-cell formulas (=A1*B1, =SUM(...)) | | Autonomous Anomaly Guardian| ❌ | Z-Score & IQR outlier detection with 1-click remediation | | Natural Language AI Copilot| ❌ | English text to multi-column queries and storytelling | | Cloud & Offline Sync | ❌ | WebSockets, CRDT offline sync & multi-tenant isolation |

📄 License & Commercial Support

• Community Edition: Free to use under custom community license terms. See LICENSE for full details.
• Enterprise & PRO Licensing: For commercial source access, custom deployment SLA, and enterprise support, visit kumarlokesh16693/enterprise-crud or contact [email protected].

© Er. Lokesh Kumar. All rights reserved.