See live: https://datatable.framer.website/
Documentation: https://docs-datatable.framer.website/
The first-ever Framer DataTable component with full REST API support (GET & POST) — featuring both server-side and client-side pagination, advanced filtering, sorting, export tools, and complete UI customization.
This is not just a table. It’s a production-ready data grid built for serious applications inside Framer.
Designed to deliver the power of libraries like AG Grid and DataTables.js, but fully optimized for the Framer ecosystem with property controls and visual customization.
✅ First REST API–Enabled DataTable in Framer
Supports:
GET & POST API methods
Server-side pagination
Client-side pagination
Server-side search, sorting, and column filters
Automatic handling of API responses (data, meta.total)
Dynamic query parameter mapping for backend integration
You can now connect real backend systems directly to Framer — no external wrappers required.
Use your data however you want:
REST API (GET / POST) - Client-side or Server-side rendering modes
CSV file import
Static JSON data
Switch seamlessly between data types using simple property controls.
Global Search
Searches across all searchable visible columns
Debounced input for server-side performance
Column-Level Filters
Text filter (contains / equal)
Number filter (equal / contains)
Date filter (multiple format support)
Boolean filter (custom true/false labels)
Rating & Progress numeric filters
Server-side filter payload auto-generated
Fully configurable filter behavior per column.
Single-column sorting
Multi-column sorting
Default sort configuration
Visual sort indicators
Server-side sort sync
Smart reset when switching pages or filters
Client-side slicing
Server-side controlled pagination
Configurable page size
Dynamic page number centering
Selectable visible page count
Auto-reset on search/filter/sort changes
fully customizable and responsive layout
Works perfectly with large backend datasets.
Supports powerful column rendering options:
Text
Number
Email (mailto links)
Image (with sizing & border control)
Date (multiple display formats)
Boolean (custom labels)
Rating (SVG star system with gradients)
Badge (dynamic color mapping)
Progress bar (dynamic color mapping)
Each column supports:
Prefix & suffix
Text alignment
Custom fonts
Width control
Show/hide toggle
Sort enable/disable
Search enable/disable
Filter enable/disable
Row Selection:
Checkbox selection
Select all
Indeterminate state
ID-based row tracking
Works with pagination
Export Options
Export selected or full dataset:
CSV
JSON
TEXT
Print-friendly table view
Column Chooser
Show / hide columns dynamically
Saved in Local Storage
User preference persistence
All UI elements are fully customizable via Framer property controls:
Table colors (header, striped rows, borders)
Typography (font family, font size, font weight, spacing)
Buttons (radius, padding, color controls)
Inputs (radius, padding, color controls)
Compact mode
Hover & striped row effects
Bordered table option
Skeleton loading state
Built using CSS variables for clean theming and design consistency.
Debounced API calls
Intelligent data memoization
Server-side mode prevents large data loads
Efficient sorting & filtering
Controlled re-renders
Loading states for API and initial render
Built for real-world production apps.
This component is ideal for:
Admin dashboards
SaaS panels
CRM systems
Analytics interfaces
Reporting tools
Marketplace dashboards
CMS & Internal tools
Directory & listing pages
Pricing Comparison pages
Data-driven web apps
If you need a powerful, API-ready, enterprise-style data grid directly inside Framer — this is it.
Because this isn’t just a styled table.
It’s a fully functional data grid system — comparable to AG Grid or DataTables.js — but built specifically for Framer with visual controls and API connectivity.
Need copy URL and paste to Framer Project (Section).
