Table

Le composant Table est un tableau d'elements.
Pour le créer il faut déclarer un certain nombre d'elements.

Le composant Table.Root possède 5 props principale :

• getRows : La fonction qui récupere les informations coté serveur ou client

• onClick : La fonction qui permet de definir le comportement au clique d'un des element de la table

• tableId : Il contient un nom unique par lequel la table vas pouvoir dans le localstorage stocké les données utilisateur.

• columns : La configuration des colonne

• version : La version, quand vous faite des modification sur la configuration columns il faut la changer pour que le localstorage de l'utilisateur si il y en a n'entre pas en conflit.

getRows

Cette fonction prend 5 paramètres :

• globalSearch : C'est un string qui contient la recherche global vous pouvez si vous souhaité ajouter la props hasGlobalSearch sur le composant Table.ActionsBar afin d'activer la recherche global.
  Cela ajoutera un champ recherche. sur votre bar d'action.

• filters : un objet de clé valeur en clé le nom de la colonne ou dans le cas d'une date se sera le nom de la colonne suivie de "_after" ou "_before" et en valeur la valeur du filtre si l'utilisateur clique sur la colonne name par exemple et ecris "test" alors getRows va etre apeller et filters contiendra {name : "test"}.

• sort : un objet de clé valeur en clé le nom de la colonne et en valeur la valeur soit "DESC" ou "ASC" il n'y a qu'une seul colonne trié a la fois. si une colonne est trié vers le bas par exemple la colonne id alors sort contiendra {id:"DESC"}

• limit : il contient le nombre d'element a afficher sur une page par defaut 20 il peut etre altéré via la props limit du composant Table.Root

• offset : c'est l'offset en fonction de la limit et de la page un offset sera passé en paramètre ce parametre avec limit permet de récuperer les elements d'une page du table coté serveur via sql par exemple.

onClick

La fonction onClick est executé au clique d'un element et transmet en parametre les données de l'element cliqué.

columns

C'est un array d'objet chaque objet correspond a une colonne et peux contenir des clé permetant de definir l'affichage et le comportement de celui-ci voici la liste des clé possible :

• name : le nom de la colonne c'est par celui-ci que il appliquer un sort ou un filter et c'est par celui-ci qu'ont attribue une valeur.

• label : le nom qui sera affiché a l'utilisateur

• isSearchable : est ce qu'il possede un champs de recherche

• isSortable : est ce qu'il peut etre trié

• initialWidth : sa largeur par defaut

• searchChoices : les possibilité de filtre cette props permet de contraindre l'utilisateur a plusieur choix il contient un array d'objet contenant en clé value et label la value c'est la valeur envoyé dans le parametre filter de la fonction getRows et le label c'est le texte affiché.

• datePicker : si il est true se sera un datePicker qui servira de filtre. il y aura un DatePicker apres et avant du coup il envera le filtre avec en clé "{nom de la colonne}_after" ou "{nom de la colonne}_before"

Import

./CategoryTable

./CategoryStateTag