# 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') ]; }