Tablecn

Tablecn is a React-based data table component that combines server-side data processing with real-time collaboration features. It provides a structured approach to building interactive tables using reusable components and a declarative column configuration system that automatically generates filter interfaces.

The project distinguishes itself through its contextual action bar pattern, which surfaces batch operations only when rows are selected, keeping the main interface uncluttered. It supports virtualized row rendering for performance with large datasets, and uses WebSocket connections to synchronize data changes across all connected clients in real time. The table state, including filters, sorting, and pagination, can be persisted in the URL for shareable views.

The component offers comprehensive data display capabilities including column pinning, sorting, pagination, infinite scroll, and keyboard navigation. Its filtering system supports per-column text, number, date, and select filters with customizable operators, as well as an advanced multi-condition rule interface for complex queries.

Features

Declarative Column Configurations - Defines table columns and their associated filters through a configuration object that auto-generates UI elements.

Server-Side Filtering & Sorting - Offloads sorting, filtering, and pagination to the server to minimize client-side computation for large datasets.

Interactive Tabular Displays - Renders a sortable, filterable, and paginated table for browsing structured datasets.

Per-Column Row Filters - Applies text, number, date, select, or multi-select filters with customizable operators.

Configurable Column Definitions - Configures columns and generates filters from column definitions for flexible table layouts.

Component-Based Tables - Builds data tables using reusable React components with shadcn/ui primitives for consistent styling and behavior.

Infinite Scroll - Loads and renders large datasets progressively with virtualization for smooth scrolling through thousands of records.

Data Synchronization WebSockets - Uses WebSocket connections to broadcast and apply data changes across all connected clients instantly.

Multi-Condition Rule Interfaces - Applies complex filter rules through a Notion/Airtable-like interface to query data with multiple combined conditions.

Data Pagination - Divides results into pages with configurable page sizes for both server and client.

Batch Row Operations - Selects multiple rows in a data table and performs batch actions through a contextual toolbar.

Real-time Data Synchronization - Edits and views table data simultaneously with multiple users, with instant WebSocket-based synchronization of changes.

Virtualized Rendering - Renders only visible rows in the DOM using virtualization to maintain performance with thousands of records.

Column Pinning - Fixes a column to the left or right side of the table during horizontal scroll.

Row Selection Interfaces - Picks single or multiple rows and triggers an action bar for batch operations.

Contextual Action Bars - Displays a floating toolbar when rows are selected, enabling batch operations without cluttering the main interface.

Single-Column Sorting - Sorts data by one or multiple columns while preserving sort state across interactions.

sadmann7tablecn

Features

Star history