Selector: [tablejs-drag-and-drop-ghost]

import { DragAndDropGhostComponent } from '@transunion-ui/tablejs';

Description:

A component that follows the cursor when dragging and dropping a column to alert the user of which column is being dragged.

Properties:

Methods:

Version Available: All Versions

Selector: [tablejs-grid]

import { GridComponent } from '@transunion-ui/tablejs';

Description:

Wraps the table elements and acts as a container for all GridDirective functionality.

Properties:

Selector: [tablejs-scroll-prev-spacer]

import { ScrollPrevSpacerComponent } from '@transunion-ui/tablejs';

Description:

Alters DOM element spacing when new items are rendered when scrolling.

Properties:

Version Available: All Versions

Selector: [tablejsDataColClasses]

import { DataColClassesDirective } from '@transunion-ui/tablejs';

Description:

Groups multiple user-defined classes to a single column. This enables users to have sub columns or nested columns in the grid. Class names supplied to tablejsDataColClasses are to be separated by commas.

Properties:

Methods:

Usage:

The tablejsDataColClasses in the example below tie th tags with corresponding td div elements. This allows TableJS to reorder, resize, show, and hide column headings and body information together.

<tablejs-grid>
    <table>
        <thead>
            <tr tablejsGridRow>
                <th tablejsDataColClasses="name">
                    <div> ... </div>
                </th>
                <th tablejsDataColClasses="price">
                    <div> ... </div>
                </th>
                <th tablejsDataColClasses="id">
                    <div> ... </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr tablejsGridRow>
                <td>
                    <div tablejsDataColClass="name" initialWidth="150px"> 
                        {{ wishList.itemName }} 
                    </div>
                </td>
                <td>
                    <div tablejsDataColClass="price" initialWidth="150px"> 
                        {{ wishList.itemPrice }}
                    </div>
                </td>
                <td>
                    <div tablejsDataColClass="id" initialWidth="150px"> 
                        {{ wishList.itemID }} 
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</tablejs-grid>

Version Available: All Versions

Selector: [tablejsDataColClass]

import { DataColClassDirective } from '@transunion-ui/tablejs';

Description:

Ties a user-defined class to a tablejs-grid column. The class can be used to set initial CSS properties to a column. This directive should be placed on a div within a td or th element.

Properties:

Methods:

Usage:

Below is an HTML implementation where an item is added to the wish list column, and the class “item-name” will be added to the td element’s div to provide a mechanism for styling this column.

<tablejs-grid>
    <table>
        <tbody>
            <tr tablejsGridRow>
                <td>
                    <div tablejsDataColClass="item-name"> 
                        {{ wishList.itemName }}
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</tablejs-grid>

When adding the property initialWidth to a tag with a speciying value, the initial column width is set. Which greatly improves grid initialization performance. Below is an HTML implementation for adding the property to a tag.

<td>
    <div tablejsDataColClass="item-name" initialWidth="50px"> 
        {{ wishList.itemName }}
    </div>
</td>

Version Available: All Versions

Selector: [tablejsEditableCell]

import { EditableCellDirective } from '@transunion-ui/tablejs';

Description:

Makes a cell editable in the grid. A custom validator function can be supplied for validating the value within the cell. The validator function is triggered on the input event of the input element. Regular expressions can also be added as part of the validation.

Properties:

Methods:

Usage:

Below is an HTML implementation of turning a cell into an editable cell by using the tablejsEditableCell directive. A custom validator function is supplied to validate the cell’s contents.

Regular Expressions:

A regular expression can also be added as part of the validation. In the example below, we are adding a regular expression of ^[A-Za-z ]*$, which restricts the editable cell to only allow inputs of letters and spaces. Regular expression flags can also be added for more customizability. In this case, the g flag matches the regExp pattern multiple times, while the i flag makes the regExp case insensitive.

Event Emitters:

The (cellInput) event emitter calls a user-defined function when the user changes the cell’s value.

The (cellValidation) event emitter triggers a user-defined function when the cell validates.

The (cellFocusOut) event emitter is triggered when the focus of a cell has exited.

<td>
    <div tablejsDataColClass="name" initialWidth="22%">
        <span
            #nameSpanRef
            tablejsEditableCell
            [validator]="isNotEmpty"
            regExp="^[A-Za-z ]*$"
            regExpFlags="gi"
            (cellInput)="updateCellValue(purchase, 'name', $event)"
            (cellValidation)="onEditableCellValidated($event)"
            (cellFocusOut)="onEditableCellFocusOut($event)"
            >
            
        </span>
    </div>
</td>

Below is a Typescript implementation of the user-defined functions that the tablejsEditableCell event emitters call in the HTML example above. The updateCellValue function is called when the cellInput event emitter emits, and updates an item’s value with the new content provided. The onEditableCellValidated takes a boolean value which represents whether the cell input is valid. The onEditableCellFocusOut event emitter is setting the current span that most recently lost focus.

export class EditableCellsComponent {
    currentSpan: HTMLElement | null;
    currentCellIsValid: boolean = true;

    updateCellValue(item: any, varName: string, content: any) {
        if (content.currentValue !== content.lastValidInput) {
            item[varName] = content.originalValue;
        } else {
            item[varName] = content.currentValue;
        }
    }

    onEditableCellValidated(isValid: boolean) {
        this.currentCellIsValid = isValid;
    }

    onEditableCellFocusOut(e: Event) {
        this.currentSpan = e.target;
    }
}

Version Available: All Versions

Selector: [tablejsGrid]

import { GridDirective } from '@transunion-ui/tablejs';

Description:

Wraps the table elements and is responsible for registering all the other grid-related directives and implementing their functionalities. The GridDirective acts as the control center for the TablejsGrid.

Properties:

Methods:

Version Available: All Versions

Selector: [tablejsGridRow]

import { GridRowDirective } from '@transunion-ui/tablejs';

Description:

Attaches a row element (tr) for use within the tablejs-grid.

Methods:

Usage:

By attaching a table row element (tr), TableJS is able to track row information. Below is an HTML implementation for registering the Wish List Items row with TableJS.

<tablejs-grid>
    <table>
        <thead>
            <tr tablejsGridRow>
                <th>
                    <div>Wish List Items</div>
                <th>
            </tr>
        </thead>
    </table>
</tablejs-grid>

Version Available: 1.4.0 or higher, 2.1.0 or higher

Selector: [tablejsHideColumnIf], [tablejshidecolumnif], [tablejs-hide-column-if]

import { HideColumnIfDirective } from '@transunion-ui/tablejs';

Description:

Provides a mechanism for hiding or showing columns.

Properties:

Methods:

Usage:

The HTML implementation below hides the column by setting the value of the tablejsHideColumnIf directive to true. Setting the directive to false would show the column.

<th
    tablejsDataColClasses="name"
    reorderCol
    [tablejsHideColumnIf]="true"
> </th>

Version Available: All Versions

Selector: [tablejsInfiniteScroll]

import { InfiniteScrollDirective } from '@transunion-ui/tablejs'

Description:

[Deprecated] Used for proper resizing of the infinite scrolling component. Include this directive on your cdk-virtual-scroll-viewport component. It is recommended you use tablejsVirtualFor directive instead of cdkVirtualFor.

Methods:

Version Available: All Versions

Selector: [reorderCol]

import { ReorderColDirective } from '@transunion-ui/tablejs';

Description:

Adding the reorderCol directive to a th or td element will enable drag and drop functionality on a specific column

Properties:

Methods:

Usage:

Shown in the HTML below is an implementation of adding reorder drag and drop functionality by adding the reorderCol directive.

<tablejs-grid>
    <table>
        <thead>
            <tr tablejsGridRow>
                <th reorderCol>
                    <div> ... </div>
                </th>
                <th reorderCol>
                    <div> ... </div>
                </th>
                <th reorderCol>
                    <div> ... </div>
                </th>
            </tr>
        </thead>
    </table>
</tablejs-grid>

Version Available: All Versions

Selector: [reorderGrip]

import { ReorderGripDirective } from '@transunion-ui/tablejs';

Description:

The reorderGrip directive is applied to an element which will be used as a handle for starting drag and drop functionality on a column.

Methods:

Usage:

Adding reorderGrip to an element as shown in the HTML example below will designate that element as a handle for reordering a column.

<tablejs-grid>
    <table>
        <thead>
            <tr tablejsGridRow>
                <th tablejsDataColClasses="name" reorderCol>
                    <div>
                        <i class="fas fa-bars" reorderGrip> Name </i> 
                    </div>
                </th>
            </tr>
        </thead>
    </table>
</tablejs-grid>

Version Available: All Versions

Selector: [resizableGrip]

import { ResizableGripDirective } from '@transunion-ui/tablejs';

Description:

The resizableGrip directive is added to an element to enable user-driven resize functionality on a column.

Methods:

Usage:

In the HTML implementation below, a resizableGrip directive is added to the div element to provide a handle for resize functionality

<tablejs-grid>
    <table>
        <thead>
            <tr tablejsGridRow>
                <th tablejsDataColClasses="name">
                    <div class="vertical-resize-grip-line" resizableGrip> ... </div> 
                </th>
            </tr>
        </thead>
    </table>
</tablejs-grid>

Version Available: 1.2.0 or higher, 2.0.0 or higher

Selector: [tablejsScrollViewport]

import { ScrollViewportDirective } from '@transunion-ui/tablejs';

Description:

Attaches a viewport to the table to render virtual scrolling content.

Properties:

Methods:

Usage:

Below is an HTML implementation of attaching a viewport to the table to render virtual scrolling content.

Property Binding:

Both arrowDownSpeed and arrowUpSpeed are defined to dictate how many rows are scrolled when each corresponding buttons are pressed, in this case it is 1 row. preItemOverflow and postItemOverflow defines how many rows are rendered before the first visible item in the viewport, in this case it is 2 rows.

Event Emitters:

(itemAdded) emits an event when a new row is added.

(itemRemoved) emits an event when a row is deleted.

(itemUpdated) emits an event when an existing row is rerendered.

(rangeUpdated) emits an event when the viewport range changes.

(viewportScrolled) emits an event when viewport is scrolled.

(viewportReady) emits an event when viewport is ready to be initialized.

(viewportInitialized) emits an event when the viewport has intialized and is ready to scroll.

<tablejs-grid>
    <table 
        tablejsScrollViewport
        arrowDownSpeed="1"
        arrowUpSpeed="1"
        preItemOverflow="2"
        postItemOverflow="2"
        (itemAdded)="itemAdded($event)"
        (itemRemoved)="itemRemoved($event)"
        (itemUpdated)="itemUpdated($event)"
        (rangeUpdated)="rangeUpdated($event)"
        (viewportScrolled)="viewportScrolled($event)"
        (viewportReady)="viewportReady($event)"
        (viewportInitialized)="viewportInitialized($event)"
    > </table>
</tablejs-grid>

Below is a Typescript example implementation for all event emitter functions specified above.

itemAdded(e: ScrollViewportEvent): void {}
itemRemoved(e: ScrollViewportEvent): void {}
itemUpdated(e: ScrollViewportEvent): void {}
rangeUpdated(e: ScrollViewportEvent): void {}
viewportScrolled(e: ScrollViewportEvent): void {}
viewportReady(e: any): void {}
viewportInitialized(e: any): void {}

Keyboard Shortcuts for Windows:

Keyboard Shortcuts for Mac:

Version Available: 1.2.0 or higher, 2.0.0 or higher

Selector: [tablejsViewport]

Description:

Designates which tbody tag to display viewport items. (e.g.: <tbody tablejsViewport>...</tbody>)

Usage:

Below is an HTML implementation of designating a tbody tag as the viewport for displaying table row items.

<tablejs-grid>
    <table>
        <thead>
            <tr>
                <th>
                    <div> ... </div>
                </th>
            <tr>
        </thead>
        <tbody tablejsViewport>
            <tr>
                <td>
                    <div> ... </div>
                </td>
            </tr>
        </tbody>
    </table>
</tablejs-grid>    

Version Available: 1.2.0 or higher, 2.0.0 or higher

Selector: [tablejsVirtualFor]

import { VirtualForDirective } from '@transunion-ui/tablejs';

Description:

*tablejsVirtualFor replaces *ngFor inside of a <table tablejsScrollViewport>, supporting the exact same API as *ngFor. The VirtualForDirective renders only tr items that are visible within the range of the tablejsScrollViewport. (Eg: <tr *tablejsVirtualFor="let item of items; let i = index; trackBy: trackItem">...</tr>)

Properties:

Methods:

Usage:

Below is an HTML use case for applying the *tablejsVirtualFor directive. The filteredItems variable on the template is an array of items that we wish to display during scrolling. These items are dynamically added to and removed from the viewport as needed based on the scroll position.

<tablejs-grid>
    <table tablejsScrollViewport>
        <thead>
            <tr tablejsGridRow>
                <th tablejsDataColClasses="name">
                    <div> Name </div>
                </th>
                <th tablejsDataColClasses="id">
                    <div> ID </div>
                </th>
            <tr>
        </thead>
        <tbody tablejsViewport>
            <tr *tablejsVirtualFor="let item of filteredItems">
                <td>
                    <div tablejsDataColClass="name"> 
                        {{ item.name }}    
                    </div>
                </td>
                <td>
                    <div tablejsDataColClass="id"> 
                        {{ item.id }}
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</tablejs-grid>    

Version Available: 1.3.0 or higher, 2.0.0 or higher

import { FilterSortService } from '@transunion-ui/tablejs';

Description:

FilterSortService provides several methods for filtering and sorting table data using SortOptions and FilterOptions objects.

Properties:

Methods:

Usage:

Below is a Typescript example that utilizes the FilterSortService.filterAndSortItems method to sort an array of objects that contain ID and name properties. The items are filtered and sorted based on a set of user-defined filter and sort options.

import {SortComparator, FilterComparator} from '@transunion-ui/tablejs';

export class FilterSortServiceExample {
    
    employees: any[] = [
        {id: 2, name: 'jill'}, 
        {id: 4, name: 'bill'}, 
        {id: 8, name: 'mike'}, 
        {id: 1, name: 'bob'}, 
        {id: 21, name: 'kyle'}
    ];
    mySortOptions: SortOptions;
    myFilterOptions: FilterOptions;

    constructor(private filterSortService: FilterSortService){
        this.setSortOptions();
        this.setFilterOptions();
        this.filterEmployees();
    }

    setSortOptions(): void {
        this.mySortOptions = new SortOptions(
            'id',
            SortComparator.NUMERIC
            SortDirection.NONE
        );
    }

    setFilterOptions(): void {
        this.myFilterOptions = new FilterOptions(
            'name',
            FilterComparator.STARTS_WITH, 
            'b'
        );
    }

    filterEmployees(): void {
        sortOptions.nextSortDirection(); // Changes sortOptions's sort direction to SortDirection.ASCENDING

        let filteredEmployees: any[] = this.filterSortService.filterAndSortItems(
            this.employees,
            this.myFilterOptions,
            this.mySortOptions
        );
        console.log(filteredEmployees); // filteredEmployees = [{id: 1, name: 'bob'}, {id: 4, name: 'bill'}]
    }
}

Versions Available: All Versions

import { ColumnReorderEvent } from '@transunion-ui/tablejs';

Description:

Emits a ColumnReorderEvent every time the mouse moves during column reorder. The ColumnReorderEvent contains the following data:

Types:

Usage:

The HTML example below is assigning each of the three event emitters below and declaring the functions that will be called when each of these events is triggered. An event object is being passed to each of these functions.

Event Emitters:

(columnReorderStart) emits an event when a column is starting to be reordered.

(columnReorder) emits an event when a column is being reordered.

(columnReorderEnd) emits an event when a column is finished being reordered.

<tablejs-grid
    (columnReorderStart)="columnReorderStart($event)"
    (columnReorder)="columnReorder($event)"
    (columnReorderEnd)="columnReorderEnd($event)"
  > </tablejs-grid>

The Typescript below declares the functions that will catch each of the reorder events.

columnReorderStart(e: ColumnReorderEvent) {
    console.log('column reorder started: \n', e);
}
columnReorder(e: ColumnReorderEvent) {
    console.log('column reordering: \n', e);
}
columnReorderEnd(e: ColumnReorderEvent) {
    console.log('column reorder ended: \n', e);
}

Version Available: All Versions

import { ColumnResizeEvent } from '@transunion-ui/tablejs';

Description:

Emits a ColumnResizeEvent every time the mouse moves during column resize. The ColumnResizeEvent contains the following data:

Types:

Usage:

The HTML example below is assigning each of the three event emitters below and declaring the functions that will be called when each of these events is triggered. An event object is being passed to each of these functions.

Event Emitters:

(columnResizeStart) emits an event at the start of the column resize.

(columnResize) emits an event when a column is being resized.

(columnResizeEnd) emits an event when a column is finished resizing.

<tablejs-grid 
    (columnResizeStart)="columnResizeStart($event)"
    (columnResize)="columnResize($event)"
    (columnResizeEnd)="columnResizeEnd($event)"
  > </tablejs-grid>

The Typescript below declares the functions that will catch each of the resize events.

columnResizeStart(e: ColumnResizeEvent) {
    console.log('column resize started: \n', e);
}
columnResize(e: ColumnResizeEvent) {
    console.log('column resizing: \n', e);
}
columnResizeEnd(e: ColumnResizeEvent) {
    console.log('column resize ended: \n', e);
}

Version Available: All Versions

import { GridEvent } from '@transunion-ui/tablejs';

Description:

Emits a GridEvent when the table has been initialized. The GridEvent contains the following data:

Version Available: 1.2.0 or higher, 2.0.0 or higher

import { ScrollViewportEvent } from '@transunion-ui/tablejs';

Description:

Event type for when the ScrollViewportDirective triggers an event. The ScrollViewportEvent contains the following data:

Types:

Usage:

The example below demonstrates how one would designate functions to catch different kinds of ScrollViewportEvent objects.

Event Emitters:

(itemAdded) emits an event when a new item is added to the viewport (tbody) and calls the itemAdded function with the event ($event) emitted as a parameter.

(itemRemoved) emits an event when an existing element is removed from the viewport (tbody) and calls the itemRemoved function with the event ($event) emitted as a parameter.

(itemUpdated) emits an event when an existing element is updated within the viewport (tbody) and calls the itemUpdated function with the event ($event) emitted as a parameter.

(rangeUpdated) emits an event when the current range of rendered elements within the viewport (tbody) is altered. The rangeUpdated function is called with the event ($event) emitted as a parameter.

(viewportScrolled) emits an event when the viewport (tbody) is scrolled. The viewportScrolled function is called using the event ($event) emitted as a parameter.

(viewportReady) emits an event when the viewport (tbody) has completed its first render. The viewportReady function is called with the event ($event) emitted as a parameter.

(viewportInitialized) emits an event when the viewport (tbody) is initialized. The viewportInitialized function is called with the event ($event) emitted as a parameter.

<tablejs-grid>
    <table
        tablejsScrollViewport
        (itemAdded)="itemAdded($event)"
        (itemRemoved)="itemRemoved($event)"
        (itemUpdated)="itemUpdated($event)"
        (rangeUpdated)="rangeUpdated($event)"
        (viewportScrolled)="viewportScrolled($event)"
        (viewportReady)="viewportReady($event)"
        (viewportInitialized)="viewportInitialized($event)"
    > </table>
</tablejs-grid>

Below is a typescript implementation for the ScrollViewportEvents shown above.

itemAdded(e: ScrollViewportEvent): void {/*Run desired code when an item is added to the viewport*/}
itemRemoved(e: ScrollViewportEvent): void {/*Run desired code when an item is removed from the viewport*/}
itemUpdated(e: ScrollViewportEvent): void {/*Run desired code when an item is updated in the viewport*/}
rangeUpdated(e: ScrollViewportEvent): void {/*Run desired code when the range is updated in the viewport*/}
viewportScrolled(e: ScrollViewportEvent): void {/*Run desired code when the viewport is scrolled*/}
viewportReady(e: any): void {/*Run desired code when the viewport is ready*/}
viewportInitialized(e: any): void {/*Run desired code when the viewport is initialized*/}

Version Available: 1.3.0 or higher, 2.0.0 or higher

import { Comparator } from '@transunion-ui/tablejs';

Description:

Base class for setting static comparator functions. See also the FilterComparator and SortComparator classes

Properties:

Methods:

Usage:

See FilterComparator and SortComparator

Version Available: 1.3.0 or higher, 2.0.0 or higher

import { FilterComparator } from '@transunion-ui/tablejs';

Description:

Extends the Comparator class. Contains static comparator functions for use in filtering arrays.

Methods:

Usage:

See FilterOptions

Version Available: 1.3.0 or higher, 2.0.0 or higher

import { FilterOptions } from '@transunion-ui/tablejs';

Description:

A set of filter options for filtering an array of items. Implements IFilterOptions.

Properties:

Usage:

Below is an Typescript implementation where an array of objects holding IDs are all filtered by their ID value. In this case, IDs that are greater than or equal to 2 will be returned.

import {FilterOptions, FilterComparator, FilterSortService, MatchType} from '@transunion-ui/tablejs';

export class VariableIdentifier implements OnInit {
    items: any[] = [{id: 1}, {id: 4}, {id: 2}, {id: 8}, {id: 21}];
    myFilterOptions: FilterOptions;

    constructor(private filterSortService: FilterSortService){
        this.getIDsGreaterThanOrEqualToTwo();
    }

    getIDsGreaterThanOrEqualToTwo(): void {
        this.myFilterOptions = new FilterOptions(
            'id',
            FilterComparator.GREATER_THAN_OR_EQUAL,
            2,
            MatchType.ALL,
            true
        );

        let filteredValues: any[] = this.filterSortService.filterAndSortItems(
            this.items,
            this.myFilterOptions,
            null
        );
        console.log(filteredValues); // filteredValues = [{id: 4}, {id: 2}, {id: 8}, {id: 21}]
    }
}

Using MatchType.ALL:

Below is a Typescript implementation where an array of objects holding a person’s favorite food are all filtered by a common string they each contain. In this case, the objects containing a given person’s name and their favorite food will both be filtered if both properties’ values contain the string ‘Che’.

import {FilterOptions, FilterComparator, FilterSortService, MatchType} from '@transunion-ui/tablejs';

export class MultipleVariableIdentifier implements OnInit {
    characterDetails: any[] = [{name: 'Chester Cheetah', food: 'Cheetos'}, {name: 'Mickey Mouse', food: 'Cheese'}];
    myFilterOptions: FilterOptions;

    constructor(private filterSortService: FilterSortService){
        this.getFavoriteFood();
    }

    getFavoriteFood(): void {
        this.myFilterOptions = new FilterOptions(
            ['name', 'food'],
            FilterComparator.CONTAINS_STRING,
            'Che',
            MatchType.ALL,  // By using MatchType.ALL, each of the variable identifiers' values must match in order for 
                           // the item to be filtered.
            true
        );

        let filteredValues: any[] = this.filterSortService.filterAndSortItems(
            this.characterDetails,
            this.myFilterOptions,
            null
        );
        console.log(filteredValues); // filteredValues = [{name: 'Chester Cheetah', food: 'Cheetos'}]
    }
}

Using MatchType.ANY:

Below is a Typescript implementation where using MatchType.ANY will return an item if either its price or its tax rate are greater than 0.099.

import {FilterOptions, FilterComparator, FilterSortService, MatchType} from '@transunion-ui/tablejs';

export class MatchTypeAny implements OnInit {
    items: any[] = [{price: 342.07, taxRate: 0.095}, {price: 12.19, taxRate: 0.1}, {price: 0.099, taxRate: 0.05}];
    myFilterOptions: FilterOptions;

    constructor(private filterSortService: FilterSortService){
        this.filterPriceAndTaxRates();
    }

    filterPriceAndTaxRates(): void {
        this.myFilterOptions = new FilterOptions(
            ['price', 'tax'],
            FilterComparator.GREATER_THAN,
            0.099,
            MatchType.ANY, 
            true
        );

        let filteredValues: any[] = this.filterSortService.filterAndSortItems(
            this.items,
            this.myFilterOptions,
            null
        );
        console.log(filteredValues); // filteredValues = [{price: 342.07, taxRate: 0.095}, {price: 12.19, taxRate: 0.1}]
    }
}

Filtering Using Mapped Variables:

Below is a Typescript implementation that uses a mapper function to convert the numeric price value into a string value. Filtering is then done on the string value returned from the mapper function.

import {FilterOptions, FilterComparator, FilterSortService, MatchType} from '@transunion-ui/tablejs';

export class VariableMapperExample implements OnInit {
    items: any[] = [{price: 342.07}, {price: 12.19}, {price: 45.59}, {price: 21.00}];
    containsStringFilterOptions: FilterOptions;

    constructor(private filterSortService: FilterSortService){
        this.filterOnPriceAsString();
    }

    filterOnPriceAsString(): void {
        this.containsStringFilterOptions = new FilterOptions(
            ['price'],
            FilterComparator.CONTAINS_STRING,
            '3',
            MatchType.ANY,
            true
        );

        this.containsStringFilterOptions.variableMappers = [ 
            (item: any) => {
                return this.convertItemPriceToCurrencyString(item);
            }
        ];

        let filteredValues: any[] = this.filterSortService.filterAndSortItems(
            this.items,
            this.containsStringFilterOptions,
            null
        );
        console.log(filteredValues); // filteredValues = [{price: 342.07}];
    }

    convertItemPriceToCurrencyString(item: any): string {
        return '$' + (item.price).toString();
    }
}

Filtering with Multiple FilterOptions:

Below is a Typescript implementation that filters a set of objects between a range of 20 to 25.

import {FilterOptions, FilterComparator, FilterSortService} from '@transunion-ui/tablejs';

export class MultipleFilterOptions implements OnInit {
    prices: any[] = [{price: 342.07}, {price: 12.19}, {price: 45.59}, {price: 21.00}];
    lessThanOrEqualFilterOptions: FilterOptions;
    greaterThanOrEqualFilterOptions: FilterOptions;
    
    constructor(private filterSortService: FilterSortService) {
        this.filterBetween20and25();
    }

    filterBetween20and25(): void {
        this.lessThanOrEqualFilterOptions = new FilterOptions(
            ['price'],
            FilterComparator.LESS_THAN_OR_EQUAL,
            25,
            MatchType.ANY,
            true
        );

        this.greaterThanOrEqualFilterOptions = new FilterOptions(
            ['price'],
            FilterComparator.GREATER_THAN_OR_EQUAL,
            20,
            MatchType.ANY,
            true
        );

        let filteredPurchases: any[] = this.filterSortService.filterAndSortItems(
            this.prices,
            [this.lessThanOrEqualFilterOptions, this.greaterThanOrEqualFilterOptions],
            null
        );
        console.log(filteredPurchases); // filteredPurchases = [{price: 21.00}]
    }
}

Version Available: 1.2.0 or higher, 2.0.0 or higher

import { Range } from '@transunion-ui/tablejs';

Description:

The item index range the ScrollViewportDirective is rendering in the viewport

Properties:

Usage:

See ScrollViewportEvent

Version Available: 1.3.0 or higher, 2.0.0 or higher

import { SortComparator } from '@transunion-ui/tablejs';

Description:

Extends the Comparator class. Contains static comparator functions for use in sorting arrays.

Methods:

Usage:

See SortOptions

Version Available: 1.3.0 or higher, 2.0.0 or higher

import { SortOptions } from '@transunion-ui/tablejs';

Description:

A set of sorting options used for sorting an array of items. Implements ISortOptions.

Properties:

Methods:

Usage:

Sorting with a Single SortOptions

In the Typescript example below, we are sorting the purchases array numerically and in ascending order.

import {SortOptions, SortComparator, FilterSortService} from '@transunion-ui/tablejs';

export class NextSortingDirection implements OnInit {
    priceSortOptions: SortOptions;
    purchases: any[] = [{price: 342.07}, {price: 12.19}, {price: 45.77}, {price: 12.06}];

    constructor(public filterSortService: FilterSortService) {
        this.setSortOptions();
        this.sortPurchasesByPrice();
    }

    setSortOptions(): void {
        this.priceSortOptions = new SortOptions(
            'price',
            SortComparator.NUMERIC,
            SortDirection.NONE
        );
    }

    sortPurchasesByPrice(): void {
        this.priceSortOptions.nextSortDirection();

        let sortedPurchases: any[] = this.filterSortService.filterAndSortItems(
            this.purchases,
            null,
            this.priceSortOptions
        );
        console.log(sortedPurchases); // sortedPurchases = [{price: 12.06}, {price: 12.19}, {price: 45.77}, {price: 342.07}]
    }
}

Sorting with Multiple SortOptions

In the Typescript example below, the purchases are sorted by name, item, and price.

import {SortOptions, SortComparator, FilterSortService} from '@transunion-ui/tablejs';

export class SortOrder implements OnInit {
    priceSortOptions: SortOptions;
    nameSortOptions: SortOptions;
    itemSortOptions: SortOptions;

    purchases: any[] = [
        {name: 'adam', item: 'action figure', price: 342.07}, 
        {name: 'kyle', item: 'comic book', price: 12.19}, 
        {name: 'bill', item: 'video game', price: 60}, 
        {name: 'jill', item: 'bracelet', price: 12.06}
    ];

    constructor(private filterSortService: FilterSortService) {
        this.setSortOptions();
        this.sortPurchasesByNameItemAndPrice();
    }

    setSortOptions(): void {
        this.nameSortOptions = new SortOptions(
            'name',
            SortComparator.ALPHABETICAL,
            SortDirection.NONE
        );
        this.itemSortOptions = new SortOptions(
            'item',
            SortComparator.ALPHABETICAL,
            SortDirection.DESCENDING
        );
        this.priceSortOptions = new SortOptions(
            'price',
            SortComparator.NUMERIC,
            SortDirection.NONE
        );
    }

    sortPurchasesByNameItemAndPrice(): void {
        this.nameSortOptions.nextSortDirection();
        this.itemSortOptions.nextSortDirection();
        this.priceSortOptions.nextSortDirection();

        let sortedPurchases: any[] = this.filterSortService.filterAndSortItems(
            this.purchases,
            null,
            [this.nameSortOptions, this.itemSortOptions, this.priceSortOptions]
        );
        console.log(sortedPurchases);
        // [{name: 'jill', item: 'bracelet', price: 12.06},
        // {name: 'kyle', item: 'comic book', price: 12.19},
        // {name: 'bill', item: 'video game', price: 60},
        // {name: 'adam', item: 'action figure', price: 342.07}]
                                     
    }
}

Version Available: 1.4.9 or higher, 2.1.9 or higher

import { TablejsVirtualForOf } from '@transunion-ui/tablejs';

Description:

The context object the TablejsForOf will use to render a single row.

Properties:

Version Available: 1.3.0 or higher, 2.0.0 or higher

import { MatchType } from '@transunion-ui/tablejs';

Description:

Provides an abstract class for creating sort and filter options

Properties:

Usage:

See ISortOptions and IFilterOptions

import { IColumnHideChange } from '@transunion-ui/tablejs';

Description:

Provides a structure for column hide state changes. See GridDirective.hiddenColumnChanges()

Properties:

import { IColumnHierarchy } from '@transunion-ui/tablejs';

Description:

Provides a structured hierarchy for nested columns. Columns are organized in a tree-like structure. Nested columns branch from columns of higher hierarchical prominence.

Properties:

import { IFilterOptions } from '@transunion-ui/tablejs';

Description:

Provides a structure for filter options. Extends IAbstractOptions.

Properties:

Usage

See FilterOptions

import { ISortOptions } from '@transunion-ui/tablejs';

Description:

Provides a structure for sort options. Extends IAbstractOptions.

Properties:

Usage:

See SortOptions

import { MatchType } from '@transunion-ui/tablejs';

Description:

Provides options for filtering items by matching single or all values.

Public Constants:

Usage:

See FilterOptions

import { SortDirection } from '@transunion-ui/tablejs';

Description:

Provides options for defining sort direction

Public Constants:

Usage:

See SortOptions