Skip to content

Overlapping Cells

This example demonstrates how to create complex structures by overlapping multiple cells, spanning them across rows and columns, and applying dynamic styling.

csharp
.Border(1)
.BorderColor(Colors.Grey.Lighten1)
.Table(table =>
{
    table.ColumnsDefinition(columns =>
    {
        // hour column
        columns.ConstantColumn(60);
        
        // day columns
        foreach (var i in Enumerable.Range(0, 5))
            columns.RelativeColumn();
    });
    
    // even/odd columns background
    foreach (var column in Enumerable.Range(0, 7))
    {
        var backgroundColor = column % 2 == 0 ? Colors.Grey.Lighten3 : Colors.White;
        table.Cell().Column((uint)column).RowSpan(24).Background(backgroundColor); 
    }
    
    // hours and hour lines
    foreach (var hour in Enumerable.Range(6, 10))
    {
        table.Cell().Column(1).Row((uint)hour)
            .PaddingVertical(5).PaddingHorizontal(10).AlignRight()
            .Text($"{hour}");
        
        table.Cell().Row((uint)hour).ColumnSpan(6)
            .Border(1).BorderColor(Colors.Grey.Lighten1).Height(20);
    }
    
    // dates and day names
    foreach (var i in Enumerable.Range(0, 5))
    {
        table.Cell()
            .Column((uint) i + 2).Row(1).Padding(5)
            .Column(column =>
            {
                column.Item().AlignCenter().Text($"{17  + i}").FontSize(24).Bold();
                column.Item().AlignCenter().Text(dayNames[i]).Light();
            });
    }
    
    // standup events
    foreach (var i in Enumerable.Range(1, 4))
        AddEvent((uint)i, 8, 1, "Standup", Colors.Blue.Lighten4, Colors.Blue.Darken3);
    
    // other events
    AddEvent(2, 11, 2, "Interview", Colors.Red.Lighten4, Colors.Red.Darken3);
    AddEvent(3, 12, 3, "Demo", Colors.Red.Lighten4, Colors.Red.Darken3);
    AddEvent(5, 5, 17, "PTO", Colors.Green.Lighten4, Colors.Green.Darken3);

    void AddEvent(uint day, uint hour, uint length, string name, Color backgroundColor, Color textColor)
    {
        table.Cell()
            .Column(day + 1).Row(hour).RowSpan(length)
            .Padding(5).Background(backgroundColor).Padding(5)
            .AlignCenter().AlignMiddle() 
            .Text(name).FontColor(textColor);
    }
});

example