Overview

Component which allow to create basic data tables in simple and clear way.

New features will be implemented soon.

Inputs

Input Type Default Description
pageSize number 10 Defines number of elements per page.
lazy boolean false Determines if table should load data lazily
data array or LazyPageData N/A Defines all data displayed in table or on current page in case of lazy loading. Pass array for eager table or LazyPageData in lazy case. LazyPageData contains array of data displayed on opened page and number of total rows.
selectionMode string N/A If defined enables table row selection. Accepted values:
  • "single" allow to select single row. Fires SelectionEvent with selected and unselected row data and highlights row.
  • "multi" allow to select multiple rows. Fires SelectionEvent with selected or unselected row data and highlights rows.
  • "dblclick" allow to select single row by double click. Fires SelectionEvent with selected row data.
selection array N/A Defines initial selection. Can be used with single and multi mode
availablePageSizes array of number N/A If defined table display option to select page size. selection=[5, 10, 15]
tableClasses string .table Allow to define bootstrap table styles like .table-striped .table-bordered .table-hover .table-condensed .table-responsiv. It is possible to use multiple styles separated with spaces tableClasses="table-striped table-bordered table-hover" or use your own styles.

Outputs

Output Type Description
onLazy EventEmitter of LazyLoadEvent In case of lazy loading emits LazyLoadEvent that indicates new page data should be loaded. Event defines requested page, number of rows and additional restraints.
rowSelection EventEmitter of SelectionEvent Emits SelectionEvent event when row is selected. Look selectionMode input for more details.
rowEdit EventEmitter of EditEvent Emits EditEvent event when user edit cell. Contains edited row data, edited field name, old and new value.

Defining columns

Column definition is done by using a2-column selector.

Input Type Description
header string Defines column name
content string Defines name of field which will be displayed in column.
sortBy string If present enables sorting for given column. Defines name of field to sort by.
filterBy number If present enables filtering for given column. Defines name of field to filter by.
editable boolean If true enables value edition for given column.

Defining footer and header

Footer and header definition is done by using a2-header and a2-footer selectors.

        <a2-data-table ...>
            <a2-header>
                <div class="text-center"><b><h3><i>Oddities</i></h3></b></div>
            </a2-header>
            
            //..
            
            <a2-footer><i style="color: #00AA00">Example footer content</i></a2-footer>

        </a2-data-table>

Types

    export interface LazyPageData {
        data: Array<any>;
        totalRows: number;
    }

data - data to be displayed on current page

totalRows - number of total results for given restraints

    export interface LazyLoadEvent {
        page: number;
        rows: number;
        restraints: Restraints;
    }

page - requested page

rows - requested number of rows

restraints - data restraints (filtering and ordering)

 
    export interface Restraints {
        orderBy?: OrderMeta;
        filterBy: FilterMeta;
    }

orderBy - contains ordering information

filterBy - contains filtering information

    export interface OrderMeta {
        field?: string;
        order?: number;
    }

field - name of field to order by.

order - 1 for ASC and -1 for DESC

    export interface FilterMeta {
        [filteredField: string]: string | number;
    }

Contains filtering data. Field name indicates name of field that should be filtered. Value contains filter value.

Examples

HTML:

<div class="card">
    <div class="card-header">
        <h2>Basic Table</h2>
    </div>

    Select table styles (You can select multiple with Ctrl):<br/>
    <select multiple [(ngModel)]="tableClasses">
        <option value="table-striped">Stripped</option>
        <option value="table-bordered">Bordered</option>
        <option value="table-hover">Hover</option>
        <option value="table-condensed">Condensed</option>
    </select>

    <div class="card-body card-padding">
        <a2-data-table [data]="eagerTableData" [availablePageSizes]="[5,10,15]" [pageSize]="5" [tableClasses]="getClasses()">
            <a2-header>
                <div class="text-center"><b><h3><i>Oddities</i></h3></b></div>
            </a2-header>
            <a2-column header="Name" content="name"></a2-column>
            <a2-column header="Surname" content="surname" ></a2-column>
            <a2-column header="Age" content="age"></a2-column>
            <a2-column header="Nested" content="nested.value"></a2-column>
            <a2-footer><i style="color: #00AA00">Example footer content</i></a2-footer>

        </a2-data-table>
    </div>

    <div class="card-header">
        <h2>Filtering and sorting</h2>
    </div>

    <div class="card-body card-padding">
        <a2-data-table [data]="eagerTableData" [availablePageSizes]="[5,10,15]" [pageSize]="5">
            <a2-header>
                <div class="text-center"><b><h3><i>Oddities</i></h3></b></div>
            </a2-header>
            <a2-column header="Name" content="name" sortBy="name" filterBy="name"></a2-column>
            <a2-column header="Surname" content="surname" sortBy="surname" filterBy="surname"></a2-column>
            <a2-column header="Age" content="age" sortBy="age" filterBy="age"></a2-column>
            <a2-column header="Nested" content="nested.value" sortBy="nested.value" filterBy="nested.value"></a2-column>
            <a2-footer><i>Example footer content</i></a2-footer>
        </a2-data-table>
    </div>

    <div class="card-header">
        <h2>Lazy Table</h2>
    </div>

    <div class="card-body card-padding">
        <a2-data-table [data]="lazyTableData" [availablePageSizes]="[5,10,15]" [pageSize]="5"
                       [lazy]="true" (onLazy)="onLazy($event)">
            <a2-header>
                <div class="text-center"><b><h3><i>Oddities</i></h3></b></div>
            </a2-header>
            <a2-column header="Name" content="name" sortBy="name" filterBy="name"></a2-column>
            <a2-column header="Surname" content="surname" sortBy="surname" filterBy="surname"></a2-column>
            <a2-column header="Age" content="age" sortBy="age" filterBy="age"></a2-column>
            <a2-column header="Nested" content="nested.value" sortBy="nested.value" filterBy="nested.value"></a2-column>
            <a2-footer><i>Example footer content</i></a2-footer>
        </a2-data-table>
    </div>

    <div class="card-header">
        <h2>Editable</h2>
    </div>

    <div class="card-body card-padding">
        <a2-data-table [data]="editableTableData" [availablePageSizes]="[5,10,15]" [pageSize]="5" (rowEdit)="onRowEdit($event)">
            <a2-header>
                <div class="text-center"><b><h3><i>Oddities</i></h3></b></div>
            </a2-header>
            <a2-column header="Name" content="name" sortBy="name" filterBy="name" [editable]="true"></a2-column>
            <a2-column header="Surname" content="surname" sortBy="surname" filterBy="surname"></a2-column>
            <a2-column header="Age" content="age" sortBy="age" filterBy="age"></a2-column>
            <a2-column header="Nested" content="nested.value" sortBy="nested.value" filterBy="nested.value"></a2-column>
            <a2-footer><i>Example footer content</i></a2-footer>
        </a2-data-table>
    </div>
    <b>Edit event:</b> <br/><br/>
    <b>Input data:</b> <br/> <br/>

    <div class="card-header">
        <h2>Selection</h2>
    </div>

    <div class="card-body card-padding">

        Selection type:
        <select [(ngModel)]="selectionType">
            <option value="single">Single</option>
            <option value="multi">Multi</option>
            <option value="dblclick">Double Click</option>
        </select>
        <br/>
        <br/>
        <button (click)="initTableSelections()">Init table with selections</button><br/><br/>

        <a2-data-table [data]="eagerTableData" [availablePageSizes]="[5,10,15]" [pageSize]="5"
                       [selectionMode]="selectionType"
                       [selection]="selection"
                       (rowSelection)="onRowSelect($event)">
            <a2-header>
                <div class="text-center"><b><h3><i>Oddities</i></h3></b></div>
            </a2-header>
            <a2-column header="Name" content="name" sortBy="name" filterBy="name"></a2-column>
            <a2-column header="Surname" content="surname" sortBy="surname" filterBy="surname"></a2-column>
            <a2-column header="Age" content="age" sortBy="age" filterBy="age"></a2-column>
            <a2-column header="Nested" content="nested.value" sortBy="nested.value" filterBy="nested.value"></a2-column>
            <a2-footer><i>Example footer content</i></a2-footer>
        </a2-data-table>
    </div>

    <b>Selection event:</b> <br/><br/>
    <b>Selected elements:</b> <br/><br/>
</div>

TypeScript:

@Component({
    selector: "a2uie-table",
    templateUrl: "src/examples/bootstrap/table/table.example.component.html"
})
export class TableExampleComponent {
    eagerTableData: Array<any> = [
        {name: "Harrison", surname: "Jones", age: "72", nested: {value: "Adventurer"}},
        {name: "Han", surname: "Ford", age: "83", nested: {value: "Pirate"}},
        {name: "Albert", surname: "Einstein", age: "23", nested: {value: "Adventurer"}},
        {name: "Harrison", surname: "Jones", age: "72", nested: {value: "Egghead"}},
        {name: "Han", surname: "Ford", age: "83", nested: {value: "Pirate"}},
        {name: "Albert", surname: "Zweitein", age: "23", nested: {value: "Egghead"}},
        {name: "Harrison", surname: "Jones", age: "72", nested: {value: "Adventurer"}},
        {name: "Han", surname: "Ford", age: "83", nested: {value: "Pirate"}},
        {name: "Albert", surname: "Dreitein", age: "23", nested: {value: "Egghead"}},
        {name: "Harrison", surname: "Jones", age: "72", nested: {value: "Adventurer"}},
        {name: "Han", surname: "Ford", age: "83", nested: {value: "Pirate"}},
        {name: "Albert", surname: "Viertein", age: "23", nested: {value: "Egghead"}},
        {name: "Harrison", surname: "Jones", age: "72", nested: {value: "Adventurer"}},
        {name: "Han", surname: "Ford", age: "83", nested: {value: "Pirate"}},
        {name: "Albert", surname: "Funftein", age: "23", nested: {value: "Egghead"}}
    ];

    editableTableData: Array<any> = [
        {name: "Harrison", surname: "Jones", age: "72", nested: {value: "Adventurer"}},
        {name: "Han", surname: "Ford", age: "83", nested: {value: "Pirate"}},
        {name: "Albert", surname: "Einstein", age: "23", nested: {value: "Adventurer"}},
        {name: "Harrison", surname: "Jones", age: "72", nested: {value: "Egghead"}},
        {name: "Han", surname: "Ford", age: "83", nested: {value: "Pirate"}},
        {name: "Albert", surname: "Zweitein", age: "23", nested: {value: "Egghead"}},
        {name: "Harrison", surname: "Jones", age: "72", nested: {value: "Adventurer"}},
        {name: "Han", surname: "Ford", age: "83", nested: {value: "Pirate"}},
        {name: "Albert", surname: "Dreitein", age: "23", nested: {value: "Egghead"}},
        {name: "Harrison", surname: "Jones", age: "72", nested: {value: "Adventurer"}},
        {name: "Han", surname: "Ford", age: "83", nested: {value: "Pirate"}},
        {name: "Albert", surname: "Viertein", age: "23", nested: {value: "Egghead"}},
        {name: "Harrison", surname: "Jones", age: "72", nested: {value: "Adventurer"}},
        {name: "Han", surname: "Ford", age: "83", nested: {value: "Pirate"}},
        {name: "Albert", surname: "Funftein", age: "23", nested: {value: "Egghead"}}
    ];

    lazyTableData: LazyPageData = <LazyPageData>{};
    selection: Array<any> = [];
    selectionEvent: SelectionEvent;
    editEvent: EditEvent;
    tableClasses: Array<any> = [];

    selectionType: any = "single";

    onRowSelect(event: SelectionEvent): void {
        this.selectionEvent = event;
    }

    onRowEdit(event: EditEvent): void {
        this.editEvent = event;
    }

    setSelectionMode(event: any): void {
        this.selectionType = event.value;
    }

    getClasses(): string {
        return this.tableClasses.join(" ");
    }

    initTableSelections(): void {
        this.selectionType = "multi";
        this.selection.length = 0;
        this.selection.push(this.eagerTableData[0]);
        this.selection.push(this.eagerTableData[3]);
        this.selection.push(this.eagerTableData[5]);
    }

    onLazy(event: LazyLoadEvent): void {
            this.lazyTableData = FakeDatabaseService.loadData(event.page, event.rows, event.restraints);
    }
}