@halodigital/table v1.0.5

Table by Halo-Digital

This package contains a table with the following features:

• Sorting

• Paging (including page size control)

• Each column search

• Global search

• Horizontal and vertical scrolling

• Customized buttons

• Clickable and expandable rows

• Checkbox for each row (optional)

Enjoy!

Attributes

columns

Declare the table columns
Type: { id: string; title: string; type: 'checkbox' | 'date' | 'number' | 'select' | 'text'; options?: object[] | string[]; optionsEndpoint?: string; min?: number; max?: number; }[] Default: []

rows

Declare the table rows
Type: {columnId: string: any}[]
Default: []

totalRows

Declare the rows amount (from all pages)
Type: number
Default: 0

buttons

Declare buttons and related actions at the top of the table
Type: { id: string; caption: string | ((checkedRows: object[]) => string); disableMethod?: (checkedRows: object[]) => boolean; }[]
Default: []

rowMenuItems

Declare a menu column (by declaring the menu rows)
Type: { id: string; caption: string; }[]
Default: []

expandRowsConfig

Declare an expandable row (the 'component' param is a component that extends 'HaloTableExpandedComponent')
Type: { component: Type; fieldId: string; }
Default: null

generalFilter

Declare the general filter value
Type: string
Default: null

columnsFilters

Declare each column filter value
Type: {columnId: string: any}
Default: {}

sort

Declare the sort state
Type: { columnId: string; direction: 'asc' | 'desc'; }
Default: null

pageIndex

Declare the current page index (starting from 1)
Type: number
Default: 1

pageSize

Declare the maximum rows amount in each page
Type: number
Default: 20

currentRowIndex

Declare the current row index (starting from 0)
Type: number
Default: null

showGeneralFilter

Show / hide the general filter
Type: boolean
Default: true

showColumnsFilters

Show / hide the columns filters
Type: boolean
Default: true

showPaginator

Show / hide the paginator
Type: boolean
Default: true

showCheckboxes

Show / hide the checkboxes at the beginning of each row
Type: boolean
Default: false

showParamsInURL

Declare if the params state will appear in URL (page size will not appear in URL. param that equals to his default value will not apear in URL also)
Type: boolean
Default: true

isClickableRows

Declare if the rows are clickable
Type: boolean
Default: true

isSortableColumns

Declare if the rows are sortable
Type: boolean
Default: true

isLoadingRows

Declare the rows loading state
Type: boolean
Default: false

Events

tableParamsChange

Triggers on params change (i.e: pageIndex, pageSize, generalFilter etc.)
Event Parameter Type: HaloTableChangeEvent (Declared below)

generalFilterChange

Triggers on general filter change
Event Parameter Type: string

columnsFiltersChange

Triggers on each column filter change
Event Parameter Type: {columnId: string: any}

sortChange

Triggers on each column sort change
Event Parameter Type: { columnId: string; direction: 'asc' | 'desc'; }

pageIndexChange

Triggers on page index change (the user performed a paging)
Event Parameter Type: number

pageSizeChange

Triggers on page size change
Event Parameter Type: number

currentRowIndexChange

Triggers on current row index change (the user clicked on a row)
Event Parameter Type: number

buttonClick

Triggers on each button click
Event Parameter Type: HaloTableButtonEvent (Declared below)

rowClick

Triggers on current row index change (the user clicked on a row)
Event Parameter Type: {columnId: string: any}

rowMenuItemClick

Triggers on each row inside a menu click
Event Parameter Type: { menuItemId: string; row: object; rowIndex: number; }

Few More Things

HaloTableChangeEvent Declaration

{
    value: any;
    type: 'init' | 'generalFilter' | 'columnsFilters' | 'sort' | 'pageIndex' | 'pageSize';
    allParams: {
        generalFilter: string;
        columnsFilters: {[columnId: string]: any};
        sort: {columnId: string; direction: 'asc' | 'desc'};
        pageIndex: number;
        pageSize: number;
    };
    allParamsAsString: {
        freetext?: string;
        search?: string;
        ordering?: string;
        page?: string;
        size?: string;
    };
}

HaloTableButtonEvent Declaration

{
    id: string;
    checkedRows: {[columnId: string]: any}[];
    allParams: {
        generalFilter: string;
        columnsFilters: {[columnId: string]: any};
        sort: {columnId: string; direction: 'asc' | 'desc'};
        pageIndex: number;
        pageSize: number;
    };
    allParamsAsString: {
        freetext?: string;
        search?: string;
        ordering?: string;
        page?: string;
        size?: string;
    };
}

Example

<halo-table
    [columns]="columns"
    [rows]="rows"
    [totalRows]="100"
    [currentRowIndex]="3"
    [pageSize]="15"
    [isLoadingRows]="false"
    (tableParamsChange)="tableParamsChanged($event)"
    (buttonClick)="buttonClicked($event)"
    (rowClick)="rowClicked($event)">
</halo-table>

<halo-table
    [columns]="columns"
    [rows]="rows"
    [totalRows]="200"
    [showGeneralFilter]="false"
    [showParamsInURL]="false"
    [isClickableRows]="false"
    [isLoadingRows]="true"
    (tableParamsChange)="tableParamsChanged($event)"
    (rowMenuItemClick)="rowMenuItemClicked($event)">
</halo-table>