In AngularJS Smart Table, you can implement filtering by an external control (e.g., an input field) by using a custom filtering function. This allows you to filter the data based on the input from an external control rather than using the default built-in filtering.

Here's a step-by-step guide on how to achieve filtering by an external control with AngularJS Smart Table:

  1. Install Smart Table: Make sure you have installed AngularJS Smart Table in your project. You can do this using npm or by including the necessary script files in your HTML.

  2. Set up AngularJS App: Set up your AngularJS app and include the required dependencies, including smart-table.

  3. HTML Markup: Create an HTML input field or any other external control that will be used for filtering. For example:

    html
    <input type="text" ng-model="searchTerm" ng-change="filterTable()" placeholder="Search...">

    In this example, the searchTerm is bound to the input field using ng-model, and the filterTable() function will be called whenever the input value changes (using ng-change).

  4. Controller Setup: In your AngularJS controller, define the searchTerm variable and the data you want to display in the Smart Table. For demonstration purposes, we'll use a simple array of objects as data.

    javascript
    angular.module('myApp', ['smart-table']) .controller('myController', function($scope) { $scope.searchTerm = ''; // Sample data (replace this with your actual data) $scope.tableData = [ { id: 1, name: 'John Doe', age: 30 }, { id: 2, name: 'Jane Smith', age: 25 }, { id: 3, name: 'Bob Johnson', age: 35 }, // Add more objects as needed ]; // Custom filter function $scope.customFilter = function(item) { // Implement your custom filter logic here // For example, check if the name or any other field contains the search term return item.name.toLowerCase().includes($scope.searchTerm.toLowerCase()); }; });
  5. Table Configuration: Configure your Smart Table to use the custom filter function and the searchTerm.

    html
    <table st-table="tableData" st-safe-src="tableData" st-set-filter="customFilter"> <thead> <tr> <th st-sort="name">Name</th> <th st-sort="age">Age</th> </tr> </thead> <tbody> <tr ng-repeat="row in tableData"> <td>{{row.name}}</td> <td>{{row.age}}</td> </tr> </tbody> </table>

    In the above code, we use the st-set-filter attribute to set the custom filter function (customFilter) for filtering the table data based on the external control (searchTerm).

  6. Filter Function Implementation: Implement the custom filter function in the controller as defined in step 4. The custom filter function takes each item in the table data and decides whether it should be included in the filtered result based on the searchTerm.

  7. Filter Trigger: Finally, create a function in the controller that will be called whenever the external control's value changes. In this case, it's the filterTable() function defined in step 3.

    javascript
    $scope.filterTable = function() { // Trigger the table filtering by changing the safe source data $scope.tableData = $scope.tableData.slice(); };

    By updating the $scope.tableData with slice(), we trigger the filtering mechanism in Smart Table.

Now, whenever you enter a search term in the input field, the table data will be filtered accordingly. The custom filter function will be called for each row in the table data, and rows that match the search term will be displayed.

Remember to replace the sample data with your actual data, and adjust the custom filter function's logic based on your filtering requirements. With this approach, you have control over how the filtering is performed and can implement custom filtering rules tailored to your application's needs.

Have questions or queries?
Get in Touch