Class UFCellFilterHelper

Helper class that adds filter support to a table.

Create an input element with the attribute data-uf-filter-table containing a selector that selects one or more table elements. If multiple tables are selected, the filter gets applied to each table.

Rows containing cells that match the filter will be shown. Rows and cells are skipped when:

  • a tr contains the attribute data-uf-header-row,
  • a cell contains the attribute data-uf-no-filter,
  • if a cell within the first row with the data-uf-header-row contains the attribute data-uf-no-filter then all cells in that column are skipped.

A row is hidden by adding the attribute data-uf-row-no-match to the row. The class will add a css style to hide all elements with that data attribute.

When the input field changes the class will dispatch an event "rowsChanged" (UFCellFilterHelper.RowsChangedEvent) on the table element.

Hierarchy (View Summary)

Constructors

constructor

Properties

RowsChangedEvent

Methods

addSourceAndTargetElements getTargetElements init scan showElement

Constructors

constructor

Properties

Static ReadonlyRowsChangedEvent

RowsChangedEvent: string = "rowsChanged"

The event that is dispatched when the rows in the table have changed.

Methods

ProtectedaddSourceAndTargetElements

  • addSourceAndTargetElements<
        TTarget extends HTMLElement,
        TSource extends HTMLElement,
    >(
        aSelectorAttribute: string,
        aTargetList: TTarget[],
        aTargetToSourceMap: UFMapOfSet<TTarget, TSource>,
        anEvent?: null | string,
        anHandler?: null | (target: TTarget) => void,
        aGroupName?: string,
    ): void

    Adds elements that have a specific attribute which value is a selector pointing to one or several elements; the target element(s). The elements are grouped per target element pointed to.

    A separate target list is used, so that multiple aTargetToSourceMap instances can be used that use the same target but point to different type of sources.

    The allows for a single event handler. The event handlers should handle all the different types of sources pointing to the same target.

    Type Parameters

    • TTarget extends HTMLElement
    • TSource extends HTMLElement

    Parameters

    • aSelectorAttribute: string

      The attribute that contains the selector. The sources are the elements containing this attribute. The targets are the elements pointed to by the selector value of the attribute.

    • aTargetList: TTarget[]

      Target elements are added to this list. If the target is already in the list, it will not be added again.

    • aTargetToSourceMap: UFMapOfSet<TTarget, TSource>

      A map that contains the source elements grouped per target element.

    • anEvent: null | string = null

      Optional event to listen for at the target element(s). It will be set only once at each target.

    • anHandler: null | (target: TTarget) => void = null

      A handler that is called with the target element that triggered the event.

    • aGroupName: string = ''

      Event group to use. If empty, the event listener just gets added to the target.

    Returns void

ProtectedgetTargetElements

  • getTargetElements(element: HTMLElement, target: string): HTMLElement[]

    Gets the target element(s).

    Parameters

    • element: HTMLElement

      Element to get the target element(s) from.

    • target: string

      Either one of the predefined values or a selector.

    Returns HTMLElement[]

    list of elements (can be empty)

init

scan

ProtectedshowElement

Settings

Member Visibility

On This Page

Constructors
Properties
Methods