Tanstack Table

useReactTable

    const table = useReactTable({
        data: data,
        columns: columns,
        getCoreRowModel: getCoreRowModel()
    });

• 수많은 헬퍼 함수들을 담고 있다.

Parameters

• data
  • Javascript 객체의 배열 형식을 가진다.
    • 이 글에선 아래 객체 배열을 사용한다고 가정한다.

      [{
        task: 'Add a New Feature',
        status: STATUS_ON_DECK,
        due: new Date('2023/10/15'),
        notes: 'This is a note',
    	}]

• columns [ type: ColumnDef<행의 타입> ]
  • 각 열(Column) 의 구조를 가진다.

  const columns: ColumnDef<DATA_ROW_TYPE>[] = [
    {
        /**
         * 값에 접근하기 위한 객체의 키값
         *
         * nested 된 객체의 경우 `.` 을 사용하여 접근할 수 있습니다.
         */
        accessorKey: 'task',
        /**
         * 테이블의 맨 위에 표시될 헤더
         */
        header: 'TASK',
        /**
         * 각 셀에 표시될 내용
         */
        cell: (props) => <div>{String(props.getValue())}</div>,
    },
];

• meta
  • cell의 props에 특정 함수를 추가한다.
  • props.options.meta.함수명 으로 접근 가능
  • 아래는 테이블 상태를 업데이트하는 함수를 추가한 예시

		meta: {
            updateData: (row: number, colId: string, value: string) => {
                setData((prevData) => {
                    const newData = [...prevData];
                    newData[row] = {
                        ...newData[row],
                        [colId]: value,
                    };
                    return newData;
                });
            },
        },

• getCoreRowModel
  • Tanstack query에서 만들어둔 getCoreRowModel 함수를 사용한다.

  getCoreRowModel: getCoreRowModel()

---

table 그리기

간단하게 Column Header를 그리는 예제

			{table.getHeaderGroups().map((headerGroup) => (
                    <Box as="tr" className="tr" key={headerGroup.id}>
                        {headerGroup.headers.map((header) => {
                            return (
                                <Box as="th" className="th" key={header.id}>
                                    {header.column.columnDef.header as string}
                                </Box>
                            );
                        })}
                    </Box>
                ))}

간단하게 데이터를 그리는 예제

			{table.getRowModel().rows.map((row) => {
                    return (
                        <Box as="tr" className="tr" key={row.id}>
                            {row.getVisibleCells().map((cell) => {
                                return (
                                    <Box as="td" className="td" key={cell.id}>
                                        {flexRender(
                                            cell.column.columnDef.cell,
                                            cell.getContext()
                                        )}
                                    </Box>
                                );
                            })}
                        </Box>
                    );
                })}

그려야 할 사이즈 가져오기

• table 로부터 그릴 사이즈를 가져올수 있다.
  • table.getTotalSize()
    • 전체 테이블의 너비
  • header.getSize()
    • 헤더의 너비
  • cell.column.getSize()
    • 데이터 cell의 너비
• columns 의 값에 size를 추가해 직접 설정 가능하다.

---

기능

Column 너비 변경하기

• 특정 column이 사이즈 변경중인지 확인하는 방법
  • header.column.getIsResizing()
• 칼럼 사이즈 변경 핸들에 붙힐 Event

onMouseDown={header.getResizeHandler()}
onTouchStart={header.getResizeHandler()}

• useReactTable 에 parameter 추가
  • columnResizeMode: 'onChange',
  • onEnd로 설정시 커서 드래그가 끝나야 적용됨