Filter

ln-filter is applied to a filter control via <nav data-ln-filter="targetId"> containing standard checkbox inputs (data-ln-filter-value="...") and an "All" reset sentinel (data-ln-filter-reset). On checkbox change events, it updates active filter criteria and maintains sentinel synchronization automatically. It evaluates target items or table rows by dataset attributes or column text, applies data-ln-filter-hide and .hidden to non-matching elements, and dispatches cancelable ln-filter:change CustomEvents for active coordinators to claim.

In ln-ashlar, this zero-dependency primitive operates as an event-driven layer upgrading standard HTML checkboxes into reactive multi-column and list filter controls.

Architectural Design Features

1. Attribute & Tabular Modes: Toggles visibility of generic list items matching data-{key}="{value}" attributes, or filters standard HTML <table> rows by parsing cell text inside Column Index N.
2. Multi-Column AND Composition: Multiple filter instances can coordinate on the same native table target with different column indices (e.g. Department and Status). Checkboxes within a single column are evaluated with OR logic, while filters across different columns combine with AND logic.
3. Authored Checklists & Local Persistence: Filter options are authored directly in markup or rendered via domain templates (such as ln-options). Adding data-ln-persist automatically remembers active checkbox selections across page reloads.

For the full guide see the ln-filter README and the architecture reference.

• Ana Petrova — UI Designer
• Marko Nikolov — Frontend Developer
• Ivan Stojanovski — Backend Developer
• Sara Dimitrova — QA Engineer
• Elena Ristova — UX Designer
• Toni Angelov — QA Lead
• Boris Ilievski — Full Stack Developer

• Project Alpha Status: Active
• Project Beta Status: Pending
• Project Gamma Status: Inactive
• Project Delta Status: Active
• Project Epsilon Status: Pending
• Project Zeta Status: Active

Both components work independently on the same list — an item is visible only when neither hides it.

• Maja Kostadinova — HR Manager
• Petar Blazevski — System Administrator
• Kristina Gjorgjevska — Accountant
• Aleksandar Naumov — DevOps Engineer
• Vesna Todorova — HR Specialist
• Darko Mitevski — Financial Analyst
• Lidija Petrovska — Security Engineer

ln-filter has no imperative API. External code drives state by setting input.checked on the filter's checkboxes and dispatching a bubbling change event.

• Task A — High priority
• Task B — Medium priority
• Task C — Low priority
• Task D — High priority
• Task E — Medium priority

Filter a plain <table> by column text. No data-* attributes needed on rows.

Two filters on the same table: department (column 2) AND status (column 3). Combined with AND logic across columns.

Column filter with authored options where a search input filters the checkbox list options dynamically.

document.addEventListener('ln-filter:change', function (e) {
    console.log('Filter:', e.detail.key, '=', e.detail.values.join(', '), 'target:', e.detail.targetId);
});

document.addEventListener('ln-filter:reset', function (e) {
    console.log('Filter reset');
});

The hide rule is bundled in ln-ashlar. Pill styling (active state highlight) is automatic via label:has(> input:checked) in the library defaults — no additional CSS needed for active state.

/* Combined with ln-search */
[data-ln-search-hide],
[data-ln-filter-hide] {
    display: none;
}