FRAMER COMPONENT / EDITION 01
List sort and count
Framer’s dynamic filters are good. They just don’t sort, don’t count, and leave nothing behind when everything is filtered out. This adds those three things, and a clear-all, without replacing a single filter you already have.
Enquire about this edition ↗
PROPOSED EDITION / RELEASE DETAILS ON ENQUIRY
← Collection
A CLOSER LOOK
Twelve objects, sorted and counted.
PROPOSED CONTENTS
Inside the edition.
01
Sort by date, number or text
Up to eight options, ascending or descending, read from a layer you name or auto-detected from the rendered text.
02
A live result count
Write it as {n} result{s} of {total}. It updates as filters change and is announced politely to screen readers.
03
An empty state, and a clear-all
A designed empty state when every item is filtered out, and a clear-all that resets every filter through Framer’s own Reset variables action.
PUT IT TO WORK
A useful starting point.
01
Drop it in
Paste the component link into your project and drop an instance above your collection list.
02
Name two layers
Name the collection list layer Items and the repeated item Item, or type your own names into List layer and Item layer.
03
Add your sort options
A label, the layer that holds the value, the kind and the direction. Leave the field empty to auto-detect.
THE DETAILS
Before you begin.
FORMAT
Framer code component. TypeScript source, README and licence included.
DESIGNED FOR
Anyone with a CMS grid in Framer — work, objects, articles, products — who uses the native dynamic filters and misses sorting, a count and an empty state.
REQUIRES
Framer, any plan. React 18. One named collection list layer. No fonts fetched and no external services.
LICENSE / PROPOSED
Standard licence — own and client projects, no redistribution.
AVAILABILITY
Available now
