Filter & Sort Menus

Usage

• Use FilterMenu and SortMenu as the first step of adding a filter or sort: pick a property, then open FilterEditor or SortEditor.
• Order the properties the way people expect to scan them (title first, then frequently filtered ones).
• Use PropertyPickerMenu directly for other “pick a property” flows (group by, calculations).
• Don’t use these menus outside a database; use Menu or Combobox for general choices.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { FilterMenu, SortMenu, createTasksSample } from '@krackedui/motion';

export function FilterSortMenusExample() {
  const { collection } = createTasksSample();
  const order = ['title', 'due', 'priority', 'status', 'team'];
  const properties = [...collection.properties].sort((a, b) => order.indexOf(a.id) - order.indexOf(b.id));

  return (
    <div className="flex flex-wrap items-start justify-center gap-6">
      <FilterMenu properties={properties} highlightFirst onSelect={(p) => console.log('Filter by', p.name)} />
      <SortMenu properties={properties} onSelect={(p) => console.log('Sort by', p.name)} />
    </div>
  );
}

Examples

Filter editor

Sort editor

Custom menu from the parts

Build other database pickers ("Group by…") from the same parts: DbMenuSearch on top, DbMenuItem rows in labelled groups, DbMenuRule between sections and useMenuKeys for ↑/↓ and Enter/Space.

Composition

<FilterMenu> / <SortMenu>         // = PropertyPickerMenu with a placeholder (+ footer for filter)
  DbMenuSearch "Filter by…" / "Sort by…"
  DbMenuItem × n → PropertyTypeIcon + name
  DbMenuRule · "Add advanced filter" (filter only)

<FilterEditor>   "Status  is ▾"  · value picker (options checklist / text / date) · delete
<SortEditor>     row per sort: property ▾ · direction ▾ · remove · "+ Add sort"

menu parts: DbMenuSearch, DbMenuRule, DbMenuItem, SubmenuRow, useMenuKeys()

API Reference

FilterMenu

PropertyPickerMenu with the "Filter by…" placeholder and the "Add advanced filter" footer. Based on <div> (except onSelect).

SortMenu

PropertyPickerMenu with the "Sort by…" placeholder. Based on <div> (except onSelect).

PropertyPickerMenu

FilterEditor

SortEditor

DbMenuSearch

The 28px search field at the top of database menus, placed 12px in. An <input type="search">: all input props pass through; its accessible name defaults to the placeholder (without "…").

DbMenuItem

A MenuRow made focusable for useMenuKeys: a button (or a switch when toggle is set) with tabIndex={-1}; focus draws the highlighted look. Same props as MenuRow.

DbMenuRule

Inset hairline between database menu sections (12px from the edges).

useMenuKeys

useMenuKeys(): (e: KeyboardEvent<HTMLElement>) => void. Attach to a menu surface's onKeyDown: ↑/↓ move focus across its DbMenuItems (wrapping), Enter/Space click the focused one.

SubmenuRow

Menu row that opens a flyout to its right ("Layout Table ›"). Extends MenuRowProps (without submenu / content).

Accessibility

• The search field takes focus with autoFocus; Enter picks the first match.
• Rows are focusable DbMenuItems: ArrowUp/ArrowDown move, Enter/Space select (useMenuKeys).
• Editors’ delete buttons are labelled "Delete filter" / "Remove sort".