npm package: @leokim97/test1
Description: <br/>
Latest version: 0.2.153

<br/>

![Generic badge](./demo.png)

[![Generic badge](https://img.shields.io/badge/version-2.0.0-blue.svg?style=flat-square&logo=Java&logoColor=white)](https://github.com/noraproj/nora-data-grid/blob/develop/README.md)
![Generic badge](https://img.shields.io/badge/npm-v8.19.2-red.svg?style=flat-square&logo=Java&logoColor=white)
![Generic badge](https://img.shields.io/badge/node-v18.12.1-red.svg?style=flat-square&logo=Java&logoColor=white)
![Generic badge](https://img.shields.io/badge/language-React-blue.svg?style=flat-square&logo=Java&logoColor=white)
![Generic badge](https://img.shields.io/badge/language-Typescript-blue.svg?style=flat-square&logo=Java&logoColor=white)
![Generic badge](https://img.shields.io/badge/language-Javascript-yellow.svg?style=flat-square&logo=Java&logoColor=white)
![Generic badge](https://img.shields.io/badge/language-JSON-orange.svg?style=flat-square&logo=Java&logoColor=white)

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

<br/>

## 👀 미리보기

![Generic badge](./intro.png)

<br/>
  
## 📝  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] 유효성 검증

<br/>
     
## public 메소드 
  > 기존 시스템에 사용되는 메서드가 있어 기존 메서드와 같이 제공합니다. 협의 후 향후 버전에서는 아래 메서드로 대체될 수 있습니다.
  - **신규 메소드**
    - [x] rowsToDelete() &emsp;&emsp;&emsp;✳️ 삭제할 행을 리스트에 추가 합니다.
    - [ ] 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() &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;✳️ cell 정보를 업데이트 합니다
- [x] getUpdateData() &emsp;&emsp;&emsp;✳️ 업데이트 된 데이터를 가져옵니다.

- **향후 대체될 메소드**

  - 📌 데이터를 가져옵니다.
    - ✅ 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() 🛠️ 삭제할 행을 리스트에 추가 합니다. 👉 🛠️ 행을 삭제 합니다.

<br/>

## 🚀 Build Setup

```
 # install
 npm install

 # start
 npm run start

```

## 🚀 배포

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

 # 배포
 npm publish
 or
 npm private

```