5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tcde,

The Most Customizable List Component for Framer

Turn any data set into a polished, interactive list. Drag rows to reorder, click column headers to sort, and search to filter. Everything is wrapped in 5 carefully crafted themes with full color and typography control.

5 Premium Themes (No AI Aesthetics)

• Ink - warm charcoal with amber accent• Paper - clean light with rose accent• Slate - cool dark with teal accent• Espresso - rich brown with golden accent• Sand - warm beige with burnt orange accent

Switch themes instantly or enable custom colors to override all 10 color slots.

Core Features

• Drag to reorder with smooth interaction and elevation feedback• Multi-column sort on Task, Status, Priority, and Value• Live search with instant filtering, focus ring, and clear button• localStorage persistence so order survives refresh• Priority badges: Critical, High, Medium, Low• Status badges: Completed, In Progress, Planning, Not Started• Responsive columns that hide progressively on smaller screens• Canvas-safe behavior so everything stays visible inside Framer

Why This Isn’t Native in Framer

Drag-based reordering, persistent state, real-time filtering, and multi-level sorting require JavaScript logic beyond standard Framer layers and variants. This component handles all of it.

Typography (4 Independent Controls)

• Title font for main heading• Subtitle font for headers, search, and footer• Row name font for primary content• Row detail font for metadata and badges

Each comes with full control over size, weight, spacing, and line height.

Granular Spacing Controls

• Card radius and row radius• Header and row padding (horizontal and vertical)• Row gap, column gap, and title spacing• Optional row borders with adjustable width• Optional card shadow with theme-aware intensity

Custom Data via JSON

Use your own data with a simple JSON structure including id, name, category, status, priority, date, and value.Leave it empty to use 8 realistic demo items.

Full Property Panel (40+ Controls)

• Theme selection with 5 presets• Custom data input via JSON• Content editing for titles, labels, and placeholders• Feature toggles for search, sorting, drag, and persistence• Style controls for spacing, radius, and borders• Optional color overrides for full customization• Typography controls for all text roles

Use Cases

• Project task dashboards• CRM lists and deal tracking• Product and inventory management• Team workflows and sprint boards• Content pipelines and editorial systems• Any sortable, filterable, reorderable data

Default Setup

Comes with the Ink theme and 8 realistic task items ready to drag, sort, and search instantly.

Tags

sortable list, drag reorder, data table, sort filter, task list, project management, interactive list, framer component, list view, data display, multi sort, search filter, localStorage, responsive, typography, custom colors, drag and drop

5a:[["$","$L5d",null,{"post":{"id":"019d485c-cf33-71cd-8669-4f4c34e28918","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"df3fedfd-4d3f-4100-b2f4-0eb9ffdcaaa1","name":"Can Girgin","slug":"can-girgin","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29285/avatar-ET5yH7T79O6hzfpRHA4wHb7OxgIv8O.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"SJDKXTVVPQYRcooFJkMn","resolved":true,"title":"Sortable List Pro","body":"$5e","bodyJson":null,"introduction":"Drag Reorder + Sort + Search + 5 Themes","slug":"sortable-list-pro","author":{"framerUserId":"df3fedfd-4d3f-4100-b2f4-0eb9ffdcaaa1","name":"Can Girgin","slug":"can-girgin","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29285/avatar-ET5yH7T79O6hzfpRHA4wHb7OxgIv8O.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/SJDKXTVVPQYRcooFJkMn/sortable-list-pro-SjCum43IeWU9NpvW01ERX9IuK43uP4","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-24T00:10:51.489Z","updatedAt":"2026-04-01T09:21:46.746Z","publishedAt":"2026-04-01T09:25:35.155Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://courteous-cogwheel-881187.framer.app/","price":"7","paymentUrl":"https://joworks-studio.lemonsqueezy.com/checkout/buy/411cc086-7fdc-41f6-9ab2-3230f6c03db7","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"NSSdlGQ8ZljwqsrO9Ghw","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-01T09:25:35.155Z","updatedAt":"2026-04-01T09:25:35.155Z","reported":false}}],"$L5f"]

Suggested for you