With the DataTables Column Filter

The angular-datatables also provides an API in order to make the plugin ColumnFilter work with datatables.

You need to add the file angular-datatables.columnfilter.min.js to your HTML file.

You also need to add the dependency datatables.columnfilter to your Angular app.

See the API for the complete list of methods of the helper.

ID First Name Last Name
ID First Name Last Name
angular.module('showcase.withColumnFilter', ['datatables', 'datatables.columnfilter']) .controller('WithColumnFilterCtrl', WithColumnFilterCtrl); function WithColumnFilterCtrl(DTOptionsBuilder, DTColumnBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.fromSource('data.json') .withPaginationType('full_numbers') .withColumnFilter({ aoColumns: [{ type: 'number' }, { type: 'text', bRegex: true, bSmart: true }, { type: 'select', bRegex: false, values: ['Yoda', 'Titi', 'Kyle', 'Bar', 'Whateveryournameis'] }] }); vm.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('ID'), DTColumnBuilder.newColumn('firstName').withTitle('First name'), DTColumnBuilder.newColumn('lastName').withTitle('Last name') ]; }