prime-table v4.14.1

PrimeTable

View example

Dependencies

• PrimeNG - Contains components wrapped in this library * npm i primeng primeicons --save
• Bootstrap - Base styling * npm i bootstrap --save
• FontAwesome - Additional icons used instead of PrimeNG defaults * npm i @fortawesome/fontawesome-free --save
• All dependencies: * npm i primeng primeicons bootstrap @fortawesome/fontawesome-free --save

Installation

Install with:

npm install prime-table --save

Include styles in build;

...
	"styles": [
		"node_modules/prime-table/scss/prime-table-styles.scss",
		"src/styles.scss"
	],
...

or in own .scss-file:

@import  '~node_modules/prime-table/scss/prime-table-styles';

Import BrowserAnimationsModule and PrimeTableModule in your App.Module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PrimeTableModule } from 'prime-table';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    PrimeTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

Use the template selector <prime-table></prime-table> where you want to display your table.

Inputs:

Outputs:

PrimeTableConfig object

Constructor

The constructor takes a preset string, doing some configuration for you. Possible values are:

'none' | 'easy' | 'standard' | 'drilldown' | 'format' | 'expandable'

Configuration properties

PrimeTableConfig Methods

setDrilldownProperty(propertyName: string): void

Sets the drilldown property for the table

clear(): void

Unsets all table data

setColumns(cols: PrimeTableColumn<any>[]): void

Sets column configuration for the table. This is the preferred way to set columns, not via the "columns" property

setData(data: any[]): void

Set table data

setTreeData(data: any[]): void

Set drilldown data. Will map data based on the drilldownProperty set, so call this method only after drilldownProperty has been set

disable(properties: string[]): void

List of properties to set to false

enable(properties: string[]): void

List of properties to set to true

PrimeTableConfig Object inputs

Some input properties are objects with properties themselves

OrderBy

orderBy: {
    key: string,
    type: 'asc' | 'desc'
}

Where key is the row property to order by, and type if it should order ascending or descending.

The key can be a child property, e.g. "row.child_item.grandchild_item.property"

Expandable

expandable: {
    key: string,
    enabled: boolean
}

Where key is an unique identifier for the row. If used, the template syntax will look like this:

<b-prime-table [config]="tableConfig">
    <ng-template let-expanded="expandedRow">
        This is data from my expanded row! {{expanded.property}}
    </ng-template>
</b-prime-table>

ColumnSettings

columnSettings: {
    resizable: boolean,
    selectable: boolean
}

Customize if columns should be resizable and selectable (no functionality introduced for selectable rows as of yet)

Menu

menu: {
    enabled: boolean,
    node: null,
    items: []
}

Where node is the row (any | TreeNode) for which to show a list of items (MenuItem[] from primeng/api). When clicked, do an event based on node data. Examples will come

SelectableRows

selectableRows: {
    enabled: boolean,
    buttonText: string
}

Where buttonText is the text of the button in the top right corner of the table. The button will in turn emit the "selected" event, with the selected rows as event data.

PrimeTableColumn object