MrProgram MrProgram - 4 years ago 70
AngularJS Question

make first column always fixed and the rest compressed in table

I have a table where I wanna display the first column always on one row and the other ones to somehow press themselves together one the rest of the space.

I have tried to simulate a fixed width at 320 (for phone size)..

Here is my plunker: http://plnkr.co/edit/I5Qe21mgGGpMV94bdMl6?p=preview

Below you can see all the code and the CSS with it..

<!doctype html>
<html ng-app="plunker">

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/slate/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body>
<div ng:controller="MainCtrl">

<table border="1" style="width: 320px;" class="table table-striped table-hover table-responsive table-bordered">
<thead style="font-weight: bold;">
<tr>
<th ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">

<td ng-repeat="column in columnsTest" ng-if="column.checked">
<span class="glyphicon glyphicon-circle-arrow-right" ng-show="column.id === 'Value1'"></span>
{{row[column.id]}}
</td>
</tr>
</tbody>
</table>

<p>Visible Columns:</p>
<br />
<div class="cbxList" ng-repeat="column in columnsTest">
<input type="checkbox" ng-model="column.checked">{{column.id}}
</div>


</div>

<style>
table {
table-layout: fixed;
width: 100%;
font-size: 10px;
}

td {
word-wrap: break-word;
}
</style>



<script>
var app = angular.module('plunker', []);




app.controller('MainCtrl', function($scope) {
$scope.columnsTest = [{
id: 'Value1',
checked: true
}, {
id: 'Value2',
checked: true
}, {
id: 'Value3',
checked: true
}];


$scope.rows = [{
id: 1,
"Value1": 'Thisshouldbeonerow',
"Value2": 2013321,
"Value3": 2012352432423
}];


$scope.columnToggled = function(column) {
$('[data-col-id="' + column.id + '"]').each(function() {
var element = this;
if ($(element).hasClass('ng-hide')) {
$(element).removeClass('ng-hide');
} else {
$(element).addClass('ng-hide');
}
});
};


function updateRow(row) {
for (var i = 0; i < $scope.rows.length; i++) {
if ($scope.rows[i].id === row.id) {
$scope.rows[i] = row;
}
}
}


});
</script>
</body>

</html>

Answer Source

Hi Check out this plunker

https://plnkr.co/edit/cvJruUG5Eh1n2CJQ0KXZ

.fixed_headers {
  width: 750px;
  table-layout: fixed;....

checkout for further

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download