<div class="container-fluid">

<table ng-if="$ctrl.config.itemsAvailable !== false"

datatable="ng" dt-options="$ctrl.dtOptions" dt-column-defs="$ctrl.dtColumnDefs" dt-instance="$ctrl.dtInstanceCallback"

class="table-view-container table table-striped table-bordered table-hover dataTable">

<thead>

<tr role="row">

<th class="table-view-pf-select" ng-if="$ctrl.config.showCheckboxes">

<input type="checkbox" value="$ctrl.selectAll" ng-model="$ctrl.selectAll" ng-change="$ctrl.toggleAll()"/>

</th>

<th ng-repeat="col in $ctrl.columns">{{col.header}}</th>

<th ng-if="$ctrl.areActions()" colspan="{{$ctrl.calcActionsColspan()}}">Actions</th>

</tr>

</thead>

<tbody>

<tr role="row" ng-repeat="item in $ctrl.items track by $index">

<td class="table-view-pf-select" ng-if="$ctrl.config.showCheckboxes">

<input type="checkbox" value="item.selected" ng-model="item.selected" ng-change="$ctrl.toggleOne(item)"/>

</td>

<td ng-repeat="(key, value) in item" ng-if="$ctrl.isColItemFld(key)">{{ value }}</td>

<td ng-if="$ctrl.actionButtons && $ctrl.actionButtons.length > 0" class="table-view-pf-actions" ng-repeat="actionButton in $ctrl.actionButtons">

<div class="table-view-pf-btn">

<button class="btn btn-default" title="{{actionButton.title}}"

ng-click="$ctrl.handleButtonAction(actionButton, item)">

<span ng-if="!actionButton.include">{{actionButton.name}}</span>

</button>

</div>

</td>

<td ng-if="$ctrl.menuActions && $ctrl.menuActions.length > 0" class="table-view-pf-actions list-group-item-header">

<div uib-dropdown class="{{$ctrl.dropdownClass}} dropdown-kebab-pf"

id="kebab_{{$index}}"

ng-if="$ctrl.menuActions && $ctrl.menuActions.length > 0">

<button uib-dropdown-toggle class="btn btn-default dropdown-toggle" type="button"

id="dropdownKebabRight_{{$index}}"

ng-click="$ctrl.setupActions(item, $event)">

<span class="fa fa-ellipsis-v"></span>

</button>

<ul uib-dropdown-menu class="dropdown-menu dropdown-menu-right {{$index}}" aria-labelledby="dropdownKebabRight_{{$index}}" >

<li ng-repeat="menuAction in $ctrl.menuActions"

ng-if="menuAction.isVisible !== false"

role="{{menuAction.isSeparator === true ? 'separator' : 'menuitem'}}"

ng-class="{'divider': (menuAction.isSeparator === true), 'disabled': (menuAction.isDisabled === true)}">

<a ng-if="menuAction.isSeparator !== true" title="{{menuAction.title}}" ng-click="$ctrl.handleMenuAction(menuAction, item)">

{{menuAction.name}}

</a>

</li>

</ul>

</div>

</td>

</tr>

</tbody>

</table>

<pf-empty-state ng-if="$ctrl.config.itemsAvailable === false" config="$ctrl.emptyStateConfig"></pf-empty-state>

</div>