ui.grid en template.md

para agregar esta ui.grid

1. en el app.js agregar

  'ui.grid',
  'ui.grid.selection',
  'ui.grid.autoResize',

2. en la vista, el componente es

  <div id="grid1" ui-grid="gridOptions" ui-grid-selection ui-grid-auto-resize class="grid"></div>

gridOptions debe estar en el controller de la vista, y contiene las opciones de renderizado y datos de la tabla ui-grid-selection agrega una columna con checks para seleccionar la fila, de ser necesario, sino sacas eso y listo ui-grid-auto-resize es requerido para que se muestre correctamente

3. en el controller inicializo los valores de gridOptions en un init o algo que se cargue al inicio

    $scope.gridOptions = {
        rowHeight: 35,
        enableRowSelection: true,
        enableFullRowSelection: true,
        enableSelectAll: true,
        enableFiltering: true,
        columnDefs: [
            {field: 'nombreCorto', displayName: 'Estructura', enableColumnMenu: false},
            {field: 'anioEstudio', displayName: 'Año de estudio', enableColumnMenu: false},
            {field: 'grupoAlumno', displayName: 'Seccion', enableColumnMenu: false},
            {field: 'turno', displayName: 'Turno', enableColumnMenu: false},
            {field: 'tipoGrupoAlumno', displayName: 'Tipo', enableColumnMenu: false}
        ],
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
        }
    };

4. como mostrar datos en la tabla obtenidos mediante un metodo de un service

  llamarMetodoQueBuscaDatosEnElService(conEstos,parametros).then(function (datosQueDevolvioElService){
    $scope.gridOptions.data = $scope.secciones;
  }

5. como obtener filas seleccionadas del grid

$scope.filasSeleccionadas = $scope.gridApi.selection.getSelectedRows();

6. filtrar usando combos

    <!-- la columna 1 es la primera luego del check de seleccion, si no uso check de seleccion, empieza por el 0-->
    <select class="md-input h5" ng-model="gridApi.grid.columns[1].filters[0].term">
        <option value="{{undefined}}">Todas</option>
        <option ng-repeat="seccion in secciones| unique:'nombreCorto'">{{seccion.nombreCorto}}</option>
    </select>

7. estilo: para que oculte los campos de filtrado embebidos, especificar en custom.css

  .ui-grid-filter-container { display: none!important; }