Table: configurable filter popover actions (cancel without clearing) #787

Problem

The built-in column filter popover of tedi-table (filterable: true with filterTemplate) renders a fixed footer with two actions: Apply and Clear. Clear resets the column filter to undefined and closes the popover.

Our designs use a "Katkesta" (Cancel) button in every filter popover. Users expect it to close the popover and leave the filter as it was: the applied value stays and the unapplied draft is discarded. Today there is no footer action with that behaviour, so the only button next to Apply removes the filter instead.

Closing without changing the filter is already possible, but not from a button in the footer:

• on mobile with the modal's X button or Esc;
• on desktop with Esc, a click outside the popover, or a second click on the filter trigger.

When the footer offers a large "Clear" or a relabelled "Cancel" that clears, users who want to back out lose the filter they had applied.

Solution

Make the popover footer actions configurable per table and per column, for example:

• a Cancel action that closes the popover without applying the draft and without clearing the applied filter, with the draft reset to the applied value as clearOnClose: true does today;
• a choice of which actions the footer shows and in which order, for example filterable: { actions: ["cancel", "apply"] } or ["clear", "cancel", "apply"], with a table-level default;
• a cancel() (or close()) function in the filter template context next to apply() and clear(), so a custom input can close the popover the same way.

The naming and the exact API are up to you. The need is a footer button that means "close without changing anything".

Examples and information

• Storybook, built-in filter: https://storybook.tedi.ee/angular/main/iframe.html?id=tedi-ready-content-table--cells-and-templates&viewMode=docs#filterable-columns-built-in
• Discussed in TEDI Slack with Märt Sessman, who suggested a feature request for more configurable filter behaviour.
• In our views the Cancel button sits next to Apply in all filter popovers (text, select, date range). We can share the design on request.

Project

SKAIS (Sotsiaalkindlustusamet), officer application views built on TEDI Angular (Nortal).

DoD

• The component is developed using best practices, conventions, and modern frontend trends
• The component follows BEM naming conventions (if applicable)
• The component implementation matches the Figma design, including all defined states and interactions
• The component supports responsiveness and scales across breakpoints (if applicable)
• The component does not introduce runtime errors or warnings
• Linter passes
• The component is exported from its tier barrel
• The component has unit tests with at least 80% code coverage (enforced by the global Jest coverageThreshold over tedi/components, not per component)
• CodeCov passes its threshold (80% on the changed code, with 10% tolerance — a separate gate from the Jest one above)
• The component has passed code review
• The component has passed Chromatic visual review
• Storybook stories are created:
  • Cover all Figma variations
  • Include edge cases, empty/error states
• Component’s API (props, slots, events) is documented
• ZeroHeight is updated with design/development guidelines
• External dependencies used in the component are documented in Storybook and Zeroheight, with rationale
• Semantic commit format type(scope): Subject text #issue-ref is used (for semantic-release), with the issue reference required - see Commit convention
• External libraries comply with validated open source licenses
• Component is versioned correctly and ready for release if required
• Update the Angular development status on the statuses page in Zeroheight