가벼운 반응 테이블 패키지
3041 단어 webdevbeginnersreactjavascript
선택 가능한 행이 있는 reactJS에서 테이블을 만드는 것이 저에게 가장 큰 도전이었습니다. 그래서 저는 저를 돕는 가벼운 패키지를 만들기로 결정했습니다.
온라인에서 스토리북Here을 방문할 수 있습니다.
NPM을 통해 설치
npm install --save react-custable
구성, 열 및 데이터에 대해 두 개의 변수만 필요합니다.
import { Table } from 'react-custable';
//the fieldName should be as same as data's key
const column = [
{ fieldName: 'name', title: 'Name', width: '180px', sortable: true },
{ fieldName: 'email', title: 'Email', width: '180px', sortable: true },
];
const data = [
{ id: '1', name: 'name one', email: '[email protected]' },
{ id: '2', name: 'name two', email: '[email protected]' },
];
<div className="App">
<Table columns={columns} data={data} />
</div>;
기둥 소품이 무엇인가요?
'fieldName'은 데이터의 키 이름이고 'title'은 해당 데이터의 테이블 헤더이며 필수입니다.
선택적 열 구성
{
value: React.ReactNode,
props: { [key: string]: string }, //props will be applied to td elemenet like colspan
}
옵션
유형
설명
분야 명*
끈
데이터 키
제목*
끈
열 머리글 제목
너비
문자열(px)
열 너비(기본값은 자동)
결정된
문자열('왼쪽' 또는 '오른쪽')
열을 고정하기 위해
정렬 가능
부울
기본값은 거짓입니다.
sortFunc
( a , b ) => 숫자
정렬 함수는 a < b 일 때 -1, a > b 일 때 1, a = b 일 때 0을 반환해야 합니다.
세우다
(행, 인덱스) => 셀
셀에서 사용자 지정 구성 요소 렌더링
이전에 보았듯이 'data'와 'column'은 테이블에서 필수사항이지만 테이블에서 선택사항인 것은 무엇인지 알아보겠습니다.
옵션
유형
설명
열*
열[]
열의 배열
데이터*
{ id:문자열, ... }[]
데이터 배열
isSelectable
부울
행에 대한 확인란을 활성화하려면
selectRowHandler
(selectedRowIds) => 무효
콜백 함수는 선택된 행 ID를 수신합니다.
선택된 행키
끈[]
선택한 행의 기본값
쪽수 매기기
{ 현재 페이지: 번호; totalCount: 숫자; pageLimit: 숫자; }
테이블 페이지 매김 값
pageChangeHandler
(pageNumner: 숫자) => 무효
핸들 페이지 변경에 대한 콜백
행 클릭 핸들러
(행: 행) => 무효
핸들 행 클릭에 대한 콜백
쇼로드 중
부울
테이블 위에 스피너 표시
기여하다
이것은 내 패키지의 첫 번째 버전이므로 자유롭게 기여하십시오.
https://github.com/barzin144/react-custable
Reference
이 문제에 관하여(가벼운 반응 테이블 패키지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/barzin144/a-light-react-table-package-1888텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)