Perpustakaan pertama saya di NPM

Jadual Komponen berdasarkan UI Bahan.

Ia adalah idea yang datang daripada banyak kesukaran yang timbul dalam pelaksanaan yang berbeza dalam perisian yang berbeza

Papan ini hanya diuji menggunakan. Bertindak balas tetapi boleh digunakan dalam alatan yang berbeza

Dokumentasi Jadual Bahan

Bahan UI

npm i table-component-mui-lib

Dokumentasi NPM

Pelaksanaan video

Jadual Rujukan

• Sumber data Data boleh dilihat dalam jadual
• lajur Lajur kelihatan dalam jadual
• isCheckbox CheckBox didayakan untuk berbilang pilihan dalam lajur
• isRadioBox RadioBox didayakan untuk memilih elemen sahaja daripada lajur
• selectedData Cangkuk Data Terpilih (ini membolehkan data digunakan dalam komponen utama)
• setSelectedData Cangkuk Data untuk memilih data
• isPaginate true - false untuk menjana penomboran jadual
• carian Kotak teks didayakan untuk mencari dalam jadual
• isDowmload Membolehkan anda mendayakan butang untuk memuat turun fail excel
• _styleColumn Gaya boleh disesuaikan untuk lajur jadual
• childreButton Butang yang boleh disesuaikan di atas meja

Lajur Jenis Data

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

Penciptaan Lajur Tersuai

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

]

Contoh Komponen

`
import { TableComponents, HeadCell } daripada 'table-component-mui-lib'

     <Komponen Jadual
            dataSource={dataSource ?? []}
            dataSourceExcel={dataTableFields.data ?? []}
            lajur={lajur ?? []}
            isCheckbox={false}
            isRadioBox={false}
            selectedData={data seleccionada de las columnas}
            setSelectedData={hooks de selección de data}
            isPaginate
            cari
            isDowmload
            initialSelectionNumber={5}
            _styleColumn={{ backgroundColor: `#cdcd`, color: '#000' }}
            childreButton={(baris: mana-mana) => (
              <Kotak sx={{ paparan: 'flex', gap: 1, alignContent: 'center' }}>
                <RadioGroup
                  aria-labelledby='kumpulan-butang-radio-terkawal-demo'
                  name='controlled-radio-buttons-group'
                >
                  <FormControlLabel
                    sx={{ ml: 1 }}
                    control={<Radio
                      color='kejayaan'
                      checked={boolean}
                      onClick={() => { }}
                             />}
                    onClick={(e: React.ChangeEvent<HTMLInputElement> | mana-mana) => { }} // Guarda los datos de la fila seleccionada}
                    label=''
                  />
                </RadioGroup>
                <IconButton size='medium' sx={{ mr: 1 }}>
                  <Edit
                   >




          

            
        

Atas ialah kandungan terperinci Perpustakaan pertama saya di NPM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!