@utiltools/grid-core

Grid Core Demo

Interactive demo of the framework-agnostic core engine. Sort, filter, and paginate with pure JavaScript functions.

$npm install@utiltools/grid-core

Sort

Filter

Pagination

Page 1 of 2

ID	Name	Email	Age	City
1	Alice Johnson	[email protected]	28	New York
2	Bob Smith	[email protected]	34	London
3	Charlie Brown	[email protected]	25	Paris
4	Diana Prince	[email protected]	31	Berlin
5	Eve Davis	[email protected]	29	Tokyo

Showing 5 of 8 results

Selection manager demo

Uses createSelection directly from @utiltools/grid-core to manage row keys.

Selected keys: 0 (tick 0)

Code for this demo

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

let data = [...originalData];

// Apply filter
if (filterValue) {
  data = filterData(data, {
    key: 'name',
    value: '',
    operator: 'contains',
  });
}

// Apply sort
data = sortData(data, {
  key: 'name',
  direction: 'asc',
});

// Apply pagination
const result = paginateData(data, { 
  page: 1, 
  pageSize: 5 
});

console.log(result.data); // Current page data
console.log(result.pageInfo); // Pagination metadata