NPM의 첫 번째 라이브러리

머티리얼 UI 기반 컴포넌트 테이블

다른 소프트웨어에서 다른 구현으로 인해 발생하는 많은 어려움에서 나온 아이디어입니다

이 보드는 다음을 사용하여 테스트되었습니다. 반응하지만 다양한 도구에서 사용할 수 있습니다

재료 테이블 문서화

UI 소재

npm i table-component-mui-lib

NPM 문서

영상 구현

참고표

• dataSource 테이블에 표시되는 데이터
• 열 테이블에 표시되는 열
• isCheckbox CheckBox는 열에서 다중 선택이 가능합니다
• isRadioBox RadioBox는 열의 요소만 선택할 수 있도록 활성화되어 있습니다
• selectedData 선택한 데이터를 후크합니다(이를 통해 데이터를 메인 구성 요소에서 사용할 수 있음)
• setSelectedData 데이터를 연결하여 데이터 선택
• isPaginate true - 테이블의 페이지 매기기를 생성하려면 false
• 검색 테이블 내에서 검색할 수 있는 textBox가 활성화되어 있습니다
• isDowmload Excel 파일을 다운로드하는 버튼을 활성화할 수 있습니다
• _styleColumn 테이블 열에 대한 사용자 정의 스타일
• childreButton 테이블의 사용자 정의 버튼

데이터 유형 열

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

사용자 정의 열 생성

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

]

구성요소 예시

`
'테이블 구성요소-mui-lib'에서 { TableComponents, HeadCell } 가져오기

     <테이블 구성 요소
            데이터소스={데이터소스 ?? []}
            dataSourceExcel={dataTableFields.data ?? []}
            열={열 ?? []}
            isCheckbox={false}
            isRadioBox={false}
            selectedData={컬럼별 데이터 선택}
            setSelectedData={데이터 선택 후크}
            isPaginate
            찾다
            is다운로드
            초기선택번호={5}
            _styleColumn={{ backgroundColor: `#cdcd`, 색상: '#000' }}
            childreButton={(행: 임의) => (
              <Box sx={{ display: 'flex', gap: 1, alignContent: 'center' }}>
                <라디오그룹
                  aria-labelledby='데모 제어 라디오 버튼 그룹'
                  name='제어 라디오 버튼 그룹'
                >
                  <FormControlLabel
                    sx={{ ml: 1 }}
                    control={<라디오
                      색상='성공'
                      확인됨={부울}
                      onClick={() => { }}
                             />}
                    onClick={(e: React.ChangeEvent<HTMLInputElement> | any) => { }} // Guarda los datos de la fila seleccionada}
                    라벨=''
                  />
                </라디오그룹>
                <IconButton 크기='중간' sx={{ mr: 1 }}>
                  <편집
                   >




          

            
        

위 내용은 NPM의 첫 번째 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!