Skip to main content

Filter

Filter data inside the table.

filter​

Generates an input component that can filter rows for a target column based on its value. This property can be set using a boolean, a Filter object or an array of Filter objects to generate multiple filter components.

Example​

<active-table filter="true"></active-table>

Types​

Object types for filter:

Filter​

  • Type: {
        caseButton?: boolean,
        dropdown?: boolean,
        defaultColumnHeaderName?: string,
        placeholderTemplate?: string,
        styles?: FilterStyles,
        position?: OuterContentPosition,
        order?: number
    }
  • Default: {
        caseButton: true,
        dropdown: true,
        placeholderTemplate: "Filter {headerName}...",
        position: "top-right",
        order: 1
    }

Custom settings for a row filter input component.
caseButton is used to toggle the visibility of a button that controls if row filtering is case sensitive.
dropdown is used to toggle the visibility of a button that is used to display the column selection dropdown.
defaultColumnHeaderName is the header name of the column that the filter will be targeting by default. If not set, it will use the first data column on the left.
placeholderTemplate is a special template string that is used to control the input element's placeholder text. Inside the template - include the following substring to denote where the column name will be set: "{headerName}". If your template string is "Filter {headerName}" and the target column's header name is "Brand", the placeholder text will be "Filter Brand".
styles is used to style the various elements inside the filter component.
position is used to set the location of the filter component.
order is the order of the component when other ones are also placed in the same position.

Example​

<active-table
  filter='[
    {
      "caseButton": false,
      "dropdown": false,
      "defaultColumnHeaderName": "Mass",
      "placeholderTemplate": "Filter by {headerName}",
      "position": "top-left",
      "order": 1
    },
    {
      "caseButton": true,
      "dropdown": true,
      "defaultColumnHeaderName": "Planet",
      "placeholderTemplate": "{headerName}",
      "position": "top-left",
      "order": 2
    }
  ]'
></active-table>

FilterStyles​

Styling properties for a filter component.
input defines the styling for the input element.
placeholderColor is the color used for the placeholder text.
caseIcon defines the styling for the various states of the element that toggles case sensitive filtering.
dropdownIcon defines styling for the various states of the element that toggles the column selection dropdown.

Example​

<active-table
  filter='{
    "styles": {
      "input": {"height": "22px", "fontSize": "15px", "width": "150px", "borderColor": "#818181", "color": "black"},
      "placeholderColor": "grey",
      "caseIcon": {
        "default": {"color": "grey", "fontSize": "15px"},
        "hover": {"color": "black"},
        "click": {"color": "black"},
        "active": {"color": "blue"}
      },
      "dropdownIcon": {
        "default": {"color": "grey", "width": "18px", "height": "18px"},
        "hover": {"color": "black"},
        "click": {"color": "black"},
        "active": {"color": "blue"}
      }
    }
  }'
></active-table>