[React 리액트] React + TypeScript / react-table 에러 해결 getSortByToggleProps()

react-table의 공식문서를 보고 그대로 했는데 계속해서 에러 발생

나머지는 수정했으나 마지막까지 위의 이미지의 에러는 못 고쳐서 그냥 테이블을 만들었었다.

근데 react-table에 있는 기능(정렬 / 페이지네이션)은 포기 못하겠어서 해결해보기로 하고 서치하다가 드디어 수정!

 

참고로 나는 나는 React + TypeScript 조합으로 개발중

에러 메시지는 아래와 같다.

HeaderGroup<object>' 형식에 'getSortByToggleProps' 속성이 없습니다.

 

 

{headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
              {headerGroup.headers.map((column) => (
                <th
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                  key={column.id}
                > 
                // 생략

해결방법은 column의 interface를 any로 박아주기

{headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
              {headerGroup.headers.map((column: any) => (
                <th
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                  key={column.id}
                >

아주 잘 작동된다. 부들부들.