smart table column show/hide toggle
Solution 1
In case anyone else is trying to do this, I ended up not going to ngGrid route. I was able to use buttons and ng-hide to accomplish what I wanted. For my html I did this:
<button ng-click="firstNameToggle = !firstNameToggle" type="button" class="btn btn-primary">First Name</button>
<button ng-click="lastNameToggle = !lastNameToggle" type="button" class="btn btn-info">Last Name</button>
<button ng-click="balanceToggle = !balanceToggle" type="button" class="btn btn-default">Balance</button>
<button ng-click="emailToggle = !emailToggle" type="button" class="btn btn-success">Email</button>
</div>
<table class="table table-hover table-striped" st-table="rowCollection">
<thead>
<tr>
<th ng-hide="firstNameToggle" st-sort="firstName">first name</th>
<th ng-hide="lastNameToggle"st-sort="lastName">last name</th>
<th ng-hide="balanceToggle"st-skip-natural="true" st-sort="balance">balance</th>
<th ng-hide="emailToggle">email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td ng-hide="firstNameToggle">{{row.firstName}}</td>
<td ng-hide="lastNameToggle">{{row.lastName}}</td>
<td ng-hide="balanceToggle">{{row.balance}}</td>
<td ng-hide="emailToggle">{{row.email}}</td>
</tr>
</tbody>
and my js:
app.controller('basicsCtrl', ['$scope', function (scope) {
scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: '[email protected]'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: '[email protected]'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: '[email protected]'}
];
scope.getters={
firstName: function (value) {
//this will sort by the length of the first name string
return value.firstName.length;
}
}
scope.firstNameToggle = "false";
scope.lastNameToggle = "false";
scope.balanceToggle = "false";
scope.emailToggle = "false";
}]);
Solution 2
I know this is old but wrote this directive that solves it. it do all alone.
https://github.com/cesardmoro/tableColumnToggler
Related videos on Youtube
user2827707
Updated on June 04, 2022Comments
-
user2827707 almost 2 years
I'm new to AngularJS and SmartTable...I'm currently trying to get SmartTable to have a show/hide toggle for the columns. From what I undertstand SmartTable doesn't do this, so I am using the ng-Grid show/hide feature...trying to follow this solution: how to hide/show ng-grid column externally?
When I implemented this solution my columns aren't showing up.
How do you set smartTable columns to "show" upon initial set up? I think this is what I'm missing...
Here is my js:
var app = angular.module('myApp', ['smart-table', 'ngGrid']); app.controller('paginationCtrl', ['$scope', function (scope) { var nameList = ['Brian', 'Bob', 'Marie', 'Jennifer', 'Frank'], familyName = ['Smith', 'Miller', 'Patel', 'Jefferson', 'Mendez']; ... $scope.toggleCol= function(i) { $scope.gridOptions.$gridScope.columns[i].toggleVisible() } scope.itemsByPage=15; scope.rowCollection = []; for (var j = 0; j < 200; j++) { scope.rowCollection.push(createRandomItem()); } }]);
and here's my html:
<body ng-controller="paginationCtrl"> <p>Smart Table Example</p> <input type="button" value="First Name" ng-click="toggleCol(0)" /> <table class="table table-striped" st-table="rowCollection"> <thead> <tr> <th st-sort="firstName">first name</th> <th st-sort="lastName">last name</th> <th st-skip-natural="true" st-sort="balance">balance</th> <th>email</th> </tr> </thead> <tbody> <tr ng-repeat="row in rowCollection"> <td>{{row.firstName}}</td> <td>{{row.lastName}}</td> <td>{{row.balance}}</td> <td>{{row.email}}</td> </tr> </tbody> <tfoot> <tr> <td class="text-center" colspan="5"> <div st-displayed-pages="7" st-items-by-page="itemsByPage" st-pagination=""></div> </td> </tr> </tfoot> </table>
You can see my entire setup on my plunker example:
http://plnkr.co/edit/6F8NsDdgaWranTXeIQuV?p=preview
Thanks!!