React Table 06 : 간단한 정렬 구현하기 Sorting Table
각 열의 헤더를 누르면 오름차순, 내림차순으로 정렬되는 기능을 구현해본다. 키보드의 'shift'를 누른 채로 헤더를 클릭하면 중복 정렬이 가능하다. 정렬이 되면 열의 이름에 화살표 표시로 오름/내림차순 정렬 중이라는 것을 표시해준다. import { useTable, useSortBy } from "react-table"; export const SortingTable = () => { const columns = useMemo(() => COLUMNS, []); const data = useMemo(() => MOCK_DATA, []); const { getTableProps, getTableBodyProps, headerGroups, footerGroups, rows, prepareRow, } = ..
2021. 8. 24.
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.
