how to set "quickgrid" row colour in blazor webassembly

Question

how to set "quickgrid" row colour in blazor web assembly

Answer 1

Hi @Nishantha Hettigoda,

According to your description, you could modify quickgrid's CSS to achieve your requirement.

You could create a CSS for the component and set the color for the quick table by using the tr css.

Like this :

This is used to set all the row for some color.

::deep tr {
    border-width: 1px; /* border */
    --tw-border-opacity: 1; /* border-gray-200 */
    border-color: rgb(229 231 235 / var(--tw-border-opacity)); /* border-gray-200 */
    background: rgba(255, 255, 255, 0.4);
    background-color: antiquewhite;
}

More details, you could refer to below example:

Component.razor:

@page "/promotion-grid"
@using Microsoft.AspNetCore.Components.QuickGrid
<PageTitle>Promotion Grid</PageTitle>
<h1>Promotion Grid Example</h1>
<div class="grid">
<QuickGrid Items="@people" >
    <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();
}

Component.razor.css:

::deep .quickgrid {
   font-weight: 400; /* font-normal */
   font-size: 0.875rem; /* text-sm */
   line-height: 2.5rem; /* text-sm (adjusted) */
   text-align: left; /* text-left */ 
   --tw-text-opacity: 1; /* text-gray-500 */
   color: rgb(107 114 128 / var(--tw-text-opacity)); /* text-gray-500 */ 
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
 
   ::deep .quickgrid[theme=default] .col-title {
      font-weight: 500;
      letter-spacing: 0.05em;
   }
 
::deep :is(.dark .quickgrid) {
   --tw-text-opacity: 1; /* text-gray-400 */
   color: rgb(156 163 175 / var(--tw-text-opacity)); /* text-gray-400 */
}
 
::deep thead {
   position: sticky;
   top: 0;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity)); /* bg-gray-50 */
   color: rgb(107 114 128 / var(--tw-text-opacity)); /* text-gray-500 */
   font-weight: 400; /* font-medium */
   text-transform: uppercase; /* uppercase */ 
   font-size: 0.75rem; /* text-xs */
   line-height: 2.75rem; /* text-xs (adjusted) */ 
   letter-spacing: 0.6px; /* tracking wider */
}
 
::deep tr {
   border-width: 1px; /* border */
   --tw-border-opacity: 1; /* border-gray-200 */
   border-color: rgb(229 231 235 / var(--tw-border-opacity)); /* border-gray-200 */
} 
   /* Subtle stripe effect */
   ::deep tr:nth-child(even) {
      background: rgba(255, 255, 255, 0.4);
      background-color: antiquewhite;
   }
 
::deep :is(.dark tr) {
   --tw-border-opacity: 1; /* dark:border-gray-700 */
   border-color: rgb(55 65 81 / var(--tw-border-opacity)); /* dark:border-gray-700 */
}
 
::deep :is(.dark thead) {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity)); /* dark:bg-gray-700 */
   color: rgb(255 255 255 / var(--tw-text-opacity)); /* dark:text-white */
}
 
::deep .sort-indicator {
   background-image: url('data:image/svg+xml;utf8,<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns=http://www.w3.org/2000/svg><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>');
}
 
::deep :is(.dark .quickgrid[theme=default] .col-options) {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity)); /* dark:bg-gray-700 */
   color: rgb(255 255 255 / var(--tw-text-opacity)); /* dark:text-white */
   background-color: rgb(55 65 81 / var(--tw-bg-opacity)); /* dark:bg-gray-700 */
}
 
::deep :is(.dark .quickgrid[theme=default] input) {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity)); /* dark:bg-gray-700 */
}

Result:

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

 

Note: Please follow the steps in our [documentation] to enable e-mail notifications if you want to receive the related email notification for this thread.