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.
Pricing
Simple, one-time payment. No subscriptions. Commercial use allowed.
€299€199
Save €100 on your license by being our early beta tester!
Valid forever for the major version you purchase.
- Lifetime updates for the purchased major release
- Full source access inside your app, no runtime calls
- Priority email support
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
Key differences at a glance
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.
Built‑in state persistence. Remembers columns, filters, and view across sessions; many toolkits require custom wiring.
What you should know
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?
Set TABLEFRONT_LICENSE in your .env and prepend tablefront activate to your build script (e.g., "build": "tablefront activate && next build"). No runtime network calls.
I lost my license key, how can I retrieve it?
Email us from the address you used to purchase at tablefront@sineways.tech and we’ll resend your key promptly.
Ready to try it?
Install now or email us, we reply fast.
npm install @sineways/react-tablefront