show/hide columns example for smart-table?

Question

ui-grid has a flag for enableGridMenu: true which provides a dropdown menu to show/hide columns. Here is an example: http://ui-grid.info/docs/#/tutorial/304_grid_menu

Does smart-table offer any OOTB show/hide feature or already available extension I'm missing? I know this can be done brute force and I found this gist but it handles the show/hide at the column level and not a table wide "enableGridMenu" simplistic enablement. https://gist.github.com/srph/2443ece955799fee1d9f

Answer 1

Hi My approach is more object oriented than brute force, the markup is built entirely with an array of objects called "columns"

this solution was inspired by the column drag n drop example found here http://lorenzofox3.github.io/smart-table-website/#examples-section

First I define an array of "columns", you can create as many of these objects as you want

   {
        'name': 'Nice Name',
        'value': 'name',
        'class': '',
        'data': 'row.name',
        'ngShow': true,
   }

Now that I have my columns I can do something like this in my markup for the table

<tr ng-repeat="row in tableRows">
    <td ng-repeat="col in columns" ng-class="{{col.ngClass}}" ng-style="{{col.ngStyle}}" ng-show="col.ngShow">
       <div ng-bind="{{col.data}}"></div>
    </td>
</tr>

Then I create a separate markup for the column toggle switches

<p ng-repeat="col in columns"> <a ng-click="col.ngShow = !col.ngShow">{{col.name}}</a> </p>