Framework Agnostic

@utiltools/grid-core

Framework-agnostic core engine for data grids with sorting, filtering, pagination, and row selection.

Why grid-core?

This is the framework-agnostic engine that powers grid functionality. It provides pure JavaScript/TypeScript functions for sorting, filtering, pagination, and selection.

Use it directly in any framework (React, Vue, Angular, Svelte) or with vanilla JavaScript. If you're using React, check out @utiltools/datagrid which wraps this core with React components.

Installation

$ npm install @utiltools/grid-core

Quick Start

import { 
  sortData, 
  filterData, 
  paginateData, 
  createSelection 
} from '@utiltools/grid-core';

const data = [
  { id: 1, name: 'Alice', age: 30, city: 'NYC' },
  { id: 2, name: 'Bob', age: 25, city: 'London' },
  { id: 3, name: 'Charlie', age: 35, city: 'Paris' },
];

// Sorting
const sorted = sortData(data, { key: 'age', direction: 'asc' });

// Filtering
const filtered = filterData(data, { 
  key: 'city', 
  value: 'London', 
  operator: 'equals' 
});

// Pagination
const paginated = paginateData(data, { page: 1, pageSize: 10 });

// Selection
const selection = createSelection();
selection.toggleRow(data[0]);
console.log(selection.isSelected(data[0])); // true

API Reference

sortData

Sort an array of objects by a specific key.

sortData<T>(
  data: T[], 
  config: { key: keyof T; direction: 'asc' | 'desc' }
): T[]

Example:

const sorted = sortData(users, { key: 'age', direction: 'desc' });
// Returns sorted copy of the array

filterData

Filter an array based on a field and operator.

filterData<T>(
  data: T[],
  filter: {
    key: keyof T;
    value: any;
    operator: 'equals' | 'contains' | 'startsWith' | 'endsWith' | 
              'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 
              'lessThanOrEqual';
  }
): T[]

Example:

const adults = filterData(users, {
  key: 'age',
  value: 18,
  operator: 'greaterThanOrEqual'
});

paginateData

Paginate an array and return page info.

paginateData<T>(
  data: T[],
  config: { page: number; pageSize: number }
): {
  data: T[];
  pageInfo: {
    currentPage: number;
    pageSize: number;
    totalItems: number;
    totalPages: number;
    hasNext: boolean;
    hasPrev: boolean;
  }
}

Example:

const result = paginateData(users, { page: 2, pageSize: 10 });
console.log(result.data); // 10 items
console.log(result.pageInfo.totalPages); // Total number of pages

getPaginationInfo

Get pagination metadata without slicing data.

getPaginationInfo(
  totalItems: number,
  currentPage: number,
  pageSize: number
): PaginationInfo

Example:

const info = getPaginationInfo(100, 3, 25);
console.log(info.totalPages); // 4
console.log(info.hasNext); // true

createSelection

Create a selection manager for tracking selected rows.

createSelection<T>(rowKey?: keyof T): {
  toggleRow: (row: T) => void;
  selectAll: (rows: T[]) => void;
  clear: () => void;
  isSelected: (row: T) => boolean;
  getSelectedRows: () => T[];
  getSelectedKeys: () => Set<string>;
}

Example:

const selection = createSelection<User>('id');
selection.toggleRow(user1);
selection.toggleRow(user2);
console.log(selection.getSelectedRows()); // [user1, user2]

Features

Framework Agnostic

Works with React, Vue, Angular, Svelte, or vanilla JS

Zero Dependencies

No external dependencies, lightweight bundle

TypeScript First

Written in TypeScript with full type definitions

Tree Shakeable

Import only what you need

Performant

Optimized algorithms for large datasets

Well Tested

Testing foundation in progress

Related Packages

@utiltools/datagrid

React components built on top of grid-core

Need Help?

Open an issue on GitHub or check the React implementation for more examples.