Toast Grid 몇 가지 팁

Toast GRID를 React/TypeScript환경에서 사용해보았습니다. (생각나는 데로 팁을 추가해보겠습니다.)

 

#01. row수가 약 300건 가까이 될때, 셀 선택시 엄청나게 느린 경우가 발생했는데, 아래 속성을 추가하니 속도가

빨라졌습니다.

 

bodyHeight={'fitToParent'}

 

#02. ajax 처리 후 데이터건수를 업데이트 해 주려고 할 때, ToastGrid의 TypeScript Wrapper에 response에 이벤트 타입이 TuiGridEvent로 받아버려서 제대로 속성 값을 처리할 수 없습니다. 그럴 땐  아래처럼 해 주면 됩니다. (any타입을 받아서 처리합니다.)

 

   

 grid_detail.current?.getInstance().on('response', function (ev: any) {

        const { response } = ev.xhr;

        const responseObj = JSON.parse(response);

		//setTotalRow 는 useState 함수입니다. 
        setTotalRow(responseObj.data.contents.length);

      });

#03. checkbox 체크시 해당row에 특정CELL 색상 변경

tuiGrid 의 addCellClassName, removeCellClassName을 이용해서 구현이 가능합니다..