Tablefront
Zero‑config React DataTable
A premium, zero‑configuration DataTable with table, grid, and masonry layouts. Built on TanStack Table with TypeScript, Zustand state, composable UI, and smart auto‑generation of columns, filters, and search.
npm install @sineways/react-tablefrontCommercial license. Try it free with a watermark (fully featured) for as long as you like.
Zero configuration
Columns, search, and filters are auto‑generated. Drop in your data and go.
Three layouts
Table, grid, and masonry modes with consistent APIs and styling.
Advanced interactions
Column drag & resize, expandable rows, structured filters, and debounced search.
Performance
Pagination and infinite scroll (including adaptive/virtualized) for large datasets.
Composable UI
Override UI primitives, icons, and styles. Use presets or customize slots.
State & Type Safety
State persistence via storeId and full TypeScript types everywhere.
Screenshots
A quick look at layouts and interactions
Quick Start
npm install @sineways/react-tablefrontimport { DataTable } from '@sineways/react-tablefront'
export default function UsersPage() {
return <DataTable data={[]} />
}License
Activation via .env + build-time step. No runtime network calls.
# .env
TABLEFRONT_LICENSE=your-license-key"scripts": {
"build": "tablefront activate && next build"
}How it’s different
Scan the highlights in seconds
Zero config vs. headless toolkits that require wiring (e.g., TanStack Table alone).
Multiple layouts (table, grid, masonry) vs. table‑only libraries.
Smart auto‑generation of columns, search, and filters to save build time.
Composable overrides without locking into a specific design system.
Performance options with pagination and adaptive infinite scroll.
What you should know
- Brand‑new alpha release; APIs may evolve.
- Commercial license during testing phase.
- Free to try with a watermark; fully featured, no time limit.
- Questions? Reach us at info@sineways.tech.
Can I use my own UI components?
Yes. Supply your primitives via the uiComponents prop, or override only specific slots with customStyles.
Does it work without configuring columns?
Yes. Columns, search, and filters are auto‑generated based on your data shape. You can customize any of them when needed.
Is there infinite scroll or pagination?
Both. Use paginationConfig or infiniteScrollConfig including a virtualized adaptive mode for very large lists.
How do I handle licensing?
Provide NEXT_PUBLIC_TABLEFRONT_LICENSE or wrap your app with LicenseProvider. You can also set a custom verify URL.
Ready to try it?
Install now or email us — we reply fast.
npm install @sineways/react-tablefront