How to add a multiselect checkbox show/hide values at header columns at UI-GRID(rewritten NG-GRID)

Below is a sample UI-GRID, I toggled the Grid Menu.

I want to achieve having multi-select checkbox values at header column and show/hide the row.. just like in Microsoft Office Excel when table is filtered.. below is a sample screenshot

Microsoft Excel Filtering Function

I can just select the values I want at the particular column and filter..

Just like the grid menu below, I can show/hide columns and they are enumerated.. but this time, I want row values at a particular column.

Sample UI-Grid with Grid Menu toggled

Here's my code so far:

app.controller('MainCtrl', ['$scope', function ($scope, $timeout) {

var headerTemplate = '<div class="ui-grid-top-panel" style="text-align: center">Transport Orders List</div>';

$scope.filterOptions = {
    filterText: ''
}
$scope.gridOptions = {
    data: 'filteredTransportOrders',
    enableSorting: true,
    pagingPageSizes: [5, 10, 15],
    pagingPageSize: 5,
    columnDefs: [
        {field: 'tpc', displayName: 'TPC', 
            menuItems: [{
                title: 'Values:',
            },
            {
                title: 'Get 1',
                icon: 'ui-grid-icon-check',
                action: '',
                context: ''
            }
            ]
        },
        {field: 'orderdate', displayName: 'Order Date'},
        {field: 'process', displayName: 'Process'},
        {field: 'protectionlevel', displayName: 'Protection Level'},
        {field: 'orderline', displayName: 'Order Line'},
        {field: 'code', displayName: 'Code'},
        {field: 'xdockleg', displayName: 'X Dock Leg'},
        {field: 'origin', displayName: 'Origin'},
        {field: 'xdock', displayName: 'X Dock'},
        {field: 'destination', displayName: 'Destination'},
        {field: 'palletspaces', displayName: 'Pallet Spaces'},
        {field: 'despatchwindowfrom', displayName: 'Despatch Window From'},
        {field: 'despatchwindow', displayName: 'Despatch Window'}
    ],
    filterOptions: $scope.filterOptions,
    enableFiltering: true,
    exporterMenuCsv: false,
    enableGridMenu: true
};


}

Thank you for answering!:D

If I understand your intention correctly, what you can do to easily show, hide row is to have something like

{field: 'orderdate', displayName: 'Order Date', show: true}

and in the template, you can do something like

<table>
    <tr ng-repeat="row in gridOptions.columnDefs">
        <td ng-show="row.show" ng-bind="row.displayName"></td>
        <td ng-show="row.show" ng-click="row.show = !row.show">Make it hide</td>
        <td ng-show="!row.show" ng-click="row.show = !row.show">Make it show</td>
    </tr>
</table>

Demo

Larger example

In the UI.Grid tutorial : http://ui-grid.info/docs/#/tutorial/103_filtering, there is an example where a -single- "select options" filter is defined (on column "Gender").

If you want a multiselect feature (Excel-like), you need to modify the default header cell template to give it the required behavior, and set it to the [headerCellTemplate] of your [columnDefs] column.

The default template "uiGridHeaderCell.html" is here : https://github.com/angular-ui/ng-grid/blob/master/src/templates/ui-grid/uiGridHeaderCell.html