Meine erste Bibliothek in NPM

Komponententabelle basierend auf der Material-Benutzeroberfläche.

Es ist eine Idee, die aus vielen Schwierigkeiten entstand, die bei verschiedenen Implementierungen in unterschiedlicher Software auftraten

Dieses Board wurde nur mit getestet. Reagieren, kann aber in verschiedenen Tools verwendet werden

Materialtabellendokumentation

UI-Material

npm i table-component-mui-lib

NPM-Dokumentation

Video-Umsetzung

Referenztabelle

• dataSourceIn der Tabelle sichtbare Daten
• SpaltenIn der Tabelle sichtbare Spalte
• isCheckbox CheckBox ist für die Mehrfachauswahl in Spalten aktiviert
• isRadioBox RadioBox ist aktiviert, um nur ein Element aus der Spalte auszuwählen
• selectedData Hooks für ausgewählte Daten (dadurch können die Daten in der Hauptkomponente verwendet werden)
• setSelectedData Hooks Data, um Daten auszuwählen
• isPaginate true – false, um eine Paginierung der Tabelle zu generieren
• Suche Eine TextBox ist für die Suche innerhalb der Tabelle aktiviert
• isDowmload Ermöglicht die Aktivierung der Schaltfläche zum Herunterladen einer Excel-Datei
• _styleColumn Anpassbarer Stil für die Tabellenspalten
• childreButtonAnpassbare Schaltflächen auf dem Tisch

Datentypspalten

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

Benutzerdefinierte Spaltenerstellung

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
  },

]

Komponentenbeispiel

`
importiere { TableComponents, HeadCell } aus 'table-component-mui-lib'

     <TableComponents
            dataSource={dataSource ?? []}
            dataSourceExcel={dataTableFields.data ?? []}
            columns={columns ?? []}
            isCheckbox={false}
            isRadioBox={false}
            selectedData={ausgewählte Daten aus den Spalten}
            setSelectedData={Hooks zur Datenauswahl}
            istPaginieren
            suchen
            isDownload
            initialSelectionNumber={5}
            _styleColumn={{backgroundColor: `#cdcd`, color: '#000' }}
            childreButton={(row: any) => (
              <Box sx={{ display: 'flex', gap: 1, alignContent: 'center' }}>
                <RadioGroup
                  aria-labelledby='demo-controlled-radio-buttons-group'
                  name='controlled-radio-buttons-group'
                >
                  <FormControlLabel
                    sx={{ ml: 1 }}
                    control={<Radio
                      color='Erfolg'
                      geprüft={boolean}
                      onClick={() => { }}
                             />}
                    onClick={(e: React.ChangeEvent<HTMLInputElement> | any) => { }} // Guarda los datos de la fila selectionada}
                    label=''
                  />
                </RadioGroup>
                <IconButton size='medium' sx={{ mr: 1 }}>
                  <Bearbeiten
                   >




          

            
        

Das obige ist der detaillierte Inhalt vonMeine erste Bibliothek in NPM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!