I'm trying to divide each timeline cell into a vertical stack of clickable "buckets."
My current approach uses onBeforeCellDomAdd to render multiple <div>s inside the cell. To get the height for each bucket, I'm calculating it based on the total row height, which I'm accessing via args.cell.row.Kr.height, considering the fact that the row height is dynamic, as it is determined by the volume of events assigned to that resource.
I suspect Kr is an internal property, and I'm concerned that relying on it will be unstable and could break with future updates.
Is there a more stable, officially supported way to get the final row height within this event? Or is there a better overall approach to achieve this kind of sub-grid layout within a cell?
Thank you.
onBeforeCellDomAdd: (args) => {
const totalRowHeight = args.cell.row?.Kr.height;
const bucketCount = args.cell.row?.Kr.lines.length || 1;
args.element = <>
{Array.from({ length: bucketCount }).map((_, index) => (
<StyledSquareCellBucket
style={{ height: (totalRowHeight / bucketCount) }}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
console.info("Clicked on a cell");
}}
>
+
</StyledSquareCellBucket>
))}</>
}