Tabla de cuadrícula en AngularJS

Rana Hasnain Khan 15 febrero 2024

Angular Angular Table

Presentaremos ui-grid con ui-bootstrap pagination para crear tablas de datos en AngularJS.

Crear tabla de cuadrícula en AngularJS

Las tablas de cuadrícula o tablas de datos son una forma poderosa de representar una gran cantidad de datos para que sean fáciles de usar. Los usuarios pueden ordenar los datos según sus necesidades sin cambiar los datos originales.

Crearemos un objeto con algunos datos de empleados y usaremos estos datos para mostrar en tablas de cuadrícula usando ui-grid. Comencemos creando un nuevo archivo, script.js, en el que definiremos nuestro módulo y controlador como se muestra a continuación.

# angular
angular.module('MyApp')
    .controller('TableController', ['uiGridConstants', TableController]);

Dentro de nuestro módulo, definiremos algunas bibliotecas que usaremos.

# angular
angular.module('MyApp', [
      'ui.grid',
      'ui.grid.pagination',
      'ui.bootstrap'
    ]);

Usando nuestro controlador, TableController, definiremos nuestro objeto que contendrá algunos datos de muestra.

# angular
function TableController() {
    var data = this;

    data.someData = [
          {
        "id": "1",
        "firstName": "Tom",
        "lastName": "Cruise"
      },
      {
        "id": "2",
        "firstName": "Maria",
        "lastName": "Sharapova"
      },
      {
        "id": "3",
        "firstName": "James",
        "lastName": "Bond"
      }
      ];
      }

Después de crear nuestro objeto, definiremos algunas opciones de cuadrícula y nuestro código en script.js.

# angular
(function() {

  function TableController() {
    var data = this;

    data.someData = [
          {
        "id": "1",
        "firstName": "Tom",
        "lastName": "Cruise"
      },
      {
        "id": "2",
        "firstName": "Maria",
        "lastName": "Sharapova"
      },
      {
        "id": "3",
        "firstName": "James",
        "lastName": "Bond"
      }
      ];

    data.gridOptions = {
      paginationPageSize: 10,
      enablePaginationControls: false,
      data: data.someData
    }
  }

  angular.module('MyApp', [
      'ui.grid',
      'ui.grid.pagination',
      'ui.bootstrap'
    ]);

  angular.module('MyApp')
    .controller('TableController', ['uiGridConstants', TableController]);

})()

Ahora comenzaremos a desarrollar nuestro front-end en el archivo index.html. Primero, vinculamos el nombre de nuestra aplicación usando ng-app e importamos algunas bibliotecas usando el script a continuación.

Código:

# angular
<!DOCTYPE html>
<html ng-app="MyApp">

  <head>
    <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 href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" data-semver="0.13.1" data-require="ui-bootstrap@0.13.1" />
    <link data-require="ui-grid@3.0.1" data-semver="3.0.1" rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.1/ui-grid.min.css" />
    <script data-require="ui-grid@3.0.1" data-semver="3.0.1" src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.1/ui-grid.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js" data-semver="0.14.3" data-require="ui-bootstrap-tpls@0.14.3"></script>
    <script src="script.js"></script>
  </head>
  </html>

Dentro de nuestro cuerpo, vincularemos nuestro controlador y usaremos nuestro controlador con ui-grid y ui-bootstrap para crear una tabla de datos. También definiremos opciones como botones para siguiente y anterior, como se muestra a continuación.

<body ng-controller="TableController as ctrl">
    <h1>Grid Table Example By Rana Hasnain</h1>
    <div>

      <uib-pagination total-items="ctrl.someData.length"
        ng-model="ctrl.gridOptions.paginationCurrentPage"
        items-per-page="ctrl.gridOptions.paginationPageSize"
        boundary-links="true"
        direction-links="true"
        max-size="3"
        first-text="<<"
        previous-text="<"
        next-text=">"
        last-text=">>"
        rotate="true"></uib-pagination>

      <div id="myGrid" ui-grid="ctrl.gridOptions" class="grid" ui-grid-pagination></div>
    </div>

Producción:

tabla de cuadrícula en Angularjs

Ejecutar código

Usando las bibliotecas ui-grid y ui-bootstrap, podemos convertir fácilmente un objeto que contiene algunos datos en una hermosa tabla de datos que puede mostrar los datos para que sea más fácil de entender y fácil de usar.

Autor: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

Crear tabla de cuadrícula en AngularJS

Artículo relacionado - Angular Table