ng-table : Clear table contents on button click

Question

I am able to show data on button click. How to clear table contents on clear?

HTML

 <div ng-app="myApp">
  <div ng-controller="tableControl as vm">
    <button class="btn btn-default" ng-click="vm.show()">Show</button>
    <button class="btn btn-default" ng-click="vm.clear()">Clear</button>
    <table ng-table="vm.tableParams" class="table" show-filter="true">
      <tr ng-repeat="user in $data">
        <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
          {{user.name}}</td>
        <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
          {{user.age}}</td>
      </tr>
    </table>
  </div>
</div>

Tried setting tableParams to null but did not help.

  self.show = function() {
    self.tableParams = new NgTableParams({
      page: 1, // show first page
      count: 10 // count per page
    }, {
      dataset: data
    });
  }

  self.clear = function() {
  self.tableParams = null;
  }

Here is the fiddle

Answer 1

This is not gonna work, because you have to clear the dataset object instead.

Reset the dataset array and call reload() function:

self.clear = function() {
    self.tableParams.settings().dataset = [];
    self.tableParams.reload();
}

... and it's gonna work! :)