ReactDataGrid 사용 시, Header에 ToolTip 표시

in #dev5 years ago

React를 사용하게 되면 ReactDataGrid를 사용할 일이 종종 있는 데,
이때 각 컬럼에 대한 설명을 넣을 공간이 마땅치 않다.

그래서 Column Header 에 마우스 오버 시, tooltip을 추가하려고 해보았다.

ReacDataGrid 의 columns prop의 속성 중, headerRenderer 값이 있다. 참조

여기에 대략 아래와 같이 지정해서 Header render를 바꿀 수 있다.

headerRenderer: (o)=>{
   return <div className="widget-HeaderCell__value" title="This is ToolTip">{o.column.name}</div>
},