Dynamic Datatable

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).