0

I am working on application with spring boot front-end in angular js, html. The application contains many angular JS tables. Now we have requirement to apply freezing of header (first row) and first column in the table.

We have tried many solution to freeze both of them together in one table, but in some cases only header get freeze in other cases only columns are.

We have tried to fix header :

To freeze column, I tried :

Only one work at a time, but I need header and column freeze working at same time.

Sample angular js table is :

example.js

angular.module('plunker', ['ui.bootstrap']);

function ListCtrl($scope, $dialog) {

  $scope.items = [
    {name: 'foo', value: 'foo value'},
    {name: 'bar', value: 'bar value'},
    {name: 'baz', value: 'baz value'}
  ];
}

index.html

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.1.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>
    <div ng-controller="ListCtrl">
      <table class="table table-bordered">
        <thead>
        <tr>
            <th>Name1</th>
            <th>Value1</th>
             <th>Name2</th>
            <th>Value2</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in items">
          <td>{{item.name}}1</td>
          <td>{{item.value}}1</td>
           <td>{{item.name}}2</td>
          <td>{{item.value}}2</td>
        </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

Can anyone suggest any solution for angular js table that help in freezing header and column ? CSS solution tried but table format looks not proper, so needed solution in js or angular js.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Neelam Sharma
  • 2,745
  • 4
  • 32
  • 73
  • Try this one http://stackoverflow.com/questions/19792490/creating-two-way-fixed-scrolling-of-table-headers – Rio Feb 16 '17 at 07:51
  • @Rio This solution is not feasible for me as this will destroyed the formatting of my table, also I have search boxes in below of header, that's why I needed solution other than css. – Neelam Sharma Feb 16 '17 at 09:42
  • I'd suggest DataTables - https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html – K Scandrett Feb 16 '17 at 10:45
  • ... there's also an Angular wrapper for it (if you google datatables and angular) – K Scandrett Feb 16 '17 at 10:48

0 Answers0