Dynamic Datatable

REST API Powered Data Grid

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. 🚀 What Makes This Component Unique? ✅ 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. 📊 Data Source Flexibility 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. 🔎 Advanced Filtering & Search 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. 🔃 Sorting System Single-column sorting Multi-column sorting Default sort configuration Visual sort indicators Server-side sort sync Smart reset when switching pages or filters 📄 Pagination (Smart & Flexible) 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. 🎨 Fully Customizable Column Types 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) Action (Clickable Action Buttons — Turn Any Row Into a Gateway) Each column supports: Prefix & suffix Text alignment Custom fonts Width control Show/hide toggle Sort enable/disable Search enable/disable Filter enable/disable 🧩 Advanced UI Features 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 🎨 Complete Design Customization 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. ⚡ Performance Optimized 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. 🏗 Built for Real Applications 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. 💡 Why Choose This Over Basic Tables? 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. Changelog---------------------------------------------------- (04-04-2026) - Added "Action" column type — render clickable buttons that redirect to any URL from your row data After your purchase, you will receive a link to the Component URL. Need copy URL and paste to Framer Project (Section).

REST API Powered Data Grid