Improve this doc View source

pfListView
directive in module patternfly.views

Description

Directive for rendering a list view. Pass a customScope object containing any scope variables/functions you need to access from the transcluded source, access these via 'customScope' in your transcluded hmtl.

If using expanding rows, use a list-expanded-content element containing expandable content for each row. Item data can be accessed inside list-expanded-content by using $parent.item.property. For each item in the items array, the expansion can be disabled by setting disableRowExpansion to true on the item.

Usage

as attribute
<ANY pf-list-view
     items="{array}"
     config="{object}"
     action-buttons="{array}"
     enable-button-for-item-fn="{function (action, item))}"
     menu-actions="{array}"
     hide-menu-for-item-fn="{function (item))}"
     menu-class-for-item-fn="{function (item))}"
     update-menu-action-for-item-fn="{function (action, item))}"
     custom-scope="{object}">
   ...
</ANY>

Parameters

ParamTypeDetails
itemsarray

Array of items to display in the list view. If an item in the array has a 'rowClass' field, the value of this field will be used as a class specified on the row (list-group-item).

configobject

Configuration settings for the list view:

  • .showSelectBox - (boolean) Show item selection boxes for each item, default is true
  • .selectItems - (boolean) Allow row selection, default is false
  • .dlbClick - (boolean) Handle double clicking (item remains selected on a double click). Default is false.
  • .multiSelect - (boolean) Allow multiple row selections, selectItems must also be set, not applicable when dblClick is true. Default is false
  • .useExpandingRows - (boolean) Allow row expansion for each list item.
  • .selectionMatchProp - (string) Property of the items to use for determining matching, default is 'uuid'
  • .selectedItems - (array) Current set of selected items
  • .checkDisabled - ( function(item) ) Function to call to determine if an item is disabled, default is none
  • .onCheckBoxChange - ( function(item) ) Called to notify when a checkbox selection changes, default is none
  • .onSelect - ( function(item, event) ) Called to notify of item selection, default is none
  • .onSelectionChange - ( function(items) ) Called to notify when item selections change, default is none
  • .onClick - ( function(item, event) ) Called to notify when an item is clicked, default is none
  • .onDblClick - ( function(item, event) ) Called to notify when an item is double clicked, default is none
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
  • .class - (String) Optional class to add to the action button
  • .include - (String) Optional include src for the button. Used for custom button layouts (icons, dropdowns, etc)
  • .includeClass - (String) Optional class to set on the include src div (only relevant when include is set).
  • .actionFn - (function(action)) Function to invoke when the action selected
enableButtonForItemFnfunction (action, item)

function(action, item) Used to enabled/disable an action button based on the current item

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
  • .isVisible - (Boolean) set to false to hide the action
  • .isDisabled - (Boolean) set to true to disable the action
  • .isSeparator - (Boolean) set to true if this is a placeholder for a separator rather than an action
hideMenuForItemFnfunction (item)

function(item) Used to hide all menu actions for a particular item

menuClassForItemFnfunction (item)

function(item) Used to specify a class for an item's dropdown kebab

updateMenuActionForItemFnfunction (action, item)

function(action, item) Used to update a menu action based on the current item

customScopeobject

Object containing any variables/functions used by the transcluded html, access via customScope.

Example

Source













Demo