가벼운 반응 테이블 패키지

안녕하세요 여러분 :)

선택 가능한 행이 있는 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'은 해당 데이터의 테이블 헤더이며 필수입니다.

선택적 열 구성

너비: 각 열에 특정 너비를 할당할 수 있습니다

.

정렬 가능: 문자열인 경우 이 테이블에서 열 데이터를 정렬할 수 있습니다

.

sortFunc: 열의 데이터가 문자열이 아닌 경우 데이터 정렬 방법을 알고 있는 함수를 전달할 수 있습니다.

fixed: 가로 스크롤에 대한 열을 고정하려는 경우(첫 번째 열 또는 마지막 열에 대해서만 작동)

렌더링: 사용자 정의 구성 요소를 렌더링하려면 행(현재 행의 데이터) 및 인덱스(현재 행의 인덱스)를 가져오는 함수를 전달해야 하며 함수는 Cell 객체를 반환해야 합니다.

{
  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