# Des tableaux avec ng-material: md-table ![category](développement) ![tag](design) ![tag](angularjs) Il existe dans le monde javascript le module ng-table qui permet de gérer des tableaux. Le principal problème de ce module est l'intégration graphique avec ngmaterial: cela n'est pas génial. Il existe un module spécifique pour ngmatérial: *md-table* Ce qui est attendu de la mise en place d'un tableau: - gestion des colonnes - trie / filtre dynamique - pagination - export des données Environnement technique ----------------------- Afin de mettre en évidence le module **ng-table** nous allons utiliser un environnement docker ![201607011347_1.png](./upload/201607011347_1.png) Notre fichier docker-compose.yml ``` version: '2' services: front: build: front/. ports: - "80:80" volumes: - /root/test/data:/app ``` Le fichier dockerfile permettant l'intégration des modules angular ``` FROM nginx:1.9 COPY ./src/default.conf /etc/nginx/conf.d/default.conf RUN apt-get update && apt-get install -y \ git \ git-core \ nodejs \ npm RUN ln -s /usr/bin/nodejs /usr/bin/node RUN echo '{ "allow_root": true }' > /root/.bowerrc #################### application ############################################## RUN npm install -g bower RUN cd /usr/share/nginx/html && bower install angular-material RUN cd /usr/share/nginx/html && bower install angular-fontawesome RUN cd /usr/share/nginx/html && bower install angular-material-data-table RUN cd /usr/share/nginx/html && bower install ng-csv RUN mkdir /usr/share/nginx/html/app RUN ln -s /usr/share/nginx/html/app /app RUN chmod -R 777 /app VOLUME /app ``` La configuration du serveur nginx utilisé ``` server { listen 80; server_name localhost; location / { root /usr/share/nginx/html/app; index index.html index.htm; } location /bower_components { alias /usr/share/nginx/html/bower_components; } } ``` Pour lancer notre container ```bash docker-compose up -d ``` L'ensemble des fichiers html on la structure suivante ```html Test
``` notre fichier conf de données est le suivante ```json [ {"id":1, "nom":"nom1", "prenom":"prenom1"}, {"id":2, "nom":"nom2", "prenom":"prenom2"}, {"id":3, "nom":"nom3", "prenom":"prenom3"}, {"id":4, "nom":"nom4", "prenom":"prenom4"}, {"id":5, "nom":"nom5", "prenom":"prenom5"}, {"id":6, "nom":"nom6", "prenom":"prenom6"}, {"id":7, "nom":"nom7", "prenom":"prenom7"}, {"id":8, "nom":"nom8", "prenom":"prenom8"}, {"id":9, "nom":"nom9", "prenom":"prenom9"}, {"id":10, "nom":"nom10", "prenom":"prenom1"}, {"id":11, "nom":"nom11", "prenom":"prenom1"}, {"id":12, "nom":"nom12", "prenom":"prenom1"}, {"id":13, "nom":"nom13", "prenom":"prenom1"}, {"id":14, "nom":"nom14", "prenom":"prenom1"}, {"id":15, "nom":"nom15", "prenom":"prenom1"}, {"id":16, "nom":"nom16", "prenom":"prenom1"}, {"id":17, "nom":"nom17", "prenom":"prenom1"}, {"id":18, "nom":"nom18", "prenom":"prenom1"}, {"id":19, "nom":"nom19", "prenom":"prenom1"}, {"id":20, "nom":"nom20", "prenom":"prenom1"}, {"id":21, "nom":"nom21", "prenom":"prenom1"}, {"id":22, "nom":"nom22", "prenom":"prenom1"}, {"id":23, "nom":"nom23", "prenom":"prenom1"} ] ``` Un tableau simple ----------------- rien de vraiment compliqué ```html
id nom prénom
{{data.id}} {{data.nom}} {{data.prenom}}
``` Un tableau avec pagination -------------------------- ```html
id nom prénom
{{data.id}} {{data.nom}} {{data.prenom}}
``` Un tableau avec sélection simple -------------------------------- ```html
id nom prénom
{{data.id}} {{data.nom}} {{data.prenom}}
... $scope.getInit = function() { $scope.selected = []; $scope.query = { order: 'name', limit: 5, limitoptions: [5, 10, 15], page: 1 }; $http .get("./conf/data.json") .success(function(data, status, headers, config) { $scope.datas =data; }) .error(function(data, status, headers, config) { alert('error'); }); }; ``` Un tableau avec sélection multiple ---------------------------------- ```html
id nom prénom
{{data.id}} {{data.nom}} {{data.prenom}}
... $scope.getInit = function() { $scope.selected = []; $scope.query = { order: 'name', limit: 5, limitoptions: [5, 10, 15], page: 1 }; $http .get("./conf/data.json") .success(function(data, status, headers, config) { $scope.datas =data; }) .error(function(data, status, headers, config) { alert('error'); }); }; ``` Un tableau avec une barre de recherche -------------------------------------- ```html

Test

id nom prénom
{{data.id}} {{data.nom}} {{data.prenom}}
... $scope.getInit = function() { $scope.selected = []; $scope.query = { order: 'name', limit: 5, limitoptions: [5, 10, 15], page: 1 }; $scope.filter = { show: false, options: { debounce: 500 } }; $http .get("./conf/data.json") .success(function(data, status, headers, config) { $scope.datas =data; }) .error(function(data, status, headers, config) { alert('error'); }); }; $scope.onSelect = function () { for (var i = $scope.selected.length; i > 0; i--) { alert($scope.selected[i - 1].nom); }; } // init data $scope.getInit(); }); app.directive('focusOn', function($timeout) { return { restrict : 'A', link : function($scope, $element, $attr) { $scope.$watch($attr.focusOn, function(_focusVal) { $timeout(function() { if (_focusVal) { $element.focus(); } else { $element.blur(); } }); }); } } }); ``` Un tableau avec un export csv ----------------------------- Pour cela nous utilisons le module ng-csv ```html ...

Test

id nom prénom
{{data.id}} {{data.nom}} {{data.prenom}}
... var app = angular.module('MyAppli', ['picardy.fontawesome','ngMaterial', 'md.data.table', 'ngSanitize', 'ngCsv']); ``` Un tableau avec colonnes visibles ou pas ---------------------------------------- L'idée est de pouvoir sélectionner les colonnes à afficher ```html

Test

id

nom

prenom

id nom prénom
{{data.id}} {{data.nom}} {{data.prenom}}
... $scope.columns={ "id" : {"show": true}, "nom" : {"show": true}, "prenom" : {"show": false}, }; ``` Un tableau avec toutes les fonctionnalitées et dynamique -------------------------------------------------------- Cette fois ci le code est générique et prend en charge tous les tableaux ```html All functions

Test

{{ column.title}}

{{ column.title}}
{{ data[column.id]}}
``` Conclusion ---------- md-table (https://github.com/daniel-nagy/md-data-table) est un super module qui permet encore beaucoup de chose comme l'édition, module à intégrer dès que possible sur les projets.