DataTable

Tanstack Table 라이브러리 사용

Props

Prop	Type	Default	Description
columns	ColumnDef<TData, TValue>[]	-	컬럼 정의 데이터
data	TData[]	-	테이블 데이터
groupKey	string[]	-	셀 병합 할 컬럼의 accessorKey 값

Usage

• 페이지 별 테이블 컬럼 별도 생성

• 테이블 내 데이터 상태 관리를 위해 custom hook 형태로 파일 구성

### /src/components/table/sample-table-column.tsx

export function useSampleTableColumns({
  formData,
  handleFormChange
}) {
  const columns: ColumnDef<T>[] = [
    {
      id: 'check',
      header: ({ table }) => <TableHead variant={'checkbox'} table={table} />,
      cell: ({ row }) => <TableCell type={'checkbox'} row={row} />,
      meta: {
        rowSpan: 2, // rowSpan 설정이 필요한 경우
      }
    },
    {
      accessorKey: 'title',
      header: () => <TableHead variant={'text'} title={'타이틀'} />,
      cell: ({ row }) => <TableCell type={'text'} text={row.original['title']} />,
      meta: {
        rowSpan: 2,
      }
    },
    {
      id: 'mergedCell',
      header: () => <TableHead variant={'text'} title={'병합 셀'} />,
      columns: [
        {
          accessorKey: 'merged01',
          header: () => <TableHead variant={'text'} title={'병합 셀 01'} />,
          cell: ({ row }) => <TableCell type={'text'} text={row.original['merged01']} />,
        },
        {
          accessorKey: 'merged02',
          header: () => <TableHead variant={'text'} title={'병합 셀 02'} />,
          cell: ({ row }) => <TableCell type={'text'} text={row.original['merged02']} />,
        },
      ],
    },
  ]
  
  return columns
}

<DataTable
  columns={columns}
  data={data}
  groupKey={['title', 'merged02']}
/>