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électionnées des colonnes}
            setSelectedData={hooks de sélection de données}
            isPaginate
            recherche
            estDowmload
            initialSelectionNumber={5}
            _styleColumn={{ backgroundColor : `#cdcd`, couleur : '#000' }}
            childButton={(ligne : n'importe lequel) => (
              <Box sx={{ affichage : 'flex', écart : 1, alignContent : 'center' }}>
                <GroupeRadio
                  aria-labelledby='groupe de boutons radio contrôlés par démo'
                  name='groupe-de-boutons-radio-contrôlés'
                >
                  <ÉtiquetteContrôleFormulaire
                    sx={{ ml : 1 }}
                    contrôle={<Radio
                      couleur='succès'
                      vérifié={booléen}
                      onClick={() => { }}
                             />}
                    onClick={(e : React.ChangeEvent<HTMLInputElement> | any) => { }} // Garder les données du fil sélectionné}
                    étiquette=''
                  />
                </GroupeRadio>
                <IconButton size='medium' sx={{ mr : 1 }}>
                  <Modifier
                   >




          

            
        

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!