홈페이지>프로그래밍 관련>기타 소스코드
다운로드

반응 그리드 테이블

빠른 구성과 심층적인 사용자 정의에 최적화된 CSS 그리드 레이아웃을 기반으로 하는 모듈식 테이블입니다.

지원되는 기능:

  • 비동기 지원
  • 열을 기준으로 정렬
  • 열 크기 조정
  • 열 재정렬
  • 하이라이트로 검색
  • 쪽수 매기기
  • 행 선택
  • 인라인 행 편집
  • 열 고정(사전 구성됨)
  • 컬럼 가시성 관리
  • 가상 스크롤
  • 고정 헤더
  • 동적 행 높이

라이브 데모

데모

설치하다 

npm i @nadavshaar/react-grid-table

용법

기본적으로 테이블은 행과 열의 기본 구성만으로도 모든 기능을 갖추고 있습니다.

예: 

 import React from "react" ;
import GridTable from '@nadavshaar/react-grid-table' ;

// custom cell component
const Username = ( { tableManager , value , field , data , column , colIndex , rowIndex } ) => {
    return (
        < div className = 'rgt-cell-inner' style = { { display : 'flex' , alignItems : 'center' , overflow : 'hidden' } } >
            < img src = { data . avatar } alt = "user avatar" / >
            < span className = 'rgt-text-truncate' style = { { marginLeft : 10 } } > { value } < / span >
        < / div >
    )
}

const rows = [
    { 
        "id" : 1 , 
        "username" : "wotham0" , 
        "gender" : "Male" , 
        "last_visited" : "12/08/2019" , 
        "test" : { "x" : 1 , "y" : 2 } , 
        "avatar" : "https://robohash.org/atquenihillaboriosam.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 2 , 
        "username" : "dbraddon2" , 
        "gender" : "Female" , 
        "last_visited" : "16/07/2018" , 
        "test" : { "x" : 3 , "y" : 4 } , 
        "avatar" : "https://robohash.org/etsedex.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 3 , 
        "username" : "dridett3" , 
        "gender" : "Male" , 
        "last_visited" : "20/11/2016" , 
        "test" : { "x" : 5 , "y" : 8 } , 
        "avatar" : "https://robohash.org/inimpeditquam.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 4 , 
        "username" : "gdefty6" , 
        "gender" : "Female" , 
        "last_visited" : "03/08/2019" , 
        "test" : { "x" : 7 , "y" : 4 } , 
        "avatar" : "https://robohash.org/nobisducimussaepe.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 5 , 
        "username" : "hbeyer9" , 
        "gender" : "Male" , 
        "last_visited" : "10/10/2016" , 
        "test" : { "x" : 2 , "y" : 2 } , 
        "avatar" : "https://robohash.org/etconsequatureaque.jpg?size=32x32&set=set1"
    }
] ;

const columns = [
    {
        id : 1 , 
        field : 'username' , 
        label : 'Username' ,
        cellRenderer : Username ,
    } , 
    {
        id : 2 , 
        field : 'gender' , 
        label : 'Gender' ,
    } ,
    {
        id : 3 , 
        field : 'last_visited' , 
        label : 'Last Visited' ,
        sort : ( { a , b , isAscending } ) => {
            let aa = a . split ( '/' ) . reverse ( ) . join ( ) ,
            bb = b . split ( '/' ) . reverse ( ) . join ( ) ;
            return aa < bb ? isAscending ? - 1 : 1 : ( aa > bb ? isAscending ? 1 : - 1 : 0 ) ;
        }
    } ,
    {
        id : 4 , 
        field : 'test' , 
        label : 'Score' ,
        getValue : ( { value } ) => value . x + value . y
    }
] ;

const MyAwesomeTable = ( ) => < GridTable columns = { columns } rows = { rows } / > ;

export default MyAwesomeTable ;

문서

목차

  • 주요 구성품
  • 소품
  • 구성 소품
  • 이벤트 소품
  • 비동기 소품
  • columns 소품
  • checkbox 열
  • rows 소품
  • components 소품
  • additionalProps 소품
  • tableManager API
  • 방법: 동기화/비동기
  • 방법: 행 편집
  • 방법: 스타일링

이 패키지를 지원하세요

주요 구성품

HEADER(선택 사항 | 사용자 정의 가능): 검색 및 열 가시성 관리.

TABLE-HEADER: 정렬, 크기 조정 및 열 재정렬.

TABLE-BODY: 데이터 표시/로더/결과 없음, 행 편집 및 행 선택.

FOOTER(선택 사항 | 사용자 정의 가능): 행 정보, 페이지당 행 및 페이지 매기기.

소품

이름 유형 설명 기본값
열* 객체 배열 열 구성(세부정보) [ ]
행 객체 배열 행 데이터(세부정보) [ ]
selectedRowsIds ID 배열 선택한 모든 행의 ID(세부정보) [ ]
검색텍스트 끈 검색할 텍스트 ""
getIsRowSelectable 기능 현재 행에 대한 행 선택이 선택 가능해야 하는지 아니면 비활성화되어야 하는지를 반환하는 콜백 함수 row => true
getIsRow편집 가능 기능 현재 행에 대한 행 편집이 허용되어야 하는지 여부를 반환하는 콜백 함수 row => true
행 ID 편집 어느 인라인 편집 모드로 전환해야 하는 행의 ID(행 편집에 대한 자세한 내용) null
페이지 숫자 현재 페이지 번호 1
페이지 크기 숫자 선택한 페이지 크기 20
종류 물체 정렬 구성. 정렬해야 하는 열의 ID로 colId 허용하고 정렬 방향을 정의하기 위해 isAsc 허용합니다. 예: { colId: 'some-column-id', isAsc: true } , 정렬을 해제하려면 colId null 로 전달하기만 하면 됩니다. { }
로드 중 부울 로더 표시 여부 거짓

구성 소품

이름 유형 설명 기본값
rowId필드 끈 행 식별자로 사용해야 하는 행 데이터의 필드 이름은 고유 해야 합니다. 'ID'
minColumnResizeWidth 숫자 크기를 조정하는 동안 모든 열의 최소 너비('체크박스' 열에는 적용되지 않음) 70
minSearchChars 숫자 검색이 적용되기 전에 입력해야 하는 최소 문자 2
isHeaderSticky 부울 스크롤할 때 테이블 머리글 셀이 맨 위에 고정되는지 여부 진실
페이지 매김됨 부울 페이지 매김 컨트롤을 바닥글에 표시할지 여부와 행 데이터를 페이지로 분할해야 하는지 결정 진실
활성화열재정렬 부울 위치 변경을 위해 열 드래그 앤 드롭을 허용할지 여부 진실
하이라이트검색 부울 검색어를 강조할지 여부 진실
표시검색 부울 헤더에 검색 구성 요소를 표시할지 여부 진실
showRows정보 부울 행 정보 구성 요소 표시 여부(바닥글 왼쪽에 위치) 진실
showColumnVisibilityManager 부울 컬럼 가시성 관리 버튼 표시 여부(헤더 오른쪽 상단에 위치) 진실
페이지 크기 숫자 배열 페이지 크기 옵션 [20, 50, 100]
isVirtualScroll 부울 성능 향상을 위해 가상 스크롤에 항목을 렌더링할지 여부(페이지에 행이 많을 때 유용함) 진실
모든 모드 선택 끈 "모든 선택" 유형을 제어합니다. 사용 가능한 옵션은 현재 페이지의 행만 선택/선택 해제하는 page 또는 모든 페이지의 모든 행을 선택/선택 해제하는 all 입니다. 비동기 흐름을 사용하는 경우 all 옵션은 사용 가능한 모든 행을 선택하고, page 옵션은 batchSize 와 결합되어 페이지에서 사용 가능한 모든 행을 선택/선택 취소합니다. '페이지'
아이콘 노드의 객체 사용자 정의 아이콘 구성 { sortAscending, sortDescending,clearSelection, columnVisibility, 검색, 로더 }
텍스트 물체 모든 UI 텍스트에 대한 구성으로 번역이나 텍스트 사용자 정의에 유용합니다. { 검색: '검색:', totalRows: '총 행:', 행: '행:', 선택됨: '선택됨',rowPerPage: '페이지당 행 수:', 페이지: '페이지:', of: 'of' , prev: '이전', next: '다음', columnVisibility: '열 표시 여부' }
구성 요소 물체 이 소품은 내부 구성 요소를 사용자 정의 구성 요소로 재정의할 수 있는 기능을 제공합니다(지원되는 구성 요소의 전체 목록 참조) { 기본 구성 요소 }
추가소품 물체 이 prop은 테이블의 구성요소/모듈에 prop을 전달하는 기능을 제공합니다(지원되는 추가Props의 전체 목록 참조). additionalProps={{ header: { ... } }}

이벤트 소품

이름 유형 설명 용법
onColumnsChange 기능 columns 변경되면 트리거됩니다. columns => { ... }
onSelectedRowsChange 기능 행 선택이 변경되면 트리거됩니다. selectedRowsIds => { ... }
onPageChange 기능 페이지가 변경될 때 트리거됩니다. nextPage => { ... }
onPageSizeChange 기능 페이지 크기가 변경되면 트리거됩니다. newPageSize => { ... }
onSearchTextChange 기능 검색 텍스트가 변경되면 트리거됩니다. searchText => { ... }
정렬변경 기능 정렬이 변경되면 트리거됩니다. ({colId, isAsc}) => { ... }
onRowClick 기능 행을 클릭하면 트리거됩니다. ({ rowIndex, data, column, isEdit, event }, tableManager) => { ... }
onEditRowIdChange 기능 rowEditId 변경되면 트리거됩니다. rowEditId => { ... }
로드 시 기능 tableManager 초기화될 때 트리거됩니다(세부사항). tableManager => { ... }
onColumnResizeStart 기능 열 크기 조정이 시작될 때 트리거됩니다. ({event, target, column}) => { ... }
onColumnResize 기능 열 크기 조정이 발생할 때 트리거됩니다. ({event, target, column}) => { ... }
onColumnResizeEnd 기능 열 크기 조정이 종료되면 트리거됩니다. ({event, target, column}) => { ... }
onColumnReorderStart 기능 열 드래그 시 트리거됩니다. onSortStart 소품을 사용하여 React-sortable-hoc에서 제공하는 정렬 데이터 (sortData, tableManager) => { ... }
onColumnReorderEnd 기능 열이 놓일 때 트리거되며 열 위치가 변경된 경우에만 트리거됩니다. onSortEnd prop을 사용하여 React-sortable-hoc에서 제공하는 정렬 데이터 (sortData, tableManager) => { ... }

비동기 소품

이름 유형 설명 사용법/기본값
onRowsRequest 기능 새 행을 가져와야 할 때 트리거됩니다. 예를 참조하세요
행변경 기능 행이 변경되면 트리거됩니다. 예를 참조하세요
onTotalRowsChange 기능 총 행 수가 변경되면 트리거됩니다. 예를 참조하세요
onRowsReset 기능 누적된 행을 재설정해야 할 때 트리거됩니다(검색 또는 정렬 시). 예를 참조하세요
배치 크기 숫자 onRowsRequest 소품이 요청할 행의 양을 정의합니다. 테이블의 페이지 크기
요청디바운스시간 초과 숫자 onRowsRequest prop을 트리거하기 위한 디바운싱 시간을 정의합니다. 300
총 행 숫자 총 행 수 ---

소품 - 상세

기둥

유형: 객체 배열.

이 소품은 열 구성을 정의합니다.

각 열('체크박스' 열 제외)은 다음 속성을 지원합니다.

이름 유형 설명 기본값
ID* 어느 열의 고유 식별자입니다. '체크박스'로 설정하면 행 선택 열이 생성됩니다(체크박스 열에 대한 자세한 내용). ---
필드 끈 행 데이터와 같은 필드 이름 ---
상표 끈 헤더 셀에 표시할 레이블 field 속성
고정된 부울 열이 측면에 고정되는지 여부 (첫 번째 및 마지막 열에서만 지원됨) 거짓
보이는 부울 열 표시 여부 진실
클래스 이름 끈 모든 열 셀에 대한 사용자 정의 클래스 선택기 ""
너비 끈 그리드 값의 열 초기 너비(전체 값 목록) "200px"
최소 크기 조정 너비 숫자 크기를 조정할 때 열의 최소 너비 minColumnResizeWidth 소품
최대 크기 조정 너비 숫자, 널 크기를 조정할 때 열의 최대 너비 null
getValue 기능 셀 값을 가져오는 데 사용됩니다(셀 값이 문자열이 아닌 경우 유용함 - 세부정보) ({value, column}) => value
세트값 기능 셀 값을 업데이트하는 데 사용됩니다(셀 값이 문자열이 아닌 경우 유용함 - 세부정보) ({ value, data, setRow, column }) => { setRow({ ...data, [column.field]: value}) }
검색 가능 부울 해당 열에 검색 필터링을 적용할지 여부 진실
편집 가능 부울 열 편집을 허용할지 여부 진실
정렬 가능 부울 열에 대한 정렬 허용 여부 진실
크기 조정 가능 부울 열 크기 조정을 허용할지 여부 진실
찾다 기능 해당 열에 대한 검색 기능 ({value, searchText}) => value.toString().toLowerCase().includes(searchText.toLowerCase())
종류 기능 열에 대한 정렬 기능 ({a, b, isAscending}) => { let aa = typeof a === 'string' ? a.toLowerCase() : a; let bb = typeof b === 'string' ? b.toLowerCase() : b; if(aa > bb) return isAscending ? 1 : -1; else if(aa < bb) return isAscending ? -1 : 1; return 0; }
셀렌더러 기능 셀 구성 요소 ({ tableManager, value, data, column, colIndex, rowIndex }) => ( children ) 의 사용자 정의 렌더링에 사용됩니다. ---
헤더셀렌더러 기능 헤더 셀 구성 요소를 사용자 정의 렌더링하는 데 사용됩니다 ({ tableManager, column }) => ( children ) ---
편집기셀렌더러 기능 편집 모드에서 셀 구성 요소를 사용자 정의 렌더링하는 데 사용됩니다 ({ tableManager, value, data, column, colIndex, rowIndex, onChange }) => ( children ) ---
placeHolder렌더러 기능 새 행을 로드할 때 표시되는 셀의 자리 표시자 구성 요소를 사용자 정의 렌더링하는 데 사용됩니다 ({ tableManager, value, data, column, colIndex, rowIndex }) => ( children ) ---

예: 

 // column config

{
  id : 'some-unique-id' ,
  field : 'first_name' ,
  label : 'First Name' ,
  className : '' ,
  pinned : false ,
  width : '200px' ,
  getValue : ( { tableManager , value , column , rowData } ) => value , 
  setValue : ( { value , data , setRow , column } ) => { setRow ( { ... data , [ column . field ] : value } ) } ,
  minResizeWidth : 70 ,
  maxResizeWidth : null ,
  sortable : true ,
  editable : true ,
  searchable : true ,
  visible : true ,
  resizable : true ,
  search : ( { value , searchText } ) => { } ,
  sort : ( { a , b , isAscending } ) => { } ,
  cellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex } ) => ( children ) ,
  headerCellRenderer : ( { tableManager , column } ) => ( children ) ,
  editorCellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex , onChange } ) => ( children ) ,
  placeHolderRenderer : ( { tableManager , value , data , column , colIndex , rowIndex } ) => ( children )
}

체크박스 열

행 선택은 미리 정의된 열에 의해 이루어지며 id 'checkbox'인 열을 추가하기만 하면 됩니다.

확인란 열은 다음 속성을 지원합니다.

이름 유형 설명 기본값
ID* '체크박스' 행 선택 열을 생성합니다 ---
고정된 부울 열이 측면에 고정되는지 여부 (첫 번째 및 마지막 열에서만 지원됨) 거짓
보이는 부울 열 표시 여부 진실
클래스 이름 끈 모든 열 셀에 대한 사용자 정의 클래스 ""
너비 끈 그리드 값의 열 초기 너비(전체 값 목록) "최대 콘텐츠"
최소 크기 조정 너비 숫자 크기를 조정할 때 열의 최소 너비 0
최대 크기 조정 너비 숫자, 널 크기를 조정할 때 열의 최대 너비 null
크기 조정 가능 부울 열 크기 조정을 허용할지 여부 거짓
셀렌더러 기능 확인란 셀을 사용자 정의 렌더링하는 데 사용됩니다. ({ tableManager, value, data, column, colIndex, rowIndex, onChange, disabled}) => ( <input type="checkbox" onChange={ onChange } checked={ value } disabled={ disabled } /> )
헤더셀렌더러 기능 체크박스 헤더 셀을 사용자 정의 렌더링하는 데 사용됩니다. ({ tableManager, column, mode, ref, checked, disabled, indeterminate, onChange }) => ( <input type="checkbox" onChange={ onChange } checked={ checked } disabled={ disabled } /> )

예: 

 // checkbox column config

{
  id : 'checkbox' ,
  pinned : true ,
  className : '' ,
  width : '54px' ,
  minResizeWidth : 0 ,
  maxResizeWidth : null ,
  resizable : false ,
  visible : true ,
  cellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex , onChange , disabled } ) => ( children )
  headerCellRenderer : ( { tableManager , column , mode , ref , checked , disabled , indeterminate , onChange } ) = > ( children )
}

행

유형: 객체 배열.

이 소품에는 행에 대한 데이터가 포함되어 있습니다.

각 행에는 기본적으로 id 인 고유 식별자 필드가 있어야 하지만 rowIdField 소품을 사용하여 다른 필드로 변경할 수 있습니다. 

 // Example for a single row data

{
  "id" : " some-unique-id " , 
  "objectValueField" : { "x" : 1 , "y" : 2 }, 
  "username" : " wotham0 " ,
  "first_name" : " Waldemar " ,
  "last_name" : " Otham " ,
  "avatar" : " https://robohash.org/atquenihillaboriosam.bmp?size=32x32&set=set1 " ,
  "email" : " [email protected] " ,
  "gender" : " Male " ,
  "ip_address" : " 113.75.186.33 " ,
  "last_visited" : " 12/08/2019 "
}

참고: 속성 값이 문자열 유형이 아니거나 열에 대한 필드를 지정하지 않은 경우 원하는 값을 추출하려면 열에서 getValue 함수를 사용해야 합니다.

서명 : getValue: ({ tableManager, 값, 열, rowData }) => 문자열

예:

셀의 필드 값이 객체라고 가정해 보겠습니다.

{ ... , fullName: {firstName: 'some-first-name', lastName: 'some-last-name'} } ,

성과 이름을 전체 이름으로 표시하는 getValue 함수는 다음과 같습니다.

getValue: ({ value }) => value.firstName + ' ' + value.lastName

반환된 값은 검색, 정렬 등에 사용됩니다.

구성 요소

유형: 개체.

이 소품은 내부 구성 요소를 사용자 정의 구성 요소로 재정의하는 기능을 제공합니다.

모든 구성 요소는 내보내지므로 어디에서나 가져올 수 있지만 소품과 함께 제공할 책임은 사용자에게 있습니다.

요소 필수 소품 선택적 소품
헤더 tableManager ---
찾다 tableManager onChange value
열 가시성 tableManager onChange columns
헤더셀 tableManager column
헤더선택셀 tableManager column ref onChange disabled checked
셀 tableManager value
에디터셀 tableManager value data column colIndex rowIndex onChange
선택셀 tableManager onChange value disabled
자리 표시자 셀 tableManager ---
짐을 싣는 사람 tableManager ---
결과 없음 tableManager ---
드래그 핸들 --- ---
보행인 tableManager ---
정보 tableManager totalCount pageSize pageCount selectedCount
페이지 크기 tableManager options onChange value
쪽수 매기기 tableManager onChange page

예: 헤더 구성요소 재정의 

 const Header = ( { tableManager } ) => {

    const { searchApi , columnsVisibilityApi , columnsApi } = tableManager ;

    const { searchText , setSearchText } = searchApi ;
    const { toggleColumnVisibility } = columnsVisibilityApi ;
    const { columns } = columnsApi ;

    return (
        < div style = { { display : 'flex' , flexDirection : 'column' , padding : '10px 20px' , background : '#fff' , width : '100%' } } >
            < div >
                < label htmlFor = "my-search" style = { { fontWeight : 500 , marginRight : 10 } } >
                    Search for:
                < / label >
                < input 
                    name = "my-search"
                    type = "search" 
                    value = { searchText } 
                    onChange = { e => setSearchText ( e . target . value ) } 
                    style = { { width : 300 } }
                / >
            < / div >
            < div style = { { display : 'flex' , marginTop : 10 } } >
                < span style = { { marginRight : 10 , fontWeight : 500 } } > Columns: < / span >
                {
                    columns . map ( ( column , idx ) => (
                        < div key = { idx } style = { { flex : 1 } } >
                            < input 
                                id = { `checkbox- ${ idx } ` }
                                type = "checkbox" 
                                onChange = { e => toggleColumnVisibility ( column . id ) } 
                                checked = { column . visible !== false } 
                            / >
                            < label htmlFor = { `checkbox- ${ idx } ` } style = { { flex : 1 , cursor : 'pointer' } } >
                                { column . label }
                            < / label >
                        < / div >
                    ) )
                }
            < / div >
        < / div >
    )
}

const MyAwesomeTable = props => {
    ...
    return (
        < GridTable
            . . .
            components = { { Header } }
        / >
    )
}

추가소품

유형: 개체.

이 prop은 내부 구성요소/모듈에 prop을 전달하는 기능을 제공합니다.

예 소품을 셀 구성 요소에 전달: 

 additionalProps = { { cell : { ... } , ... } }

소품을 전달할 수 있는 구성 요소/모듈 목록:

  • 헤더
  • 찾다
  • 열 가시성
  • 헤더셀
  • 헤더선택셀
  • 셀
  • 에디터셀
  • 선택셀
  • placeHolderCell
  • 보행인
  • 정보
  • 페이지 크기
  • 쪽수 매기기
  • rowVirtualizer

테이블 관리자

이는 내부 구성 요소에서 사용하는 API 개체이며, 이를 사용하여 구성 요소 외부에서 API가 제공하는 모든 작업을 수행할 수 있습니다.

API 구조:

  • id: 각 테이블 구성 요소의 고유 식별자입니다.
  • isMounted: 테이블이 마운트되어 있습니까?
  • isInitialized: 테이블이 초기화되었는지 여부. 모든 구성 요소가 초기화되면 true로 설정됩니다.
  • 모드: 제공된 props에서 파생된 'sync' 또는 'async'.
  • isLoading: 현재 데이터를 로드 중인 테이블입니다.
  • config: 테이블의 사용자 인터페이스와 해당 동작을 정의하는 모든 매개변수입니다.
  • refs: 선택한 요소에 대한 참조 개체입니다.
  • columnsApi: 열의 API입니다.
  • columnsVisibilityApi: 열 가시성의 API입니다.
  • searchApi: 검색 API입니다.
  • sortApi: 정렬 API입니다.
  • RowApi: 행의 API
  • paginationApi: 페이지 매김 API입니다.
  • rowSelectionApi: 행 선택 API입니다.
  • rowEditApi: 행 편집 API입니다.
  • rowVirtualizer: 행 가상화기의 API( react-virtual 의 전체 문서 참조)
  • asyncApi: 비동기 기능의 API입니다.

구성

이름 유형 설명 기본값
rowId필드 끈 행 식별자로 사용해야 하는 행 데이터의 필드 이름은 고유 해야 합니다. 'ID'
minColumnResizeWidth 숫자 크기를 조정하는 동안 모든 열의 최소 너비('체크박스' 열에는 적용되지 않음) 70
minSearchChars 숫자 검색이 적용되기 전에 입력해야 하는 최소 문자 2
isHeaderSticky 부울 스크롤할 때 테이블 머리글 셀이 맨 위에 고정되는지 여부 진실
페이지 매김됨 부울 페이지 매김 컨트롤을 바닥글에 표시할지 여부와 행 데이터를 페이지로 분할해야 하는지 결정 진실
활성화열재정렬 부울 위치 변경을 위해 열 드래그 앤 드롭을 허용할지 여부 진실
하이라이트검색 부울 검색어를 강조할지 여부 진실
표시검색 부울 헤더에 검색 구성 요소를 표시할지 여부 진실
showRows정보 부울 행 정보 구성 요소 표시 여부(바닥글 왼쪽에 위치) 진실
showColumnVisibilityManager 부울 컬럼 가시성 관리 버튼 표시 여부(헤더 오른쪽 상단에 위치) 진실
페이지 크기 숫자 배열 페이지 크기 옵션 [20, 50, 100]
요청디바운스시간 초과 숫자 onRowsRequest prop을 트리거하기 위한 디바운닝 시간을 정의합니다. 300
isVirtualScroll 부울 성능 향상을 위해 가상 스크롤에 항목을 렌더링할지 여부(페이지에 행이 많을 때 유용함) 진실
tableHasSelection 부울 테이블에 행 선택을 제어하는 ​​확인란 열이 있는지 여부 ---
구성 요소 물체 테이블에서 사용 중인 구성 요소(전체 구성 요소 목록 참조) {Header, Search, ColumnVisibility, HeaderCell, HeaderSelectionCell, Cell, EditorCell, SelectionCell, PlaceHolderCell, Loader, NoResults, Footer, Information, PageSize, Pagination}
추가소품 물체 내부 구성요소에 전달되는 추가 props(추가Props 전체 목록 참조) {}
아이콘 물체 테이블에서 사용 중인 아이콘 { sortAscending, sortDescending,clearSelection, columnVisibility, 검색, 로더 }
텍스트 물체 테이블에서 사용 중인 텍스트 { 검색, totalRows, 행, 선택됨,rowPerPage, 페이지, 이전, 다음, columnVisibility }

심판

이름 유형 설명
rgtRef 물체 래퍼 요소의 ref 객체
테이블참조 물체 테이블 컨테이너 요소의 ref 객체

columnsApi

이름 유형 설명 용법
기둥 정렬 열 구성 ---
보이는 열 정렬 보이는 열 ---
setColumns 기능 열을 업데이트합니다 setColumns(columns)

columnsVisibilityApi

이름 유형 설명 용법
토글열 가시성 기능 id 로 열의 가시성을 전환합니다. toggleColumnVisibility(column.id)

검색Api

이름 유형 설명 용법
검색텍스트 끈 검색할 텍스트 ---
유효한검색텍스트 끈 검색된 텍스트가 minSearchChars 를 통과하지 못한 경우 빈 문자열입니다. 통과한 경우 searchText 와 같습니다. ---
검색텍스트 설정 기능 검색 텍스트를 업데이트합니다 setSearchText('hello')
검색행 기능 열에 정의된 검색 방법을 사용하여 검색 텍스트를 기반으로 행을 필터링합니다. searchRows(rows)
값패스검색 기능 값이 특정 열에 대한 검색을 통과하면 true를 반환합니다. valuePassesSearch('hello', column)

sortApi

이름 유형 설명 용법
종류 물체 정렬 개체는 정렬되어야 하는 열의 ID에 대한 colId 보유하거나 정렬이 없는 경우 null 보유하고 정렬 방향을 정의하는 isAsc 보유합니다. ---
setSort 기능 정렬 개체를 업데이트합니다. setSort({colId: 5, isAsc: false})
정렬행 기능 열에 정의된 정렬 방법을 사용하여 선택한 방향을 기준으로 행을 정렬합니다. sortRows(rows)
토글정렬 기능 열의 정렬 단계를 오름차순, 내림차순, 없음으로 전환합니다. toggleSort(column.id)

행Api

이름 유형 설명 용법
행 정렬 행 데이터(동기화 모드에서 - 검색 필터 및 정렬 이후의 행 데이터) ---
원본 행 정렬 변경되지 않은 행 데이터(동기화 모드에서 - 검색 필터 이전의 행 데이터) ---
setRows 기능 행을 업데이트합니다 setRows(rows)
총 행 숫자 총 행 수 ---
setTotalRows 기능 총 행 수를 업데이트합니다. setTotalRows(1000)

페이지 매김Api

이름 유형 설명 용법
페이지 숫자 현재 페이지 번호 ---
세트페이지 기능 페이지 번호를 업데이트합니다 setPage(3)
페이지 크기 숫자 선택한 페이지 크기 ---
페이지 크기 설정 기능 페이지 크기를 업데이트합니다 setPageSize(20)
페이지행 정렬 현재 페이지의 행 ---
총페이지수 숫자 총 페이지 수 ---

rowSelectionApi

이름 유형 설명 용법
selectedRowsIds ID 배열 선택된 모든 행의 ID ---
setSelectedRowsIds 기능 선택한 행을 업데이트합니다 setSelectedRowsIds([1,3,5])
토글행선택 기능 id 로 행 선택을 토글합니다. toggleRowSelection(row.id)
getIsRowSelectable 기능 행을 선택할 수 있는지 여부를 결정합니다. getIsRowSelectable(row.id)
모두선택.모드 끈 모두 선택 유형, 가능한 모드는 페이지 행의 선택만 처리하는 page 또는 모든 행의 선택을 처리하는 all 입니다. 비동기 흐름을 사용하는 경우 모든 모드는 사용 가능한 모든 행의 선택을 처리하고, batchSize 제어된 페이지 모드는 페이지에서 사용 가능한 모든 행의 선택을 처리합니다. ---
selectAll.disabled 부울 selectAll.mode와 일치하는 선택 가능한 행이 없기 때문에 모두 선택 버튼을 비활성화해야 하는지 여부 ---
selectAll.checked 부울 selectAll.mode와 일치하는 모든 행이 선택되었는지 여부 ---
selectAll.불확정 부울 selectAll.mode와 일치하는 일부 행만 선택되었는지 여부 ---
selectAll.onChange 기능 selectAll.mode와 일치하는 모든 행을 선택/선택 취소합니다. selectAll.onChange()
selectAll.ref 심판 불확정 상태의 자동 설정을 활성화하기 위해 모두 선택 확인란에 추가할 수 있는 참조 ---

rowEditApi

이름 유형 설명 용법
행 편집 물체 현재 편집 중인 행의 데이터 ---
행 ID 편집 어느 현재 편집 중인 행의 ID ---
getIsRow편집 가능 기능 행을 편집할 수 있는지 여부를 결정합니다. getIsRowEditable(row)
setEditRow 기능 현재 편집된 행의 행 데이터를 업데이트합니다. setEditRow(row)
setEditRowId 기능 현재 편집된 행의 행 ID를 업데이트합니다. null 전달하여 편집 모드에서 다시 전환할 수 있습니다. setEditRowId(row.id)

비동기Api

이름 유형 설명 사용법 / 기본값
로드 중 부울 새 행에 대한 요청이 아직 보류 중인지 여부 ---
행 병합 기능 "구멍"을 null 로 채우면서 특정 인덱스에 있는 행의 array 을 병합합니다. mergeRowsAt(rows, moreRows, atIndex)
재설정행 기능 누적된 행을 삭제하여 새 요청을 트리거합니다. resetRows()
배치 크기 숫자 onRowsRequest 소품이 요청할 행의 양을 정의합니다. paginationApi.pageSize

어떻게...

동기/비동기

react-grid-table 4가지 데이터 모델을 지원합니다:

동조:

모든 데이터가 로컬에 있는 경우 이 흐름을 사용하세요.
rows 소품을 사용하여 모든 데이터를 전달하면 됩니다.

필수 소품 :

이름 유형 설명
행* 객체 배열 행 데이터(세부정보)

예: 

 export const SyncedTable = ( ) => {

    const rows = getRows ( ) ;
    const columns = getColumns ( ) ;

    return (
        < GridTable
            columns = { columns }
            rows = { rows }
        / >
    )
}

비동기(제어되지 않음):

데이터를 비동기식으로 가져와야 하고, 내부적으로 이를 관리하기 위해 react-grid-table 원하는 경우 이 흐름을 사용하세요.
모든 데이터는 onRowsRequest prop을 통해 테이블에 제공됩니다.

필수 소품 :

이름 유형 설명
onRowsRequest* 비동기 기능 {rows, totalRows}로 해결되는 약속을 반환해야 합니다.

예: 

 export const AsyncUncontrolledTable = ( ) => {
    
    const columns = getColumns ( ) ;

    const onRowsRequest = async ( requestData , tableManager ) => {
        const response = await fetch ( `app/api/rows` , {
            method : 'post' ,
            body : {
                from : requestData . from ,
                to : requestData . to ,
                searchText : requestData . searchText ,
                sort : requestData . sort ,
            } ,
        } ) . then ( response => response . json ( ) ) . catch ( console . warn ) ;

        if ( ! response ?. items ) return ;
        
        return {
            rows : response . items ,
            totalRows : response . totalItems
        } ;
    }

    return (
        < GridTable
            columns = { columns }
            onRowsRequest = { onRowsRequest }
        / >
    )
}

비동기(제어됨):

데이터를 비동기식으로 가져와야 하고, 내부적으로 이를 관리하기 위해 react-grid-table 원하지만 앱의 다른 위치에서는 계속 사용할 수 있는 경우 이 흐름을 사용하세요.
모든 데이터는 onRowsRequest 소품을 통해 테이블에 제공되지만 rows , onRowsChange , totalRows 및 onTotalRowsChange 소품을 통해 상위 구성 요소에 의해 제어됩니다.

필수 소품 :

이름 유형 설명
onRowsRequest* 비동기 기능 {rows, totalRows}로 해결되는 약속을 반환해야 합니다.
행* 객체 배열 행 데이터(세부정보)
행변경* 기능 현재 데이터를 설정하는 데 사용해야 합니다.
총 행* 숫자 현재 데이터 길이를 포함해야 합니다.
onTotalRowsChange* 기능 현재 데이터 길이를 설정하는 데 사용해야 합니다.

예: 

 export const AsyncControlledTable = ( ) => {
    
    const columns = getColumns ( ) ;
    let [ rows , setRows ] = useState ( ) ;
    let [ totalRows , setTotalRows ] = useState ( ) ;

    const onRowsRequest = async ( requestData , tableManager ) => {
        const response = await fetch ( `app/api/rows` , {
            method : 'post' ,
            body : {
                from : requestData . from ,
                to : requestData . to ,
                searchText : requestData . searchText ,
                sort : requestData . sort ,
            } ,
        } ) . then ( response => response . json ( ) ) . catch ( console . warn ) ;

        if ( ! response ?. items ) return ;
        
        return {
            rows : response . items ,
            totalRows : response . totalItems
        } ;
    }

    return (
        < GridTable
            columns = { columns }
            onRowsRequest = { onRowsRequest }
            rows = { rows }
            onRowsChange = { setRows }
            totalRows = { totalRows }
            onTotalRowsChange = { setTotalRows }
        / >
    )
}

비동기(관리):

데이터를 비동기식으로 가져와야 하는 경우 이를 사용하고 직접 관리하세요(동일한 데이터를 가져올 수 있어야 하는 다른 장소가 있는 경우 유용함).
모든 데이터는 rows 소품을 통해 테이블에 제공되며, 이는 onRowsRequest 소품을 사용하여 업데이트되어야 합니다.
참고 : react-grid-table 반드시 동시 데이터를 요구하지 않습니다. 이는 데이터에 "구멍"이 있을 수 있음을 의미합니다. 기능적으로 적절한지 확인하려면 이러한 "구멍"을 null/정의되지 않은 항목으로 채워야 합니다.

이를 달성하려면 다음을 사용할 수 있습니다. 

 let mergedRows = tableManager . asyncApi . mergeRowsAt ( rows , fetchedRows , at )

필수 소품 :

이름 유형 설명
onRowsRequest* 비동기 기능 요청에 따라 행 소품을 업데이트해야 합니다.
행* 객체 배열 행 데이터(세부정보)
총 행* 숫자 현재 데이터 길이를 포함해야 합니다.
onRowsReset* 기능 현재 데이터를 재설정하는 데 사용해야 합니다. 정렬 또는 searchText 변경 시 호출됩니다.

예: 

 const controller = new AbortController ( ) ;

export const AsyncManagedTable = ( ) => {
    
    const columns = getColumns ( ) ;
    let rowsRef = useRef ( [ ] ) ;
    let [ totalRows , setTotalRows ] = useState ( ) ;

    const onRowsRequest = async ( requestData , tableManager ) => {
        const response = await fetch ( `app/api/rows` , {
            method : 'post' ,
            body : {
                from : requestData . from ,
                to : requestData . to ,
                searchText : requestData . searchText ,
                sort : requestData . sort ,
            } ,
            signal : controller . signal ,
        } ) . then ( response => response . json ( ) ) . catch ( console . warn ) ;

        if ( ! response ?. items ) return ;

        rowsRef . current = tableManager . asyncApi . mergeRowsAt ( rowsRef . current , response . items , requestData . from ) ;

        setTotalRows ( response . totalItems ) ;
    }

    const onRowsReset = ( ) => {
        rowsRef . current = [ ] ;
        setTotalRows ( ) ;
        controller . abort ( ) ;
    }

    return (
        < GridTable
            columns = { columns }
            rows = { rowsRef . current }
            onRowsRequest = { onRowsRequest }
            onRowsReset = { onRowsReset }
            totalRows = { totalRows }
            requestDebounceTimeout = { 500 }
        / >
    )
}

행 편집

행 편집은 열 구성에서 cellRenderer 속성을 사용하여 편집 버튼을 렌더링하여 수행할 수 있습니다. 그런 다음 클릭하면 editRowId 소품을 제어하고 테이블은 editable 것으로 정의된 열에 대한 편집 구성 요소를 렌더링합니다(기본적으로 true). , 기본적으로 텍스트 입력을 렌더링하는 editorCellRenderer 에 정의된 대로입니다.

예: 

 // state
const [ rowsData , setRows ] = useState ( MOCK_DATA ) ;

// 'editRowId' can also be controlled.
// if using controlled state, you can call your 'setEditRowId' instead of 'tableManager.rowEditApi.setEditRowId' to set it directly on your state.
// the table will typicaly call 'onEditRowIdChange' to reset it if 'searchText', 'sort' or 'page' has changed.
// const [editRowId, setEditRowId] = useState(null)

// columns
let columns = [
    ... ,
    {
        id : 'my-buttons-column' ,
        width : 'max-content' ,
        pinned : true ,
        sortable : false ,
        resizable : false ,
        cellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex } ) => (
            < button 
                style = { { marginLeft : 20 } } 
                onClick = { e => tableManager . rowEditApi . setEditRowId ( data . id ) }
            > &#x270E; < / button >
        ) ,
        editorCellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex , onChange } ) => (
            < div style = { { display : 'inline-flex' } } >
                < button 
                    style = { { marginLeft : 20 } } 
                    onClick = { e => tableManager . rowEditApi . setEditRowId ( null ) }
                > &#x2716; < / button >
                < button 
                    style = { { marginLeft : 10 , marginRight : 20 } } 
                    onClick = { e => {
                        let rowsClone = [ ... rowsData ] ;
                        let updatedRowIndex = rowsClone . findIndex ( r => r . id === data . id ) ;
                        rowsClone [ updatedRowIndex ] = data ;

                        setRowsData ( rowsClone ) ;
                        tableManager . rowEditApi . setEditRowId ( null ) ;
                    }
                } > &#x2714; < / button >
            < / div >
        )
    }
] ;

// render
< GridTable 
    columns = { columns }
    rows = { rowsData } 
    //editRowId={editRowId}
    //onEditRowIdChange={setEditRowId}
    . . .
/ >

문자열 이외의 값을 보유하는 열의 경우 업데이트된 값이 원래 값을 재정의하지 않도록 열에 setValue 함수를 정의해야 합니다.

예: 

setValue: ( { value , data , setRow , column } ) => {
    // value: '35', 
    // data: { ..., columnField: { fieldToUpdate: '27' }} 
    let rowClone = { ... data } ;
    rowClone [ column . field ] . fieldToUpdate = value ;
    setRow ( rowClone ) ;
}

스타일링

스타일 지정은 쉽게 재정의할 수 있는 CSS 클래스를 통해 수행됩니다. 테이블의 구성 요소는 모든 상황을 처리할 수 있는 사전 정의된 클래스로 매핑되며, className 속성을 사용하여 columns 구성에서 열별로 사용자 정의 클래스를 추가할 수 있습니다.

요소 사용 가능한 모든 클래스 선택기
싸개 rgt-wrapper
헤더 rgt-header-container
찾다 rgt-search-container rgt-search-label rgt-search-icon rgt-search-input rgt-search-highlight
열 가시성 관리자 rgt-columns-manager-wrapper rgt-columns-manager-button rgt-columns-manager-button-active rgt-columns-manager-popover rgt-columns-manager-popover-open rgt-columns-manager-popover-row rgt-columns-manager-popover-title rgt-columns-manager-popover-body
테이블 rgt-container rgt-container-overlay
헤더 셀 rgt-cell-header rgt-cell-header-[column.field] rgt-cell-header-checkbox rgt-cell-header-virtual-col rgt-cell-header-sortable / rgt-cell-header-not-sortable rgt-cell-header-sticky rgt-cell-header-resizable / rgt-cell-header-not-resizable rgt-cell-header-searchable / rgt-cell-header-not-searchable rgt-cell-header-pinned rgt-cell-header-pinned-left / rgt-cell-header-pinned-right rgt-cell-header-inner-not-pinned-right [column.className] rgt-cell-header-inner rgt-cell-header-inner-checkbox rgt-resize-handle rgt-sort-icon rgt-sort-icon-ascending / rgt-sort-icon-descending rgt-column-sort-ghost
셀 rgt-cell rgt-cell-[column.field] rgt-row-[rowNumber] rgt-row-odd / rgt-row-even rgt-row-hover rgt-row-selectable / rgt-row-not-selectable rgt-cell-inner rgt-cell-checkbox rgt-cell-virtual rgt-cell-pinned rgt-cell-pinned-left / rgt-cell-pinned-right rgt-cell-editor rgt-cell-editor-inner rgt-cell-editor-input rgt-row-selected rgt-placeholder-cell rgt-row-edit
보행인 rgt-footer rgt-footer-right-container
쪽수 매기기 rgt-footer-pagination rgt-footer-pagination-button rgt-footer-pagination-input-container rgt-footer-page-input
정보 rgt-footer-items-information rgt-footer-clear-selection-button
페이지 크기 rgt-footer-page-size rgt-footer-page-size-select
(유틸리티) rgt-text-truncate rgt-clickable rgt-disabled rgt-disabled-button rgt-flex-child

특허

© MIT

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체