Code

<div ng-app="app" ng-controller="appCtrl">
    <m-grid grid-options="gridOptions"></m-grid>
</div>

<style>
    .mytable tr td {
        font-style: italic;
        color: #777;
    }
</style>

<script>
var app = angular.module('app', ['ui.bootstrap', 'm-grid']);

app.config(['mGridConfigProvider', function(mGridConfigProvider) {
    mGridConfigProvider.setDisplayLimitOptions([1, 5, 50, 500]);
    mGridConfigProvider.setDefaultPageLimit(5);
    mGridConfigProvider.appendCssClass({
        table: 'mytable',
    })
}])

app.controller('appCtrl', function($scope) {
    $scope.gridOptions = {
        columns: [{
            name: '#',
            field: 'id'
        }, {
            name: 'Full name',
            field: 'fullName'
        }, {
            name: 'Email',
            field: 'email'
        }],
        sorting: true,
        defaultSorting: 'id',
        async: true,
        asyncData: 'http://example.com/dataurl?term={term}&skip={skip}&take={take}&orderby={orderby}&flag={flag}',
        asyncDataCount: 'http://example.com/datacounturl?term={term}&flag={flag}',
        urlParams: {
            flag: true
        },
        enableSearch: true,
        config: {
            defaultPageLimit: 5,
        }
    };
})
</script>
      
    

API

1. mGridConfigProvider.setDisplayLimitOptions

With this api we can set limit options. This api have a parameter limitOptions. It should be a array.

mGridConfigProvider.setDisplayLimitOptions([10, 20, 50, 100]);

// or

mGridConfigProvider.setDisplayLimitOptions([{
text: 'A',
value: 10
}, {
text: 'B',
value: 50
}]);

2. mGridConfigProvider.setDefaultPageLimit

With this api we can set default page size. This api have parameter limit. It should be a number from displayLimiteOptions

3. mGridConfigProvider.appendCssClass

With this api we can add custom class for table and footer. Parameter of this api should be a object;

mGridConfigProvider.appendCssClass({
    table: 'mytable',
    th: 'myth',
    footer: 'myfooter'
})

3. mGridConfigProvider.setCssClass

With this api we can override grid class with custom class for table and footer. Parameter of this api should be a object;

mGridConfigProvider.setCssClass({
    table: 'mytable',
    th: 'myth',
    footer: 'myfooter'
})

Inline grid configuration

We can set configuration from gridOptions.

$scope.gridOptions = {
    // ...
    config: {
    defaultPageLimit: 5,
}

Default configuration

{
    tableClass: 'table table-striped table-bordered m-grid-table',
    thClass: 'm-grid-th',
    footerClass: 'm-grid-footer',
    defaultPageLimit: 10,
    displayLimitOptions: [
        { 'text': 10, 'value': 10 },
        { 'text': 20, 'value': 20 },
        { 'text': 50, 'value': 50 },
        { 'text': 100, 'value': 100 }
    ]
}