Improve this doc View source

pfTableView - with Toolbar
directive in module patternfly.table

Description

Example configuring a table view with a toolbar.

Please see pfToolbar for use in Toolbar View Switcher

Usage

as attribute
<ANY pf-table-view - with -toolbar
     config="{object}"
     dt-options="{object}"
     items="{array}"
     columns="{array}"
     action-buttons="{array}"
     menu-actions="{array}"
     empty-state-config="{object}">
   ...
</ANY>

Parameters

ParamTypeDetails
configobject

Optional configuration object

  • .selectionMatchProp - (string) Property of the items to use for determining matching, default is 'uuid'
  • .onCheckBoxChange - ( function(item) ) Called to notify when a checkbox selection changes, default is none
  • .itemsAvailable - (boolean) If 'false', displays the Empty State component.
dtOptionsobject

Optional angular-datatables DTOptionsBuilder configuration object. See angular-datatables: DTOptionsBuilder

itemsarray

Array of items to display in the table view.

columnsarray

Array of table column information to display in the table's header row

  • .header - (string) Text label for a column header
  • .itemField - (string) Item field to associate with a particular column.
actionButtonsarray

List of action buttons in each row

  • .name - (String) The name of the action, displayed on the button
  • .title - (String) Optional title, used for the tooltip
  • .actionFn - (function(action)) Function to invoke when the action selected
menuActionsarray

List of actions for dropdown menu in each row

  • .name - (String) The name of the action, displayed on the button
  • .title - (String) Optional title, used for the tooltip
  • .actionFn - (function(action)) Function to invoke when the action selected
emptyStateConfigobject

Optional configuration settings for the empty state component. See the Empty State component

Example

Source







Demo