Configuring your table with ngTableParams

ngTable is set up and configured through the use of an ng-table attribute on a table element. The value of this attribute points to a scope property that represents an instance of ngTableParams. For example:

In your HTML:

<table ng-table="tableParams">
  ...
</table>

In your controller:

$scope.tableParams = new ngTableParams(parameters, settings)

When instantiating ngTableParams, the function takes two arguments: parameters and settings. Both are Objects and are detailed below.

• parameters
• settings

parameters

The parameters object should be used to define initial (set and forget) configuration. More complex configuration should be done in the settings object. The following properties are available on the parameters object.

page

type: Number, default: 1

The page number to show.

count

type: Number, default: 1

The number of items to show per page.

filter

type: Object, default: {}

Defines filters for columns. Case insensitive. For example, binding a select dropdown in your view to a filter on the table:

in view

<select name="status" ng-model="filters.status" ...>

in controller:

$scope.filters = {
  status: ''
};

in ngTableParams:

$scope.tableParams = new ngTableParams(
  {
    ...
    // Attach filters to ng-table.
    filter: $scope.filters
  },
  {
    ...
  }
);

sorting

type: Object, default: {}

Defines sorting for columns. For example, given this set of data:

var data = [
  {name: "Moroni", age: 50},
  {name: "Tiancum", age: 43}
];

You can define an ascending sort order for the name column by setting sorting to:

{
  name: 'asc'
}

settings

total

type: Number, default: 0

Defines the total number of items for the table. Typically this will be a reference to the length property of your data array.

counts

type: Array, default: [10, 25, 50, 100]

Defines the options that should be available in the "items per page" toggler. Set to an empty array to disable the toggler.

groupBy

type: String | Function

Defines table groups. You can group by field name by setting groupBy to a string:

var data = [
  {name: "Moroni", age: 50},
  {name: "Tiancum", age: 43}
];
...
groupBy: 'name'

Or a computed property by setting groupBy to a function:

// Group by first letter of name + age
// The item parameter is provided internally by ngTable
groupBy: function (item) {
  return item.name[0] + item.age;
}

filterDelay

type: Number, default: 750

Defines a delay (in milliseconds) between when the filters supplied in the filter parameter changes, and when the filters are applied to table data. Useful for example, when you need a keystroke delay on filters.

getData

type: Function

Defines a method for collating the data that should be displayed in ngTable. ngTable always calls getData with 2 arguments, $defer and params, as in the following example:

getData: function ($defer, params) {
  ...
}

$defer is a Promise object. Resolve your data with $defer's resolve method to make your data available to ngTable.

For example, given this set of data:

var data = [
  {name: "Moroni", age: 50},
  {name: "Tiancum", age: 43}
];

At the most basic level, you can make all data available to ngTable:

getData: function ($defer, params) {
  $defer.resolve(data);
}

params is a reference to the configuration supplied in the parameters object (or ngTable's defaults, if not supplied in parameters).

For example, to retrieve the current filter and sorting parameters:

getData: function ($defer, params) {
  ...
  var filter = params.filter();
  var sorting = params.sorting();
  ...
}