Table Filter

FTTableFilter is the popover shell used for column-level filters, most commonly inside FTDataTable header cells.

It renders the trigger button, the tooltip/popover container, and the standard Save Filter, Clear, and Filter actions. The actual filter fields and filtering logic stay in the consumer.

Usage

vue

<script setup lang="ts">
import { FTTableFilter } from '@fasttrack-solutions/vue-components-lib';
</script>

<script setup lang="ts">
import { FTTableFilter } from '@fasttrack-solutions/vue-components-lib';
</script>

Basic filter shell

vue

<FTTableFilter
  :active="active"
  @filter="applyFilter"
  @clear="clearFilter"
  @save="saveFilter"
>
  <div>
    <!-- your custom filter form -->
  </div>
</FTTableFilter>

<FTTableFilter
  :active="active"
  @filter="applyFilter"
  @clear="clearFilter"
  @save="saveFilter"
>
  <div>
    <!-- your custom filter form -->
  </div>
</FTTableFilter>

Props

Prop	Type	Default	Description
`active`	`boolean`	`false`	Highlights the trigger button to indicate an active filter.
`disabled`	`boolean`	`false`	Disables the `Filter` and `Clear` actions.
`iconPrefix`	`string`	`'fas'`	Font Awesome prefix used for the trigger icon.
`placement`	placement union	`'bottom'`	Tooltip/popover placement relative to the trigger.

Events

Event	Description
`filter`	Fired when the `Filter` action is clicked or the form is submitted.
`clear`	Fired when the `Clear` action is clicked.
`save`	Fired when the `Save Filter` action is clicked.

Slots

Slot	Description
`default`	Custom filter controls rendered inside the popover body.

Table Filter ​

Usage ​

Basic filter shell ​

Props ​

Events ​