DEV Community

Tejas Kadam
Tejas Kadam

Posted on

sort-filter-lite: headless sort, filter, and pagination for data tables

#javascript #typescript #webdev #opensource

Every data table ends up with the same hand-rolled sort/filter/pagination logic, rewritten slightly differently in every project. I got tired of it, so I pulled it into a small package.

sort-filter-lite is headless - no components, no rendering assumptions. Just pure functions that work on plain arrays of objects, so it drops into React, Angular, Vue, or vanilla JS the same way.

import { sortBy, filterBy, paginate } from 'sort-filter-lite';

const active = filterBy(users, { key: 'active', operator: 'eq', value: true });
const sorted = sortBy(active, { key: 'age', direction: 'desc' });
const page = paginate(sorted, 1, 20);
// { items, page, pageSize, totalItems, totalPages, hasNextPage, hasPrevPage }
Enter fullscreen mode Exit fullscreen mode

A few design notes:

  • Every function returns a new array - nothing mutates the input.
  • Default sort handles numbers, dates, and case-insensitive strings automatically. Custom comparator when you need it.
  • Filters support eq, neq, gt, gte, lt, lte, contains, startsWith, endsWith, in, notIn - combined with AND semantics.
  • paginate clamps out-of-range pages instead of throwing, so "page 0" or "page 999" don't blow up your UI.

Fully typed, zero runtime dependencies, 24 tests, 98% coverage, CI on Node 18 and 20.

GitHub: https://github.com/tejas821/sort-filter-lite
npm: npm i sort-filter-lite

This is package #4 in a small series of open-source utility packages I've been shipping. Feedback welcome - especially if you spot an edge case I missed.

Top comments (0)