• useReactTable : 기본적으로 react에서 테이블 만들때 사용을 한다.
  • useReactTable 훅의 인자로 option 객체를 넘길수 있다.

  1. data: TData[] : 표시할 테이블의 데이터입니다. 이 배열은 table.setRowType<...>에 제공한 유형과 일치해야 하지만 이론적으로는 무엇이든 배열이 될 수 있습니다. 배열의 각 항목이 키/값의 객체가 되는 것이 일반적이지만 필수는 아닙니다. 열은 문자열/인덱스 또는 기능적 접근자를 통해 이 데이터에 액세스하여 원하는 것을 반환할 수 있습니다. 데이터 옵션이 참조를 변경하면(Object.is를 통해 비교) 테이블이 데이터를 다시 처리합니다. 핵심 데이터 모델(예: 그룹화, 정렬, 필터링 등)에 의존하는 다른 모든 데이터 처리도 다시 처리됩니다.

     <aside> ✅ 테이블을 다시 처리하려는 경우에만 데이터 옵션이 변경되는지 확인하세요. 테이블을 렌더링할 때마다 인라인 []을 제공하거나 데이터 배열을 새 객체로 구성하면 불필요한 재처리가 많이 발생하게 됩니다. 이는 작은 테이블에서는 쉽게 눈에 띄지 않을 수 있지만, 큰 테이블에서는 눈에 띌 가능성이 높습니다.

     </aside>

  2. type columns = ColumnDef<TData>[] : 테이블에 사용할 열 정의의 배열입니다. 열 정의 생성에 대한 자세한 내용은 열 정의 가이드를 참조하세요.

ColmunDef

• 테이블에 열(column)을 정의하기 위한 변수이다.
• columnDef를 정의하기위한 방법이 3가지가 있다고 하는데, 일단 기본적인 형태부터 설정해보자

export const commentColumns: ColumnDef<AdminEnCommentResDto>[] = [
  { accessorKey: 'id', header: '아이디' },
  { accessorKey: 'content', header: '컨텐츠' },
  { accessorKey: 'isDisplay', header: '불카운트' },
  {
    accessorKey: 'createdAt',
    header: '생성 일자',
    cell: ({ row }) => {
      const date = new Date(row.getValue('createdAt'));
      const formatted = date.toLocaleDateString();
      return <h1 className="text-blue-700">{formatted}</h1>;
    },
  },
];

• 기본적으로 accessorKey와 header로 나눠 정의한다.
  • accessorKey : 실제 데이터의 property들임
  • header : 화면상 테이블에 나타낼 이름임.
• 이것을 추후 useReactTable 훅의 option 객체에 넘길 것이다.

기본 형태

import { ColumnDef, useReactTable } from '@tanstack/react-table';

const tableInstance = useReactTable({data, column});

return (
	<table>
		<thead>
			{tableInstance.getHeaderGroups().map((headerEl) => 
						(<TableRow key={headerEl.id}>
               {headerEl.headers.map((header) => {
                  return (
                    <TableHead key={header.id}>
                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                    </TableHead>
                  );
                })}
            </TableRow>)
		</thead>
	</table>
)

Header API

• tableInstance.getHeaderGroups() : 모든 header 정보를 배열로 반환한다.

  

• flexRender(header.column.columnDef.header, header.getContext()) : header.column.columnDef.header 가 의미하는 것은 최초 테이블 option으로 coulmDef로 넘겼던 header 프로퍼티에 써있는 value들을 나타낸다.

• header.getContext()이 친구는 무엇을 의미하는지 모르겠다.

Body API

• getCoreRowModel : 테이블 데이터를 만들기 위해 사용하고, useReactTable option객체에 호출하여 넣어주어야한다. 모든 Row에 접근할 수 있다.

import {getCoreRowModel} from '@tanstack/react-table';

const tableInstance = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel()
  });
  
  
  
  return (
	<table>
		<thead>
			{...생략}
		</thead>
		<tbody>
			{tableInstance.getModel().rows.map((row) =>
				  <tr key={row.id} data-state={row.getIsSelected() && 'selected'}>
             {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
              ))}
          </tr>
			)}
		</tbody>
	</table>
)

• tableInstance.getModel() : rows 열에 대한 정보를 가지고 있는 객체 인듯하다. tableInstance.getModel().rows.map((row)) 형태로 map을 돌릴 수 있다. 하지만 이렇게 돌린다고 해서 바로 열의 데이터까지 그려지는 게 아니다 다음 row에서 반환되는 객체의 getVisibleCells() 메소드를 통해 실제 각각의 데이터를 다시 한번 그려줘야한다. (총 O(n2)으로 이중 반복문을 그린다.)