Ma première bibliothèque dans NPM

Tableau des composants basé sur l'interface utilisateur matérielle.

C'est une idée née de nombreuses difficultés survenues lors de différentes implémentations dans différents logiciels

Cette planche a été testée uniquement en utilisant. React mais peut être utilisé dans différents outils

Documentation du tableau des matériaux

Matériel d'interface utilisateur

npm i table-component-mui-lib

Documentation NPM

Mise en œuvre vidéo

Tableau de référence

• dataSource Données visibles dans le tableau
• colonnes Colonne visible dans le tableau
• isCheckbox CheckBox est activé pour la sélection multiple dans les colonnes
• isRadioBox RadioBox est activé pour sélectionner uniquement un élément de la colonne
• selectedData Hooks Selected Data (cela permet aux données d'être utilisées dans le composant principal)
• setSelectedData Hooks Data pour sélectionner des données
• isPaginate true - false pour générer une pagination du tableau
• recherche Une zone de texte est activée pour rechercher dans le tableau
• isDowmload Vous permet d'activer le bouton pour télécharger le fichier Excel
• _styleColumn Style personnalisable pour les colonnes du tableau
• childreButton Boutons personnalisables sur la table

Colonnes de types de données

export interface HeadCell {
    disablePadding?: boolean;
    id?: keyof any;
    label?: string;
    numeric?: boolean;
    sort?: boolean;
    width?: number;
  }

Création de colonnes personnalisées

const column: HeadCell[] = [
  {
    id: 'id',
    numeric: false,
    disablePadding: false,
    label: 'ID',
    sort: true
  },
  {
    id: 'name',
    numeric: false,
    disablePadding: false,
    label: 'Name',
    sort: true
  },
  {
    id: 'username',
    numeric: false,
    disablePadding: false,
    label: 'User Name',
    sort: true
  },
  {
    id: 'email',
    numeric: false,
    disablePadding: false,
    label: 'Correo Eléctronico',
    sort: true
  },

]

Exemple de composant

`
importer { TableComponents, HeadCell } depuis 'table-component-mui-lib'

     <tablecomponents datasource="{dataSource" datasourceexcel="{dataTableFields.data" colonnes="{colonnes" ischeckbox="{faux}" isradiobox="{faux}" selecteddata="{données" s des setselecteddata="{hooks" de donn ispaginate recherche estdowmload initialselectionnumber="{5}" _stylecolumn="{{" backgroundcolor couleur childbutton="{(ligne :" n lequel> (
              <box sx="{{" affichage aligncontent>
                <grouperadio aria-labelledby="groupe de boutons radio contrôlés par démo" name="groupe-de-boutons-radio-contrôlés">
                   { }}
                             />}
                    onClick={(e : React.ChangeEvent<htmlinputelement> | any) => { }} // Garder les données du fil sélectionné}
                    étiquette=''
                  />
                </htmlinputelement></grouperadio>
                <iconbutton size="medium" sx="{{" mr>
                  <modifier>




          

            
        </modifier></iconbutton></box></tablecomponents>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!