Filters

Filters are defined in table structure (structureFilters). Users edit them in a Sheet side panel; applied values live in Redux and are sent on every data query.

UI components

Component	File	Role
`FilterTrigger`	`./ApiTables/core/FilterTrigger.tsx`	Button to open/close filter panel
`TableFilters`	`./ApiTables/core/TableFilters.tsx`	Sheet + react-hook-form fields
`AppliedFilters`	`./ApiTables/core/AppliedFilters.tsx`	Removable chips for active filters

ApiTablesComponent only mounts TableFilters when structureFilters.length > 0.

Application flow

Two Redux representations

State	Shape	Used for
`appliedFilters`	Object keyed by `filter_name`	API `filters` field
`renderedFilters`	Array of `{ key, value, label, operator, ... }`	Chip UI

Do not confuse them — chips read renderedFilters; the fetcher reads appliedFilters.

Filter types (structure `type`)

Implemented in ./ApiTables/core/TableFilters.tsx:

type	Control	Notes
`date`	`DatePicker`	Supports `pair_with` ranges; formatted `dd-MM-yyyy`
`text`	`Input`	Optional numeric key filtering on input
`number`	`Input`	Numeric validation
`select`	`Select`	Options from `props.select_options`
`boolean`	`Select`	Treated like select
`null`	`Select`	Placeholder-style filters
`multi_select`	`MultiSelect` or `TagsInput`	If `selectOptions` use MultiSelect; else tags with comma / `in` operator split on submit

range type exists in structure types but is filtered out of the active form UI.

Operators

When props.operators.length > 1, a secondary operator field is rendered ({filter_name}_operator in the form).

On submit, transformObject / restructureSelectedFilters merge operator into the filter entry.

Labels for operators use useUtilTranslator → getOperatorLabel (i18n keys under General: exact, like, greaterOrEqual, lessOrEqual).

Common operator symbols: =, like, >=, <=.

Submit rules

Submit enabled when any watched field has value (string non-empty, date range from, array length, etc.)
Only dirty fields (react-hook-form dirtyFields) are included in restructureSelectedFilters
Submit dispatches _setCurrentPage(1) so filters always restart at page 1

Removing a chip

AppliedFilters.handleClearRenderedFilters:

Clears matching form field via setValue / resetField
Recomputes renderedFilters and appliedFilters
Triggers refetch via Redux update

Query payload

// ./ApiTables/hooks/useTableFetcher.ts
data: {
  perPage: pageSize,
  page: currentPage,
  filters: appliedFilters,
  sorts: tableSorting,
  params: { ... },
}

Backend must accept the object shape your filters produce (including operator fields per filter key).

On this page