Search code examples
angularjsngtable

Truncate text in ngTable

In this plunk I have an ngTable with cells that are overflown and as a result there is text in two lines. How to truncate the text to avoid the two lines?

HTML

<div ng-controller="myCtl" ng-app="app">
    <table ng-table="tableParams" class="table table-bordered table-hover">
        <tbody>
            <tr ng-repeat="u in data">
                <td title="'User ID'" style="width:150px">{{ u.uid }}</td>
                <td title="'Name'" style="width:150px">{{ u.nm }}</td>
                <td title="'Group'" style="width:200px">{{ u.ugr }}</td>
            </tr>
        </tbody>
    </table>
</div>

Javascript

var app = angular.module('app', ['ngTable']);

app.controller('myCtl', function($scope,NgTableParams) {

          $scope.data = [ 
            { uid: 'User 1', nm: 'Name 11111111111111111111x', ugr: 'Group 1'},
            { uid: 'User 2', nm: 'Name 222222222222222222x', ugr: 'Group 2'}
          ];

          $scope.tableParams = new NgTableParams({dataset: $scope.data});

});
Solution

  • Try this

    <!DOCTYPE html>
<html>

<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css@3.3.6" />
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
    <script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('app', ['ngTable']);

        app.controller('myCtl', function($scope,NgTableParams) {
          
          $scope.data = [ 
          { uid: 'User 1', nm: 'Name 11111111111111111111x', ugr: 'Group 1'},
          { uid: 'User 2', nm: 'Name 222222222222222222x', ugr: 'Group 2'}
          ];
          
          $scope.tableParams = new NgTableParams({dataset: $scope.data});
          
      });
  </script>
  <style type="text/css">
    /* Styles go here */

    td p {
      text-overflow: ellipsis !important;
      overflow: hidden; 
      white-space: nowrap;
      width:30px;
  }
</style>
</head>

<body>
    <div ng-controller="myCtl" ng-app="app">
        <table ng-table="tableParams" class="table table-bordered table-hover">
            <tbody>
                <tr ng-repeat="u in data">
                    <td title="'User ID'" style="width:150px">{{ u.uid }}</td>
                    <td title="'Name'" ><p> {{ u.nm }}</p></td>
                    <td title="'Group'" style="width:200px">{{ u.ugr }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>