가벼운 반응 테이블 패키지

안녕하세요 여러분 :)

선택 가능한 행이 있는 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

    좋은 웹페이지 즐겨찾기