--- title: "Dynamic Datatable — Framer component · Best of Framer" description: "$11.00 · Framer component · by BHAVESH PATEL · Navigation. REST API Powered Data Grid" canonical: "https://framer.elliotli.dev/component/dynamic-datatable" --- [Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Dynamic Datatable # Dynamic Datatable REST API Powered Data Grid [View on Framer](https://framer.com/marketplace/components/dynamic-datatable/?via=elliot-li) ![Dynamic Datatable preview image 1](https://framer.elliotli.dev/og/component/dynamic-datatable/b0956be9a111cd62/1600x1200.jpg) ## Summary REST API Powered Data Grid ## Description **See live**: [https://datatable.framer.website/](https://datatable.framer.website/) **Documentation**: [https://docs-datatable.framer.website/](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](http://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). ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-gtob3iyf-UAnhsgaw4D8NSzl8ld0MEQUbblXpgy) ## Rank history [How rankings work →](/terms#rankings) - All · #6443 ## Details - **Author**: BHAVESH PATEL - **Price**: $11.00 - **Published**: 2026-03-11 - **Updated**: 2026-04-04 - **Added**: 2026-03-02 - **Categories**: Navigation ## More like this - [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu - [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation - [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects - [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation