React Table 05 : Header Groups
개별적으로 되어 있는 Header를 그룹핑해주자. 방법은 초간단! Column을 정의해 줄 때 accessor 대신에 columns : [] 에 하위 열을 넣어주면 된다. export const GROUPED_COLUMNS = [ { Header: "Id", Footer: "Id", accessor: "id", }, { Header: "Name", Footer: "Name", columns: [ { Header: "First Name", Footer: "First Name", accessor: "first_name", }, { Header: "Last Name", Footer: "Last Name", accessor: "last_name", }, ], }, { Header: "Info", Footer: ..
2021. 8. 18.
React Table 04 : Footer 추가하기 + Footer에 합계, 개수 구하기
데이터가 많아지다보면 맨 아래 내려갔을 때 각각의 열이 무엇을 의미하는 지 헷갈릴 때가 있다. 또는 열의 마지막 행에 footer를 넣어서 합계,평균 등을 구할 때도 있다. 이 때 각각의 열에 footer를 만들어 줄 수 있다. Step 1. 열 정의하기 열을 정의할 때 기존에 있던 Header, accersor 외에 Footer를 정의해준다. export const COLUMNS = [ { Header: "Id", Footer : "Id", accessor: "id", }, { Header: "First Name", Footer: "First Name", accessor: "first_name", }, .... ] Step 2. useTable에서 footerGroups 가져오기 const { getT..
2021. 8. 18.
