Options
All
  • Public
  • Public/Protected
  • All
Menu

Class TableComponent

Table component.

In order to use drag and drop, please include the following CSS file from ng2-dragula. For example: import 'dragula/dist/dragula.css';

For ngx-datatable options, see: https://swimlane.gitbooks.io/ngx-datatable/

Note: The underlying ngx-datatable uses ContentChildren to retrieve DataTableColumnDirective (ngx-datatable-column) tags. As a result of wrapping ngx-datatable, these objects are no longer direct descendents and ContentChildren cannot retrieve them. A fix to ContentChildren may be in the works...

Instead of using ngx-datatable-column, table cells may be defined using templates, provided as the columns cellTemplate property. For example:

this.columns = [{ cellTemplate: this.nameTemplate, prop: 'name', name: 'Name' }]

and

<ng-template #nameTemplate let-row="row"> <span>{{row.name}}</span> </ng-template>

Usage:

// Individual module import
import { TableModule } from 'patternfly-ng/table';
// Or
import { TableModule } from 'patternfly-ng';

// NGX Bootstrap import { BsDropdownConfig, BsDropdownModule } from 'ngx-bootstrap/dropdown'; // NGX Datatable import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@NgModule({ imports: [BsDropdownModule.forRoot(), NgxDatatableModule, TableModule,...], providers: [BsDropdownConfig] }) export class AppModule(){}

Optional:

import { NgxDataTableConfig, TableConfig, TableEvent } from 'patternfly-ng/table';

Hierarchy

Implements

  • AfterViewInit
  • DoCheck
  • OnInit

Index

Constructors

constructor

Properties

actionTemplate

actionTemplate: TemplateRef<any>

The name of the toolbar template containing actions

columns

columns: any[]

An array of items to display for table columns

config

config: TableConfig

The table config containing component properties

dataTableConfig

dataTableConfig: NgxDataTableConfig

The ngx-datatable config containing component properties

expandRowTemplate

expandRowTemplate: TemplateRef<any>

The name of the template used with expanding rows

groupHeaderTemplate

groupHeaderTemplate: TemplateRef<any>

The name of the template used with group headers

onActionSelect

onActionSelect: EventEmitter<Object> = new EventEmitter()

The event emitted when an action (e.g., button, kebab, etc.) has been selected -- requires toolbarConfig

onActivate

onActivate: EventEmitter<Object> = new EventEmitter()

The ngx-datatable event emitted when a cell or row was focused via keyboard or mouse click

onDetailToggle

onDetailToggle: EventEmitter<Object> = new EventEmitter()

The ngx-datatable event emitted when a row detail row was toggled

Not applicable with pfng-table useExpandRows

onDrop

onDrop: EventEmitter<Object> = new EventEmitter()

The event emitted when a row has been dropped

onFilterChange

onFilterChange: EventEmitter<Object> = new EventEmitter()

The event emitted when a filter has been changed -- requires toolbarConfig

onFilterFieldSelect

onFilterFieldSelect: EventEmitter<Object> = new EventEmitter()

The event emitted when a field menu option is selected -- requires toolbarConfig

onFilterSave

onFilterSave: EventEmitter<Object> = new EventEmitter()

The event emitted when a filter has been saved -- requires toolbarConfig

onFilterTypeAhead

onFilterTypeAhead: EventEmitter<Object> = new EventEmitter()

The event emitted when the user types ahead in the query input field -- requires toolbarConfig

onPage

onPage: EventEmitter<Object> = new EventEmitter()

The ngx-datatable event emitted when a row detail row was toggled

Not applicable with pfng-table paginationConfig

onPageNumberChange

onPageNumberChange: EventEmitter<Object> = new EventEmitter()

The Event is emitted when Page Number is Changed -- requires paginationConfig

Not applicable with ngx-datatable page event

onPageSizeChange

onPageSizeChange: EventEmitter<Object> = new EventEmitter()

The Event is emitted when Page Size is changed -- requires paginationConfig

Not applicable with ngx-datatable page event

onReorder

onReorder: EventEmitter<Object> = new EventEmitter()

The ngx-datatable event emitted when columns are re-ordered

onResize

onResize: EventEmitter<Object> = new EventEmitter()

The ngx-datatable event emitted when a column is resized

onScroll

onScroll: EventEmitter<Object> = new EventEmitter()

The ngx-datatable event emitted when body was scrolled (e.g., when scrollbarV is true)

onSelect

onSelect: EventEmitter<Object> = new EventEmitter()

The ngx-datatable event emitted when a cell or row was selected

Not applicable with pfng-table showCheckbox

onSelectionChange

onSelectionChange: EventEmitter<Object> = new EventEmitter()

The event emitted when an item selection has been changed -- requires showCheckbox

Not applicable with ngx-datatable select event

onSort

onSort: EventEmitter<Object> = new EventEmitter()

The ngx-datatable event emitted when a column header is sorted

onSortChange

onSortChange: EventEmitter<Object> = new EventEmitter()

The event emitted when the sort has changed -- requires toolbarConfig

Not applicable with ngx-datatable sort event

onTableContextMenu

onTableContextMenu: EventEmitter<Object> = new EventEmitter()

The ngx-datatable event emitted when a context menu is invoked on the table

onViewSelect

onViewSelect: EventEmitter<Object> = new EventEmitter()

The event emitted when a view has been selected -- requires toolbarConfig

rows

rows: any[]

The ngx-datatable event emitted when a cell or row was focused via keyboard or mouse click

viewTemplate

viewTemplate: TemplateRef<any>

The name of the toolbar template containing views

Accessors

allRowsSelected

  • get allRowsSelected(): boolean
  • set allRowsSelected(selected: boolean): void
  • Returns a flag indicating whether all visible rows are selected

    Returns boolean

    True if all visible rows are selected

  • Sets a flag indicating whether all visible rows are selected

    Parameters

    • selected: boolean

      True if all visible rows are selected

    Returns void

    True if all visible rows are selected

Protected cols

  • get cols(): any[]

datatable

  • get datatable(): DatatableComponent

hasData

  • get hasData(): boolean

selectedRows

  • get selectedRows(): any[]
  • set selectedRows(selectedRows: any[]): void

Protected showTable

  • get showTable(): boolean
  • set showTable(visible: boolean): void

Methods

Protected handleAction

  • handleAction($event: Action): void

Protected handleFilterChange

Protected handleFilterFieldSelect

Protected handleFilterSave

Protected handleFilterTypeAhead

Protected handlePageNumber

Protected handlePageSize

Protected handleSelectionChange

Protected handleSortChange

Protected handleViewSelect

ngAfterViewInit

  • ngAfterViewInit(): void

ngDoCheck

  • ngDoCheck(): void

ngOnInit

  • ngOnInit(): void

Protected setupConfig

  • setupConfig(): void

Protected setupDataTableConfig

  • setupDataTableConfig(): void

Protected setupSelectionCols

  • setupSelectionCols(): void

Generated using TypeDoc