Nora Data Grid는 데이터를 표 형태로 보여주고, 편집하고, 정렬하고, 필터링하며, 페이징 등 다양한 기능을 제공하는 React UI 컴포넌트 라이브러리입니다.

👀 미리보기

📝 TODOs

• [ ] 기본 구조화
  • [x] context API 사용하여 ref 구조 잡기
  • [x] 초기화
    • [x] 초기화 로직 개발 (converter, initialize)
    • [x] public, private 메소드 등록
• [ ] head
  • [x] 필터 해더
    • [x] 필터 조건 표시 및 삭제
    • [x] 조건 전체 삭제
    • [x] OR/AND 스위치
    • [x] 선택됨 개수 표시
  • [ ] 필터 조건
    • [x] default 필더 조건 추가
    • [ ] 커스텀화된 필터 조건 추가 (부분 개발 완료)
  • [ ] 툴바
    • [x] 추가, 수정, 삭제 버튼 (상위 버전에서 제거 예정.)
    • [x] 커스텀 버튼
    • [x] 정렬
    • [x] 개수
• [ ] body
  • [x] Virtual scroll
  • [x] cell
    • [x] default cell 랜더링
      • [x] focus
      • [x] udpate value
      • [x] cell 상태값 업데이트
        • [x] addRow
        • [x] updateCell
        • [x] deleteRow
    • [x] 커스텀
      • [x] focus
      • [x] update value
      • [x] cell 상태값 업데이트
        • [x] addRow
        • [x] updateCell
        • [x] deleteRow
  • [x] row
    • [x] 행 전체 선택
    • [x] 행 선택
  • [x] custom content header
  • [x] 페이징
  • [x] spinner
  • [x] 유효성 검증

public 메소드

기존 시스템에 사용되는 메서드가 있어 기존 메서드와 같이 제공합니다. 협의 후 향후 버전에서는 아래 메서드로 대체될 수 있습니다.

• 신규 메소드

  • [x] rowsToDelete()    ✳️ 삭제할 행을 리스트에 추가 합니다.
  • [ ] isRowSelection: boolean; ✳️ row selection 기능을 사용할지 여부를 설정합니다.
  • [ ] isSingleRowSelection: boolean; ✳️single row selection 기능을 사용할지 여부를 설정합니다. default multi
  • [ ] getSelectedRows: (selectedRows: DataGridRowModel[]) => void; ✳️ row selection이 변경 될때 마다 실행 됩니다.
  • [x] findRowsIndexByGridRowKey: (_GRID_ROW_KEY: string[]) => number[]; ✳️ 그리드 고유키로 row index 정보를 가져옵니다.
  • [x] customButtonChange: (customButtons: ToolbarProps["onCustomButtons"]) => void; ✳️ 커스텀 버튼을 수정 합니다.

• 현행 유지 메소드

• [x] cellValue()       ✳️ cell 정보를 업데이트 합니다

• [x] getUpdateData()    ✳️ 업데이트 된 데이터를 가져옵니다.

• 향후 대체될 메소드

  • 📌 데이터를 가져옵니다.
    • ✅ getOriginalData() 👉 ✅ getData()
  • 📌 행울 추가합니다.(first,last 통합)
    • ✅ handleLastAddRow() 👉 🛠️ insertRow()
  • 📌 필터 상태값을 가져옵니다.
    • ✅ getFilterBuffer() 👉 🛠️ getFilters()
  • 📌 정렬 상태값을 가져옵니다.
    • ✅ getSortBuffer() 👉 🛠️ getSorts()
  • 📌 선택된 데이터중 삭제 상태의 데이터를 가져옵니다.
    • 🛠️ handleDeleteSelectedRow() 👉 🛠️ getDeleteSelectedRow()
  • 📌 유효성 체크를 합니다.
    • ✅ getSubmitValidationCheck() 👉 ✅ onValidationCheck()
  • 📌 선택 된 데이터를 가져옵니다.
    • ✅ getSelectedUpdateData() 👉 ✅ getSelectedData()
  • 📌 커스텀 컨텐츠 해더를 추가합니다.
    • ✅ customColumnRender() 👉 🛠️ customContentHeader()
  • 📌 Page Size 콤보박스 visible true/false 선택합니다.
    • ✅ toolbarRowSizeDisabled 👉 🛠 showPageSize
  • 📌 버튼을 커스텀합니다.
    • ✅ onCustomButtonHandler 👉 🛠️ onCustomButtons
  • 📌 삭제할 행을 리스트에 추가 합니다.
    • ✅ deleteRow() 🛠️ 삭제할 행을 리스트에 추가 합니다. 👉 🛠️ 행을 삭제 합니다.

🚀 Build Setup

 # install
 npm install

 # start
 npm run start

🚀 배포

 # build
 npm run tsc-build
 npm run publish:npm

 # 배포
 npm publish
 or
 npm private