Demo code not up to date ?

[warpdesign]

It seems the demo source code: http://codepen.io/anon/pen/zGXWWp?editors=101 lacks some features present in the demo here: http://danielnagy.me/md-data-table/

For example the buttons at the top right to filter & add a new item aren't present in the codepen version.

I'd like to add buttons like those in my code. Are these options of md-data-table ? Or is it extra code that was added for the demo ?

[jjmschofield]

I can't seem to find anything in the source for filtering. I've implemented something similar with a filter applied to ng-repeat, however this breaks pagination.

[daniel-nagy]

Hi, you can view the source code for the live demo in the gh-pages branch.

The icons in the toolbar are not part of the module. There are many ways to get the Material Design Icons in your applications. The easiest way is to use the CDN for the font icons,

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Or use your favorite package manager.

You can then use these icons with the md-icon directive using ligatures.

<!-- source: gh-pages/templates/nutrition-table.html -->
<md-button class="md-icon-button" ng-click="filter.show = true">
  <md-icon>filter_list</md-icon>
</md-button>
<md-button class="md-icon-button" ng-click="addItem($event)">
  <md-icon>local_dining</md-icon>
</md-button>

@jjmschofield for the filter logic you will be mostly interested in the nutritionController

You'll see that I keep a local variable, that I call bookmark, to keep track of what page the user was on before the filter so I can restore it after.

[jjmschofield]

Thanks for this @daniel-nagy

Unfortunately we are not using a server side filter or pagination. It seems that with a client side filter the logic would become more complicated?

[elasticrash]

@jjmschofield I am using client side pagination / sorting and filtering it wasn't that hard to implement

[jjmschofield]

@elasticrash awesome! Did you filter ng-repeat or did you manipulate the source data?

[elasticrash]

@jjmschofield I am manipulating the data source. In reality I am creating two objects one that has everything in it and the manipulated one. for example I am handling pagination like this

    $scope.onPaginate  = function (page, limit) {
        $scope.properties = initProperties.slice((page - 1) * limit, (page - 1) * limit + limit);
        $scope.properties.total = initProperties.length;
    };

where properties is my table object.

[jjmschofield]

@elasticrash thanks for the pointers! I've created a slightly different solution which doesn't use the onPagination event.

This seems to give perfect results for me, no matter where the user starts the filter, the pagination updates correctly and the filter is removed once the user toggles off the input. The original pagination location before the filter began is lost, however I don't think I'm too worried by that.

  vm.dataSrc = [];

  vm.table = {
    data: vm.dataSrc,
    limit: 5,
    limitOptions: [5, 10, 15, 20, 25, 50, 100],
    orderBy: 'Timestamp',
    currentPage: 1,
    filterBy: '',
    showFilter: false,
    toggleFilter: function () {
      vm.table.showFilter = !vm.table.showFilter;
      vm.table.filterBy = '';
      vm.table.onFilterChange();
    },
    onFilterChange: function(){
      vm.table.currentPage = 1;
      vm.table.data = vm.dataSrc.filter(vm.table.filterData);
    },
    filterData: function(object){
      return objectContains(object, vm.table.filterBy);
    }
  };

  function objectContains(object, requiredString){
    requiredString = requiredString.toString().toLowerCase();

    if(requiredString.length < 1){
      return true;
    }

    for (var property in object) {
      var testString = object[property].toString().toLowerCase();
      if(testString.indexOf(requiredString) > -1){
        return true;
      }
    }

    return false;
  }

[elasticrash]

@jjmschofield
Nice solution The problem I had is that the limit was not working in my case (never figured out why, in order to explain it), thats why after filtering, pagination and sorting I am ended up slicing the filterted datasource and tricking the table by giving the filterted number of rows each time. Obviously I am too loosing the original pagination but that doesnt really matter.

But since it is working I wont complain

[MrOnyancha]

I think this will work in place of that