Flowbite Blazor

Table Examples

Default Table #

Basic table structure with header and body

Product name	Color	Category	Price	Edit
Apple MacBook Pro 17"	Sliver	Laptop	$2999	Edit
Microsoft Surface Pro	White	Laptop PC	$1999	Edit
Magic Mouse 2	Black	Accessories	$99	Edit

<Table>
 <TableHead>
 <TableRow>
 <TableHeadCell>Product name</TableHeadCell>
 <TableHeadCell>Color</TableHeadCell>
 <TableHeadCell>Category</TableHeadCell>
 <TableHeadCell>Price</TableHeadCell>
 <TableHeadCell>
 <span class="sr-only">Edit</span>
 </TableHeadCell>
 </TableRow>
 </TableHead>
 <TableBody class="divide-y">
 <TableRow class="bg-white dark:border-gray-700 dark:bg-gray-800">
 <TableCell class="whitespace-nowrap font-medium text-gray-900 dark:text-white">Apple MacBook Pro 17"</TableCell>
 <TableCell>Sliver</TableCell>
 <TableCell>Laptop</TableCell>
 <TableCell>$2999</TableCell>
 <TableCell>
 <a href="#" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
 </TableCell>
 </TableRow>
 <!-- More rows... -->
 </TableBody>
</Table>

Striped Rows #

Alternating row background colors

Product name	Color	Category	Price	Edit
Apple MacBook Pro 17"	Sliver	Laptop	$2999	Edit
Microsoft Surface Pro	White	Laptop PC	$1999	Edit
Magic Mouse 2	Black	Accessories	$99	Edit
Google Pixel Phone	Gray	Phone	$799	Edit
Apple Watch 5	Red	Wearables	$999	Edit

<Table Striped="true">
 <TableHead>
 <TableRow>
 <TableHeadCell>Product name</TableHeadCell>
 <TableHeadCell>Color</TableHeadCell>
 <TableHeadCell>Category</TableHeadCell>
 <TableHeadCell>Price</TableHeadCell>
 <TableHeadCell>
 <span class="sr-only">Edit</span>
 </TableHeadCell>
 </TableRow>
 </TableHead>
 <TableBody class="divide-y">
 <!-- Table rows... -->
 </TableBody>
</Table>

Hoverable Rows #

Highlight rows on hover

Product	Category	Price
Apple MacBook Pro 17"	Laptop	$2999
Microsoft Surface Pro	Tablet	$999

<Table Hoverable="true">
 <TableHead>
 <TableRow>
 <TableHeadCell>Product</TableHeadCell>
 <TableHeadCell>Category</TableHeadCell>
 <TableHeadCell Align="right">Price</TableHeadCell>
 </TableRow>
 </TableHead>
 <TableBody>
 <!-- Table rows... -->
 </TableBody>
</Table>

With Checkboxes #

Row selection with checkboxes

Product	Category	Price
Apple MacBook Pro 17"	Laptop	$2999
Microsoft Surface Pro	Tablet	$999
Magic Mouse 2	Accessories	$99

<Table Hoverable="true">
 <TableHead>
 <TableRow>
 <TableCheckboxColumn TItem="Product" 
 Items="@_products"
 IsSelected="@(p => p.IsSelected)"
 OnSelectionChange="@OnSelectionChange" />
 <TableHeadCell>Product</TableHeadCell>
 <TableHeadCell>Category</TableHeadCell>
 <TableHeadCell Align="right">Price</TableHeadCell>
 </TableRow>
 </TableHead>
 <TableBody>
 @foreach (var product in _products)
 {
 <TableRow>
 <TableCell>
 <input type="checkbox"
 class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
 checked="@product.IsSelected"
 @onchange="@(e => OnSelectionChange(product, e.Value is bool value && value))" />
 </TableCell>
 <TableCell IsFirstColumn="true">@product.Name</TableCell>
 <TableCell>@product.Category</TableCell>
 <TableCell Align="right">@product.Price</TableCell>
 </TableRow>
 }
 </TableBody>
</Table>