QuickGrid Examples
Leverage the Microsoft's QuickGrid Blazor componet and achieve Flowbite styling by applying the flowbite-grid CSS class and the Theme="flowbite".
<div class="grid flowbite-grid">
<QuickGrid Theme="flowbite">
</div>Basic Grid #
A simple grid showing Pokemon data with basic columns.
# | Name | Type | HP | Attack | Defense |
|---|---|---|---|---|---|
| 1 | Bulbasaur | Grass | 45 | 49 | 49 |
| 2 | Ivysaur | Grass | 60 | 62 | 63 |
| 3 | Venusaur | Grass | 80 | 82 | 83 |
| 4 | Charmander | Fire | 39 | 52 | 43 |
| 5 | Charmeleon | Fire | 58 | 64 | 58 |
| 6 | Charizard | Fire | 78 | 84 | 78 |
| 7 | Squirtle | Water | 44 | 48 | 65 |
| 8 | Wartortle | Water | 59 | 63 | 80 |
| 9 | Blastoise | Water | 79 | 83 | 100 |
| 25 | Pikachu | Electric | 35 | 55 | 40 |
| 143 | Snorlax | Normal | 160 | 110 | 65 |
| 149 | Dragonite | Dragon | 91 | 134 | 95 |
| 150 | Mewtwo | Psychic | 106 | 110 | 90 |
| 151 | Mew | Psychic | 100 | 100 | 100 |
<div class="grid flowbite-grid text-xs">
<QuickGrid Items="@_pokemon" Theme="flowbite">
<PropertyColumn Property="@(p => p.Id)" Title="#" Align="Align.Center" />
<PropertyColumn Property="@(p => p.Name)" Title="Name" />
<PropertyColumn Property="@(p => p.Type1)" Title="Type" />
<PropertyColumn Property="@(p => p.HP)" Title="HP" Align="Align.Center" />
<PropertyColumn Property="@(p => p.Attack)" Title="Attack" Align="Align.Center" />
<PropertyColumn Property="@(p => p.Defense)" Title="Defense" Align="Align.Center" />
</QuickGrid>
</div>Sorting and Filtering #
Grid with sortable columns and name filtering capability.
| 1 | Bulbasaur | Grass | 45 | 49 | 49 |
| 2 | Ivysaur | Grass | 60 | 62 | 63 |
| 3 | Venusaur | Grass | 80 | 82 | 83 |
| 4 | Charmander | Fire | 39 | 52 | 43 |
| 5 | Charmeleon | Fire | 58 | 64 | 58 |
| 6 | Charizard | Fire | 78 | 84 | 78 |
| 7 | Squirtle | Water | 44 | 48 | 65 |
| 8 | Wartortle | Water | 59 | 63 | 80 |
| 9 | Blastoise | Water | 79 | 83 | 100 |
| 25 | Pikachu | Electric | 35 | 55 | 40 |
| 143 | Snorlax | Normal | 160 | 110 | 65 |
| 149 | Dragonite | Dragon | 91 | 134 | 95 |
| 150 | Mewtwo | Psychic | 106 | 110 | 90 |
| 151 | Mew | Psychic | 100 | 100 | 100 |
<div class="grid flowbite-grid text-xs">
<QuickGrid Items="@FilteredPokemon" Theme="flowbite">
<PropertyColumn Property="@(p => p.Id)" Title="#" Sortable="true" Align="Align.Center" />
<PropertyColumn Property="@(p => p.Name)" Title="Name" Sortable="true">
<ColumnOptions>
<div class="search-box">
<input type="search" autofocus @bind="_nameFilter" @bind:event="oninput" placeholder="Search..." />
</div>
</ColumnOptions>
</PropertyColumn>
<PropertyColumn Property="@(p => p.Type1)" Title="Type" Sortable="true" />
<PropertyColumn Property="@(p => p.HP)" Title="HP" Sortable="true" Align="Align.Center" />
<PropertyColumn Property="@(p => p.Attack)" Title="Attack" Sortable="true" Align="Align.Center" />
<PropertyColumn Property="@(p => p.Defense)" Title="Defense" Sortable="true" Align="Align.Center" />
</QuickGrid>
</div>Template Columns #
Custom column templates for enhanced visualization of Pokemon types and stats.
# | Name | Types | Stats |
|---|---|---|---|
| 1 | Bulbasaur | GrassPoison | HP: 45
Attack: 49
|
| 2 | Ivysaur | GrassPoison | HP: 60
Attack: 62
|
| 3 | Venusaur | GrassPoison | HP: 80
Attack: 82
|
| 4 | Charmander | Fire | HP: 39
Attack: 52
|
| 5 | Charmeleon | Fire | HP: 58
Attack: 64
|
| 6 | Charizard | FireFlying | HP: 78
Attack: 84
|
| 7 | Squirtle | Water | HP: 44
Attack: 48
|
| 8 | Wartortle | Water | HP: 59
Attack: 63
|
| 9 | Blastoise | Water | HP: 79
Attack: 83
|
| 25 | Pikachu | Electric | HP: 35
Attack: 55
|
| 143 | Snorlax | Normal | HP: 160
Attack: 110
|
| 149 | Dragonite | DragonFlying | HP: 91
Attack: 134
|
| 150 | Mewtwo | Psychic | HP: 106
Attack: 110
|
| 151 | Mew | Psychic | HP: 100
Attack: 100
|
<div class="grid flowbite-grid text-xs">
<QuickGrid Items="@_pokemon" Theme="flowbite">
<PropertyColumn Property="@(p => p.Id)" Title="#" Align="Align.Center" />
<PropertyColumn Property="@(p => p.Name)" Title="Name" />
<TemplateColumn Title="Types">
<div class="flex gap-2">
<span class="@GetTypeClass(context.Type1)">@context.Type1</span>
@if (!string.IsNullOrEmpty(context.Type2))
{
<span class="@GetTypeClass(context.Type2)">@context.Type2</span>
}
</div>
</TemplateColumn>
<TemplateColumn Title="Stats">
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2">
<span class="w-16 text-sm">HP: @context.HP</span>
<div class="w-32 bg-gray-200 rounded-full h-2">
<div class="bg-green-600 h-2 rounded-full" style="width: @(context.HP * 100 / 255)%"></div>
</div>
</div>
<div class="flex items-center gap-2">
<span class="w-16 text-sm">Attack: @context.Attack</span>
<div class="w-32 bg-gray-200 rounded-full h-2">
<div class="bg-red-600 h-2 rounded-full" style="width: @(context.Attack * 100 / 255)%"></div>
</div>
</div>
</div>
</TemplateColumn>
</QuickGrid>
</div>Paging #
Grid with pagination support and page size selection.
| 1 | Bulbasaur | Grass | 45 | 49 | 49 |
| 2 | Ivysaur | Grass | 60 | 62 | 63 |
| 3 | Venusaur | Grass | 80 | 82 | 83 |
| 4 | Charmander | Fire | 39 | 52 | 43 |
| 5 | Charmeleon | Fire | 58 | 64 | 58 |
14 items
<div class="grid flowbite-grid text-xs">
<QuickGrid Theme="flowbite" Items="@_pokemon" Pagination="@_pagination">
<PropertyColumn Property="@(p => p.Id)" Title="#" Sortable="true" Align="Align.Center" />
<PropertyColumn Property="@(p => p.Name)" Title="Name" Sortable="true" />
<PropertyColumn Property="@(p => p.Type1)" Title="Type" Sortable="true" />
<PropertyColumn Property="@(p => p.HP)" Title="HP" Sortable="true" Align="Align.Center" />
<PropertyColumn Property="@(p => p.Attack)" Title="Attack" Sortable="true" Align="Align.Center" />
<PropertyColumn Property="@(p => p.Defense)" Title="Defense" Sortable="true" Align="Align.Center" />
</QuickGrid>
<Paginator State="@_pagination" />
</div>