Grouped Headers

import { useMemo } from 'react';
import { DataGrid, useDataGrid, getCoreRowModel, type ColumnDef } from '@featuring-corp/data-grid';

type Row = { id: string; name: string; email: string; followers: number; engagementRate: number };

const columns: ColumnDef<Row>[] = [
	{
		id: 'profile',
		// 그룹 헤더 — children이 있는 컬럼. leaf와 동일한 DataGrid.HeaderCell wrap.
		header: ({ header }) => (
			<DataGrid.HeaderCell header={header} $css={{ justifyContent: 'center', fontWeight: '$fontWeight-bold' }}>
				프로필
			</DataGrid.HeaderCell>
		),
		columns: [
			{
				accessorKey: 'name',
				size: 180,
				header: ({ header }) => <DataGrid.HeaderCell header={header}>이름</DataGrid.HeaderCell>,
				cell: (info) => <DataGrid.Cell cell={info.cell}>{info.getValue() as string}</DataGrid.Cell>,
			},
			{
				accessorKey: 'email',
				size: 220,
				header: ({ header }) => <DataGrid.HeaderCell header={header}>이메일</DataGrid.HeaderCell>,
				cell: (info) => <DataGrid.Cell cell={info.cell}>{info.getValue() as string}</DataGrid.Cell>,
			},
		],
	},
	{
		id: 'performance',
		header: ({ header }) => (
			<DataGrid.HeaderCell header={header} $css={{ justifyContent: 'center', fontWeight: '$fontWeight-bold' }}>
				성과
			</DataGrid.HeaderCell>
		),
		columns: [
			{
				accessorKey: 'followers',
				size: 130,
				header: ({ header }) => (
					<DataGrid.HeaderCell header={header} $css={{ justifyContent: 'flex-end' }}>
						팔로워
					</DataGrid.HeaderCell>
				),
				cell: (info) => (
					<DataGrid.Cell cell={info.cell} $css={{ justifyContent: 'flex-end' }}>
						{(info.getValue() as number).toLocaleString()}
					</DataGrid.Cell>
				),
			},
			{
				accessorKey: 'engagementRate',
				size: 110,
				header: ({ header }) => (
					<DataGrid.HeaderCell header={header} $css={{ justifyContent: 'flex-end' }}>
						참여율
					</DataGrid.HeaderCell>
				),
				cell: (info) => (
					<DataGrid.Cell cell={info.cell} $css={{ justifyContent: 'flex-end' }}>
						{`${((info.getValue() as number) * 100).toFixed(1)}%`}
					</DataGrid.Cell>
				),
			},
		],
	},
	{
		// 그룹 없는 컬럼 — 상단 헤더 행에 placeholder(폭 유지 빈 셀)가 생긴다.
		accessorKey: 'status',
		size: 120,
		header: ({ header }) => <DataGrid.HeaderCell header={header}>상태</DataGrid.HeaderCell>,
		cell: (info) => <DataGrid.Cell cell={info.cell}>{String(info.getValue() ?? '')}</DataGrid.Cell>,
	},
];

function GroupedGrid({ data }: { data: Row[] }) {
	const cols = useMemo(() => columns, []);
	const table = useDataGrid<Row>({
		data,
		columns: cols,
		getCoreRowModel: getCoreRowModel(),
		getRowId: (r) => r.id,
	});

	return (
		<DataGrid.Root table={table}>
			<DataGrid.Header />
			<DataGrid.Body />
		</DataGrid.Root>
	);
}

// depth 0 — 그룹 행 (프로필, 성과, 그리고 status의 placeholder)
// depth 1 — leaf 행 (이름, 이메일, 팔로워, 참여율, 상태)
const headerGroups = table.getHeaderGroups();

// leaf 헤더와 그룹 헤더가 동일한 DataGrid.HeaderCell wrap을 씁니다.
header: ({ header }) => (
	<DataGrid.HeaderCell header={header} $css={{ justifyContent: 'center' }}>
		프로필
	</DataGrid.HeaderCell>
),

// HeaderCell.tsx (요지)
const isPlaceholder = header?.isPlaceholder === true;

// …
role: isPlaceholder ? 'presentation' : 'columnheader',
'aria-hidden': isPlaceholder || undefined,
'data-header-cell': isPlaceholder ? undefined : '',
'data-column-id': isPlaceholder ? undefined : column.id,
'aria-colindex': isPlaceholder ? undefined : ariaColIndex,
'aria-colspan': !isPlaceholder && headerColSpan > 1 ? headerColSpan : undefined,
'aria-sort': !isPlaceholder && state.isSorted ? … : isSortInteractive ? 'none' : undefined,

// Header.tsx (auto-render 경로)
const renderHeader = (header: Header<T, unknown>) => (
	<Fragment key={header.id}>
		{header.isPlaceholder ? (
			<DataGridHeaderCell header={header} data-header-placeholder="" />
		) : (
			flexRender(header.column.columnDef.header, header.getContext())
		)}
	</Fragment>
);

'aria-colspan': !isPlaceholder && headerColSpan > 1 ? headerColSpan : undefined,

<DataGrid.Root table={table}>
	<DataGrid.Header>
		{(headerGroup) => {
			const isGroupRow = headerGroup.depth === 0;
			return (
				<DataGrid.HeaderRow $css={isGroupRow ? { backgroundColor: '$background-3' } : undefined}>
					{headerGroup.headers.map((header) =>
						header.isPlaceholder ? (
							// placeholder도 DataGrid.HeaderCell로 그대로 렌더 — HeaderCell이 시맨틱 억제를 처리합니다.
							<DataGrid.HeaderCell key={header.id} header={header} />
						) : (
							<Fragment key={header.id}>
								{flexRender(header.column.columnDef.header, header.getContext())}
							</Fragment>
						),
					)}
				</DataGrid.HeaderRow>
			);
		}}
	</DataGrid.Header>
	<DataGrid.Body />
</DataGrid.Root>

// leaf 헤더에만 sort onClick + SortArrow.
header: ({ header }) => (
	<DataGrid.HeaderCell
		header={header}
		onClick={header.column.getToggleSortingHandler()}
		$css={{ justifyContent: 'flex-end' }}
	>
		팔로워
		<DataGrid.SortArrow
			direction={header.column.getIsSorted()}
			nextDirection={header.column.getNextSortingOrder()}
		/>
	</DataGrid.HeaderCell>
),

const flatHeaders = table.getHeaderGroups().length <= 1;
// …
const enabled = !!config?.columns && flatHeaders && !hasSpan;

[DataGrid] virtualization.columns가 비활성됐습니다 — 멀티레벨(그룹) 헤더과 병용 불가(윈도우 경계 절단). 전체 렌더로 fallback합니다.