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

Param | Type | Details
--- | --- | ---
items | array | 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).

config

object

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.
- .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. 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

actionButtons

array

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

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

menuActions

array

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

hideMenuForItemFn | function (item) | function(item) Used to hide all menu actions for a particular item
menuClassForItemFn | function (item) | function(item) Used to specify a class for an item's dropdown kebab
updateMenuActionForItemFn | function (action, item) | function(action, item) Used to update a menu action based on the current item
customScope | object | Object containing any variables/functions used by the transcluded html, access via customScope.<xxx>

## Example

#### Source

#### Demo