56:I[473921,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/0_p7_rfyih3ce.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3x7cofmdt-u_a.js","/creators-assets/_next/static/immutable/chunks/18e_sauhpyyit.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/439i_r5_4eszl.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 57:T1ba0,

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

53:[["$","$L56",null,{"post":{"id":"019cdccd-e69a-714d-97f2-b882eacced27","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c62ad15b-fb9f-4b6d-af6e-be0a4253f437","name":"BHAVESH PATEL","slug":"bhavesh-patel","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/75187/5f4052daec065500bc8b79bb79c64f60-SnXpzI4Dwx5eB5F8BhYoiGv0jwbkkZ","followed":false,"followsYou":false},"media":[],"resources":[{"id":"mdM7hev7RDwjoo9frdzZ","resolved":true,"title":"Dynamic Datatable","body":"$57","bodyJson":null,"introduction":"REST API Powered Data Grid","slug":"dynamic-datatable","author":{"framerUserId":"c62ad15b-fb9f-4b6d-af6e-be0a4253f437","name":"BHAVESH PATEL","slug":"bhavesh-patel","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/75187/5f4052daec065500bc8b79bb79c64f60-SnXpzI4Dwx5eB5F8BhYoiGv0jwbkkZ","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/mdM7hev7RDwjoo9frdzZ/dynamic-datatable-FsFrWpxNaoXIT2NbqlLB9uKFCt985B","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-02T07:08:32.175Z","updatedAt":"2026-04-04T17:54:05.964Z","publishedAt":"2026-03-11T12:10:07.386Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://datatable.framer.website/","price":"11","paymentUrl":"https://bhplugin.lemonsqueezy.com/checkout/buy/549664bd-7ec2-4769-91e3-e654655c1366","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"fvgvuSzLxoqbgB1W45kp","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-11T12:10:07.386Z","updatedAt":"2026-03-11T12:10:07.386Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you