sheengemologic ui
All components

FilterBar

Edits the accepted serializable filter AST through removable condition chips and typed draft popovers.@gemologic/sheen-table · data

Playground

This example has no scalar controls. Its validated source remains interactive below.
<FilterBar columns={columns} value={filter()} onChange={setFilter} facets={{ status: { open: 12, closed: 4 } }} />

Variant matrix

Accepted enum filter

Anatomy

Package
@gemologic/sheen-table
Source
packages/table/src/FilterBar.tsx
Tokens
  • --sheen-color-bg-raised
  • --sheen-color-border-control
  • --sheen-color-focus-ring

Accessibility

Role: group, dialog, searchbox, button, checkboxKeyboard: Tab, Shift+Tab, Enter, Space, Escape

Do

  • Keep the accepted AST controlled by the same owner as table state.
  • Use enum facets from the complete transformed result, not the visible page.
  • Apply editor drafts atomically and retain accepted rows during delegated revalidation.

Do not

  • Do not flatten imported nested logic into a misleading conjunction.
  • Do not dispatch server requests on each draft keystroke.
  • Do not interpret native date values in the browser's local time zone.

Generated props

NameTypeDefaultDescription
columns *SheenColumns<Row>Opaque sheen columns whose filter declarations supply labels, types, enum options, and validation.
value *FilterNodeAccepted immutable filter AST. Nested and/or/not structure is preserved during leaf edits.
onChange *(filter: FilterNode) => voidReceives one validated immutable AST when a draft is applied or a chip is removed.
facetsReadonly<Record<string, Readonly<Record<string, number>>>> | undefinedOptional accepted enum counts by column and option, typically from the complete client view or server response.
disabledbooleanfalsePrevents apply, add, and remove intent while retaining visible accepted chips and draft inspection.
classstringAdditional class merged onto the labeled filter region.
dateEditorFilterDateEditorOptional isolated date selector adapter; omission preserves the native date-input fallback and table bundle boundary.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.