How to make nested row grouping using react-table please help
I want to create a nested grouped row in react-table can any one help.
1 Reply
automatic-azure•3y ago
you need to use
example for a group of 4 weeks
columnHelper.group
return columnHelper.group({
id: toIntlLongMonthFullYear(date.toDate()),
header: info => (
<TablePrimaryHeaderCell
date={null}
id={info.header.id}
backgroundColor={info.header.index % 2 ? css.colourNeutralWhite : css.colourNeutralGrey100}
isPlaceHolder={info.header.isPlaceholder}
colSpan={info.header.colSpan}
/>
),
// 4 weeks in a month, hack to do 4 iterations with .map
// @ts-ignore // TODO: Fix
columns: [0, 1, 2, 3]
.map((_el, weekInGroupIndex) => {
const currentWeekIndex = weekIndex + weekInGroupIndex;
const firstWeekDate : moment.Moment = moment(weeks[0]);
const currentWeekDate : moment.Moment = moment(weeks[currentWeekIndex]);
// filter out week if it's not part of current month
if ((currentWeekDate.date() <= DAYS_IN_A_WEEK) || firstWeekDate.month() !== currentWeekDate.month()) {
return null;
}
return getColumn({ weekIndex, weekInGroupIndex, weeks });
}).filter(Boolean)
});
return columnHelper.group({
id: toIntlLongMonthFullYear(date.toDate()),
header: info => (
<TablePrimaryHeaderCell
date={null}
id={info.header.id}
backgroundColor={info.header.index % 2 ? css.colourNeutralWhite : css.colourNeutralGrey100}
isPlaceHolder={info.header.isPlaceholder}
colSpan={info.header.colSpan}
/>
),
// 4 weeks in a month, hack to do 4 iterations with .map
// @ts-ignore // TODO: Fix
columns: [0, 1, 2, 3]
.map((_el, weekInGroupIndex) => {
const currentWeekIndex = weekIndex + weekInGroupIndex;
const firstWeekDate : moment.Moment = moment(weeks[0]);
const currentWeekDate : moment.Moment = moment(weeks[currentWeekIndex]);
// filter out week if it's not part of current month
if ((currentWeekDate.date() <= DAYS_IN_A_WEEK) || firstWeekDate.month() !== currentWeekDate.month()) {
return null;
}
return getColumn({ weekIndex, weekInGroupIndex, weeks });
}).filter(Boolean)
});