How do I format a Blazor QuickGrid?

Question

I'm working on a .NET 9 Blazor project with a QuickGrid. The customer wants a more "Excel-like" feel to the grid.

The raw QuickGrid tries to fit all the data on the screen and adds horizontal scroll bars to view the rest. I would like to fit more data on the screen which involves wrapping cells, making cells larger if the data requires it, borders around cells.

After a few hours of playing around with CSS, searching for code online and talking with CoPilot, I managed to get a better looking, but still flawed grid.

Question #1: are there any resources on how to format QuickGrid?

I can only find a few brief tutorials (like this one), but mostly I just try to glean what I can from StackOverflow and Reddit comments.

Question #2: specific to my case: how do I further format my grid? I got the grid to wrap data in the cells and increased the size of all the cells, but I also lost my scroll bars at the bottom. Also, nothing I've tried seemed to touch the header row.

I'm looking for how to:

• Wrap text on the header row
• Control formatting on the header row (notice the header row is bolded without me specifying this. How can I override this and make other changes (font, color, background color, etc)?
• Have the height of the rows (header and data) dynamically sized (notice in the example that there is whitespace in the cells because the height is statically defined)
• Control how many columns I want to display and overflow the rest to the right of the screen which can be accessed via a scrollbar
• Have the width more dynamically sized (a column with a short header and short data would have a smaller width than a column with a longer header and short data or short header and long data)

Here's is my code for the QuickGrid:

<QuickGrid TGridItem="EncounterValidationOutput" Items="encounterValidationOutputs.AsQueryable()">
    <PropertyColumn Property="item => item.InboundOriginalFileName" Title="Inbound Original File Name" Class="custom-column-width" />
    <PropertyColumn Property="item => item.InboundOriginalDate" Title="Inbound Original Date" Class="custom-column-width" />
    <PropertyColumn Property="@(item => item.InboundPath)" Title="Path" Class="custom-column-width" />
    <PropertyColumn Property="@(item => item.InboundFile)" Title="InboundFile" Class="custom-column-width" />
    <PropertyColumn Property="@(item => item.InboundFileNumber)" Title="InboundFileNumber" Class="custom-column-width" />
    <PropertyColumn Property="@(item => item.InboundCopyDate)" Title="InboundCopyDate" Class="custom-column-width" />
    <PropertyColumn Property="@(item => item.HeldClaims)" Title="HeldClaims" Class="custom-column-width" />
    <PropertyColumn Property="@(item => item.ClaimCount)" Title="ClaimCount" Class="custom-column-width" />
</QuickGrid>

Here's the CSS I have so far:

<style>
.custom-column-width {
    width: 150px;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    border: solid;
    word-wrap: anywhere;
    table-layout: fixed;
    height: 100px;
}
</style>

Here is the display without any CSS. Note the scroll bars at the bottom; I would like to keep these somehow and I'm not sure what in my css caused them to go away.

Here is the display with my CSS. Note the scrolls bars are gone. Also note that the header seems to be untouched by any of the changes to the CSS:

Answer 1

This is a CSS issue. Based on the resource you found and his section, we could say that we are able to append custom css to QuicGrid, you can see my test result below.

I created a css isolation file in my .Net 9 blazor web app server side rendered mode application. Here's my component and css file.

@page "/counter"
@rendermode InteractiveServer
@using Microsoft.AspNetCore.Components.QuickGrid


<style>
    .custom-class {
        color: blue;
        max-width: 120px; /* Restrict the maximum width to 100px */
        word-wrap: break-word; /* Forces long words to break onto the next line */
        overflow-wrap: break-word;
        white-space: normal;
    }
</style>

<div class="hover-scroll-x">
    <QuickGrid Items="people" Class="hover-scroll-y">
        <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" Class="custom-class" />
        <PropertyColumn Property="@(p => p.Name)" Sortable="true" Class="custom-class" />
        <PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
        <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
        <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
        <PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
        <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
        <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
        <PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
        <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
        <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
        <PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
        <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
        <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
        <PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
    </QuickGrid>
</div>

@code {
    private record Person(int PersonId, string Name, DateOnly PromotionDate);

    private IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();

}

My Counter.razor.css file

::deep .col-title-text {
    color: darkred;
    font-size: large;

    max-width: 120px;
    word-wrap: break-word; /* Forces long words to break onto the next line */
    overflow-wrap: break-word;
    white-space: normal;
}

::deep table {
    border: 1px solid black;
    border-collapse: collapse;
}
::deep th {
    border: 1px solid black; 
}
::deep tr {
    border: 1px solid black; 
}
::deep td {
    border: 1px solid black; 
}

.col-title > .col-title-text {
    color: darkblue !important;
    font-weight: normal !important;
}

.hover-scroll-x tr th {
    color: blue;
}
.hover-scroll-y > thead > tr > th > .col-header-content > .col-title > .col-title-text {
    color:green
}

.hover-scroll-y {
    height: 300px;
    width: 900px;
    overflow: hidden;
}

.hover-scroll-y:hover {
    overflow-y: scroll;
}

.hover-scroll-x {
    width: 800px;
    overflow-x: hidden;
}

.hover-scroll-x:hover {
    overflow-x: scroll;
}

About how to keep the scroll-x, you might take a look at this case which I test before. One more thing I can share is ::deep tr th { color: darkred; } doesn't work to set style for the th element. It looks like if we want to set custom style to a specific element, we'd better to use ::deep target-class-name. We can find the default class name using F12 tool of the browser. For example, I want to change the font of title, I can find the class is col-title-text