if i click remove column name that column has to remove from table and also the columns that are not listed in table has to be in add column
like Remove column there will other Add column and also save button.
1 Answer
Have a look at the plunkr. You can add or remove the column in the array maintained inside the controller to update your table.
https://plnkr.co/edit/w90MlA?p=preview
HTML -
<div ng-app="demoApp" ng-controller="demoCtrl">
<table border="1">
<thead>
<tr>
<th ng-repeat="col in cols">{{col}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="col in cols">
{{row[col]}}
</td>
</tr>
</tbody>
</table>
</div>
JS -
// Code goes here
var demoApp = angular.module("demoApp", []);
demoApp.controller("demoCtrl", ['$scope', function($scope){
$scope.cols = ['A', 'B', 'C'];
$scope.rows = [
{
'A': "1",
'B': "2",
'C': "3",
'D': "4"
},
{
'A': "5",
'B': "6",
'C': "7",
'D': "8"
},
{
'A': "11",
'B': "21",
'C': "31",
'D': "41"
}
]
}]);
Hope this helps.
12 Comments
naga venkata sudheer varma
thanks ,i want like i have like 10 column name in list ,by default i will show 5 columns ,above of table there will be preferences dropdown in that there will be add column ,remove column and save .i add column there remaining column names from the list will display .in remove column the column names those are displaying on table has to be there
naga venkata sudheer varma
if u remove column name from preferences-->remove column -->column name then that removed column name has to add to preference->add Column(dropdown)
naga venkata sudheer varma
instead of that search box .i want to add some pre defined columns names to that add button as dropdown
codeomnitrix
I think that you can figure out by yourself.
naga venkata sudheer varma
once check above image preference-->remove column--->(list)
|
<td ng-repeat="col in columns">{{col}}</td>for header and for data use<tr ng-repeat="row in rows"><td ng-repeat="col in columns">{{data['col']}}</td></tr>