# Des tableaux avec angularjs: ng-table ![category](développement) ![tag](design) ![tag](angularjs) Il existe un module angular nommé **ng-table** permettant de gérer la création et l'utilisation d'un tableau sur une page web. 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 ![201606201355_1.png](./upload/201606201355_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 ng-table RUN cd /usr/share/nginx/html && bower install ng-table-export 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 ``` Les fichiers css et de donnée ----------------------------- Afin de simplifier nos fichiers html les données du tableau seront chargées via un fichier json nommé *data.json* ```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"} ] ``` Au niveau css nous avons ajouté la gestion du bouton ```css .to-bottom-right { position:fixed; bottom:10px; right:10px; z-index: 99 !important; } .to-bottom-left { position:fixed; bottom:10px; left:10px; z-index: 99 !important; } .to-top-right { position:fixed; top:10px; right:10px; z-index: 99 !important; } .to-top-left { position:fixed; top:10px; left:10px; z-index: 99 !important; } ``` Tableau simple et export csv ---------------------------- Cette exemple permet d'avoir à partir de donnée un tableau avec un bouton d'export au format csv ```html Sample1
{{data.id}} {{data.nom}} {{data.prenom}}
``` Gestion de filtre et trie ------------------------- Cet exemple rajoute la possibilité de faire des filtres et des tries ```html Sample2
{{data.id}} {{data.nom}} {{data.prenom}}
``` ```warning Afin d'un visuel joli il faut ajouter le css de bootstrap ... ce qui pose problème quand on souhaite travailler avec ngmaterial !!! Il faut y faire attention```