리액트 - Handsontable afterSelection으로 수식 입력줄 구현하기

리액트 전체 링크

 

참고

- callback function으로 선택된 Cell 보여주기 / 수정하기

- styled-components로 타이핑 효과 만들기

 

- Project Settings (전체 코드)

- True / False Options

- Selected Options

- Number Options

- width, height, placeholder, sort

- 주석, comment, memo, tooltip

- Merge Cells, 셀 합치기

- Search 구현

- Columns Data Type

- Cell 커스터마이징

- afterSelection으로 수식 입력줄 구현하기

- Download CSV 구현 (콤마, 줄바꿈, 따옴표 처리)

- Mui Drawer로 Handsontable Option 관리하기

- Column Width, Row Height 로컬 스토리지에 저장하기

- Mui 토글 버튼으로 셀 스타일 편집 기능 만들기 

- 셀 스타일 로컬 스토리지에 저장하기 (전체 코드)

- Handsontable 깃허브 연동하기 (data, style, comment, merge 저장하기)

---

엑셀에서 셀을 클릭하면 수식 입력줄에서 보이지 않는 셀의 내용을 모두 보여준다.

 

Handsontable의 afterSelection callback 메서드로 구현해보자.

 

자세한 내용은 callback function으로 선택된 Cell 보여주기 / 수정하기에도 구현하였다.

---

구현

 

셀 정보를 보여주기 위해 useState에 변수를 추가한다.

const [displayCellInfo, setDisplaySetInfo] = useState("");

 

options에는 afterSelection에 메서드를 추가한다.

  const options = {
    data, 
    ...
    
    afterSelection: cellSelected,
    
    ...
    licenseKey: "non-commercial-and-evaluation",
  };

 

추가한 메서드는 다음과 같다.

  const cellSelected = () => {
    let selectedLast = myTable.getSelectedLast();

    if (selectedLast[0] < 0 || selectedLast[1] < 0) return;

    let value = myTable.getValue() || ""; // null 처리
    setDisplaySetInfo(value);
  };

 

afterSelection에 위의 메서드를 추가하려면 myTable 변수가 외부에 존재해야 한다.

  let myTable;
  const makeTable = () => {
    const container = document.getElementById("hot-app");
    container.innerHTML = "";

    myTable = new Handsontable(container, options);
    ...
  };

 

이제 styled-components로 css를 만들자.

import styled from "styled-components";

const DisplayCellStyle = styled.div`
  span {
    background-color: #33ceff;
    position: relative;
    padding: 0.4rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.35rem;
  }
`;

 

styled-components를 displayCellInfo의 span tag에 감싸주면 된다.

  return (
    <div>
      <Box sx={{ m: 2 }}>
        <DisplayCellStyle>
          <span>{displayCellInfo}</span>
        </DisplayCellStyle>
        <div id="hot-app" style={{ marginTop: "13px" }}></div>
      </Box>
    </div>
  );