You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The header object has the 'rowSpan' property, but there is an issue where it is not applied even when defined through 'columnHelper'.
Therefore, I have written a function as follows that compares the length of the header group generated by 'columnHelper.group' and returns 'rowSpan.' There are still many areas that need improvement, and a lot of refactoring is pending, so feedback from many people is needed.
Information
Code : JavaScript
export const getMergeHeaderGroups = (tableHeaderGroups) => {
const headerGroups = tableHeaderGroups;
const headerIds = new Set(); // 동일한 컬럼명 중복 방지
const resultHeaderGroups = [];
if (headerGroups.length === 1) return [tableHeaderGroups[0].headers];
for (let i = 0; i < headerGroups.length; i++) {
const headerGroup = i === 0 ? headerGroups[i].headers : resultHeaderGroups[i];
// 행 객체 평면화
const preHeaders = headerGroup.map(header =>
header.isPlaceholder ?
{
...header,
isPlaceholder: false,
rowSpan: tableHeaderGroups.length - i
} :
{ ...header, rowSpan: 1 }
);
resultHeaderGroups.pop(); // 마지막 배열을 꺼냄
resultHeaderGroups.push(preHeaders); // 수정된 배열을 저장
preHeaders.forEach(preHeader => headerIds.add(preHeader.column.id)); // 현재까지 보유한 header 누적
const targetHeaders = headerGroups[i + 1].headers;
const newHeaders = targetHeaders.filter(header => !headerIds.has(header.column.id));
resultHeaderGroups.push(newHeaders);
if (i === headerGroups.length - 2) {
break;
}
}
return resultHeaderGroups;
};
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
The header object has the 'rowSpan' property, but there is an issue where it is not applied even when defined through 'columnHelper'.
Therefore, I have written a function as follows that compares the length of the header group generated by 'columnHelper.group' and returns 'rowSpan.' There are still many areas that need improvement, and a lot of refactoring is pending, so feedback from many people is needed.
Information
Code : JavaScript
columns example
Usage example
Result
Beta Was this translation helpful? Give feedback.
All reactions