pfTableView-with-Toolbar

directive in module patternfly.table

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

Optional angular-datatables DTOptionsBuilder configuration object. Note: paginationType, displayLength, and dom:"p" are no longer being used for pagination, but are allowed for backward compatibility. Please switch to prefered 'pageConfig' settings for pf pagination controls. Other dtOptions can still be used, such as 'order' See angular-datatables: DTOptionsBuilder

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]

Array of items to display in the table view.

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.

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

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

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

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