Filter Components

Column Filtering in AdapTable is done via 2 main UI components:

• Filter Form - popup offering comprehensive, multi-Predicate filtering functionality (also used in ToolPanel)
• Filter Bar - bar underneath the Column Header, designed for quick filtering

Filter Form

The Adaptable Filter Form provides a way to create powerful Filters with just a few clicks.

Every column in AdapTable will display a bespoke Filter Form.

The Filter Form contains:

• list of available Predicates for the Column (based on its data type)
• list of distinct column values (when using the In Predicate)
• Add Condition button to add additional predicates to the Column Filter
• Clear Filters button
• Apply Filter button (if Manually Applying Filters is turned on)

Filter Form Locations

The AdapTable Filter Form is displayed in 2 places in the Grid:

• As a popup that opens when clicking the Filter button in the Column Menu

• In the Filters Tool Panel in the AG Grid sidebar (generally displayed to the right of the grid)

Filter Bar

The Filter Bar is a custom AdapTable UI Component that replaces AG Grid's Floating Filter.

It is displayed between the Column Header and the first data row in AG Grid.

export const columnSchema: ColDef[] = [
  {
    field: 'make',
    headerName: 'Make',
    cellDataType: 'text',
    floatingFilter: true,
  }
];

const gridOptions: GridOptions = {
   defaultColDef: {
    filter: true,
    floatingFilter: true,
  },
}

The Filter Bar comprises 2 elements:

• Predicate Dropdown - sits on the left hand side of the Filter Bar and contains all the System and Custom Filters which have Scope for that column

• Input Control - if the selected Predicate requires inputs, a control appears enabling these to be entered

  Note

  • The type of the input control varies depending on the Data Type of the Column
  • A TextBox is used for strings, a Date Picker for dates, and a Numeric Editor for numbers

IN Predicate

The IN predicate differs to other predicates as it can receive multiple column values.

When this predicate is selected, AdapTable changes the input box to 'Select Values', and AdapTable lists the distinct values for the column with a checkbox by each.

Users are then able to provide the inputs to the IN Predicate by selecting the checkboxes they require.

Wildcards

Wildcards are available in the Filter Bar to speed up filtering, and reduce mouse usage.

For example, you can type '>' in a numeric input to jump to the GreaterThan Predicate.

The 6 wildcards provided by AdapTable are:

// Set a new wildcard of exclamation for the NotBetween Predicate
const adaptableOptions: AdaptableOptions = {
  filterOptions: {
    columnFilterOptions: {
      quickFilterWildcards:{
        NotBetween: ['!'],
      } 
    }
  }
};

// Keep the '#' wildcard for In Predicate (but remove '[' so we can use in RegEx)
const adaptableOptions: AdaptableOptions = {
  filterOptions: {
    columnFilterOptions: {
      quickFilterWildcards:{
        In: ['#'],
      } 
    }
  }
};

// Clear the Wildcards for the In Predicate
const adaptableOptions: AdaptableOptions = {
  filterOptions: {
    columnFilterOptions: {
      quickFilterWildcards:{
        In: [],
      } 
    }
  }
};

Hiding the Filter Bar

The Filter Bar can be hidden or made visible, both at design time and run time.

• Design-time visibility is provided via the showQuickFilter property in Column Filter Options

// Hide the Filter Bar (but allow it to be made visible by users)
const adaptableOptions: AdaptableOptions = {
    columnFilterOptions: {
        showQuickFilter: false
    }
};

• Run-time Filter Bar visbility can be handled in various ways including:
  • Checking / unchecking the Quick Filter Checkbox in the Filter Toolbar
  • Checking / unchecking the Quick Filter Checkbox in the Filter Tool Panel
  • Accessing the Show / Hide Quick Filter Bar Column Menu Item

Hiding Filter Bar Elements

As well as hiding the Filter Bar entirely, the constituent elements can also be hidden.

This is achieved using 2 functions in Filter Options:

• hideQuickFilterDropdown - which hides the dropdown on the left of each Column's Floating Bar
• hideQuickFilterInput - which is the main input where text is entered

// Don't show the Input for all Date columns or the CustomerId column
const adaptableOptions: AdaptableOptions = {
   columnFilterOptions: {
     hideQuickFilterInput: (filterContext: ColumnFilterContext) => {
        return filterContext.column.dataType === 'date' 
            || filterContext.column.columnId === 'customerId';
      }  
    }
};

// Dont show the Dropdown in Filter Bar for Boolean columns
const adaptableOptions: AdaptableOptions = {
   columnFilterOptions: {
      hideQuickFilterDropdown: (filterContext: ColumnFilterContext) => {
          return filterContext.column.dataType == 'boolean';
      }
    }
};

Filter Bar Debounce

By default AdapTable will apply Filters every 250ms in response to user entry in the Filter Bar.

Where this is too quick, e.g. if running Filters on the Server and less frequent Filtering is required, the quickFilterDebounce property in Filter Options can be used.

// Wait a second before Filtering the grid after the user updates the Filter Bar
const adaptableOptions: AdaptableOptions = {
   columnFilterOptions: {
      quickFilterDebounce: 1000,
    }
};

Filter Bar Height

AdapTable will set the height of the Filter Bar to the AG Grid default.

If that is not required, the height can be set using the quickFilterHeight property in Filter Options:

// Explicitly set the height of the Filter Bar
const adaptableOptions: AdaptableOptions = {
   columnFilterOptions: {
      quickFilterHeight: 80,
    }
};

Other Filter Components

In addition to the 2 main Filter Components, AdapTable provides 4 additional filter-related components:

• Dashboard Toolbar
• Tool Panel
• Status Bar Panel
• Settings Panel

Each of these components allow run-time Users to:

• see which Column Filters are active
• clear Column Filters
• Suspend / Reactivate Columns
• Open the Filter Form (to edit Column Filters)