DEV Community

Cover image for Building a Lightweight React Table with Per-Column Filtering
Kiyamov-Bulat
Kiyamov-Bulat

Posted on

Building a Lightweight React Table with Per-Column Filtering

#react #typescript #webdev #showdev

❗ The Problem

Every time I started a new internal tool or admin panel, I had to rebuild the same data table:

  • sorting by column
  • filtering per field
  • responsive layout
  • TypeScript support

Popular libraries like Ag-Grid or TanStack Table are powerful — but often overkill for simple use cases.

So I built @bulak/react-registry — a minimal, fully typed React table component that does just enough.

✨ Key Decisions

  • ✅ No heavy dependencies — only React and TypeScript
  • ✅ Column sorting — click a column header to sort
  • ✅ Per-column filtering — click the icon in the header to filter that field
  • ✅ Easy to customize — clean, modular code
  • ✅ Smart + dumb components — use <Registry> for quick setup or <Table> for full control
  • ✅ MIT licensed — free for commercial use

🔴 Live Demo

See it in action: https://react-registry-azure.vercel.app

🚀 How to Use

Install:

npm install @bulak/react-registry
Enter fullscreen mode Exit fullscreen mode

Basic usage (Registry):

import { Registry, RegistryHeader } from '@bulak/react-registry';

const DATA = [
    { id: 1, fullName: 'Harry Potter', employeeNumber: 1, age: 18 },
];

const HEADERS: RegistryHeader<(typeof DATA)[number]>[] = [
    { key: 'fullName', width: 'calc(50% - 26px)', label: 'Full name' },
    { key: 'employeeNumber', width: 'calc(50% - 26px)', label: 'Employee number' },
    { key: 'age', width: '50px', label: 'Age' },
];

export function App() {
    return (
        <Registry
            data={DATA}
            headers={HEADERS}
            variant="bordered"
            sortable={true}
            filterable={true}
        />
    );
}
Enter fullscreen mode Exit fullscreen mode

💡 For full control, use the Table compound component and utility hooks (see docs).

💻 Open Source

📦 npm: https://www.npmjs.com/package/@bulak/react-registry
🐙 GitHub: https://github.com/bulak/react-registry

❓ Why Not TanStack Table?

I love TanStack Table — but it only provides logic, not UI.
I wanted a ready-to-use component with styles, filtering UI, and TypeScript out of the box.

❓ What caused you to write this?

At my job, I make a lot of tables of the same type. And I thought it would be a good idea to put all my knowledge and experience in one package. At work, we mostly made our own UI kit, with almost no dependencies. Our tables have many functions, from resizing and moving columns to exporting. In fact, we are slowly making our own excel haha. As a result, in addition to expressing my experience, I want to implement all these functions in my package, plus structure and refactor the code, in such a way that it could be useful to others.

It’s MIT licensed — use it anywhere. Feedback and PRs welcome!

🏁 Final Thoughts

Sometimes, the best solution is a small, focused component that solves your specific problem — without the bloat.

Give it a try — and let me know what you think!

#react

Official tag for Facebook's React JavaScript library for building user interfaces

Top comments (0)