Improve this doc View source

pfTableView-Basic
directive in module patternfly.table

Description

Component for rendering a simple table view.

See pfTableView - with Toolbar for use with a Toolbar
See pfToolbar for use in Toolbar View Switcher

Usage

as attribute
<ANY pf-table-view--basic
     config="{object}"
     dt-options="{object}"
     items="{array}"
     columns="{array}"
     action-buttons="{array}"
     menu-actions="{array}"
     empty-state-config="{object}"
     empty-state-action-buttons="{array}">
   ...
</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.
  • .showCheckboxes - (boolean) Show checkboxes for row selection, default is true
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 and optionaly render the cells of a column.

  • .header - (string) Text label for a column header
  • .itemField - (string) Item field to associate with a particular column.
  • .templateFn - (function(value, item)) (optional) Template function used to render each cell of the column. Pro: more performant than htmlTemplate. Con: doesn't support AngularJS directives in the template, therefore it doesn't support things like ng-click. Example:
    templateFn: (value, item) => `<a href="${item.id}">${value}</a>`
  • .htmlTemplate - (string) (optional) id/name of an embedded ng/html template. Pro: supports AngularJS directives in the template. Con: poor performance on large tables. Ex: htmlTemplate="name_template.html". The template will be used to render each cell of the column. Use handleColAction(key, value) in the template to call the colActionFn callback function you specify. 'key' is the item attribute name; which should equal the itemFld of a column. 'value' is the item[key] value.
        <script type="text/ng-template" id="name_template.html">
          <a href="" ng-click="$ctrl.handleColAction(key, value)">{{value}}</a>
        </script>
      
  • .colActionFn - (function) (optional) Callback function used for the column. 'value' is passed as a paramenter to the callback function.

Tip: For templating, use tempateFn unless you really need to use AngularJS directives. templateFn performs better than htmlTemplate.

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

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