Improve this doc View source

pfListView
directive in module patternfly.views

Description

Component 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 '$ctrl.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. Setting compoundExpanion requires the applicatiot to set/unset the items' isExpanded field and to handle the contents in the list-expanded-content element based on what is expanded.

Usage

as element:
<pf-list-view
       items="{array}"
       config="{object}"
       page-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}"
       empty-state-config="{object}"
       empty-state-action-buttons="{array}">
</pf-list-view>

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.
  • .dragEnabled - (boolean) Enable drag and drop. Default is false.
  • .dragEnd - ( function() ) Function to call when the drag operation ended, default is none
  • .dragMoved - ( function() ) Function to call when the drag operation moved an element, default is none
  • .dragStart - ( function(item) ) Function to call when the drag operation started, default is none
  • .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.
  • .compoundExpansionOnly - (boolean) Use compound row expansion only. Hides the row expander and pointer cursor on the row while allowing the row to expand via transcluded items functionality, only valid if useExpandRows is true.
  • .selectionMatchProp - (string) Property of the items to use for determining matching, default is 'uuid'
  • .selectedItems - (array) Current set of selected items
  • .itemsAvailable - (boolean) If 'false', displays the Empty State component.
  • .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. Note: row expansion is the default behavior after onClick performed, but user can stop such default behavior by adding the sentence "return false;" to the end of onClick function body
  • .onDblClick - ( function(item, event) ) Called to notify when an item is double clicked, default is none
pageConfigobject

Optional pagination configuration object. Since all properties are optional it is ok to specify: 'pageConfig = {}' to indicate that you want to use pagination with the default parameters.

  • .pageNumber - (number) Optional Initial page number to display. Default is page 1.
  • .pageSize - (number) Optional Initial page size/display length to use. Ie. Number of "Items per Page". Default is 10 items per page
  • .pageSizeIncrements - (Array[Number]) Optional Page size increments for the 'per page' dropdown. If not specified, the default values are: [5, 10, 20, 40, 80, 100]
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 $ctrl.customScope.

emptyStateConfigobject

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

emptyStateActionButtonsarray

Optional buttons to display under the icon, title, and informational paragraph in the empty state component. See the Empty State component

Example

Source





































































Demo