Improve Table Density and Spacing

This commit is contained in:
2025-12-26 16:02:55 -05:00
parent 768b46da2d
commit 75a64faff0
4 changed files with 145 additions and 118 deletions
+46 -37
View File
@@ -15,44 +15,53 @@
</ActionButtons>
</PageHeader>
<MudDataGrid T="Student" ServerData="ServerReload" @ref="_dataGrid" Filterable="true" RowsPerPage="25">
<Columns>
<PropertyColumn Property="@(e => e.LastName)" Title="Name" Sortable="true">
<CellTemplate>
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<MudLink Href="@($"/students/details?id={context.Item.Id}&returnUrl=/students")"
Underline="Underline.Hover"
Color="Color.Primary">
@context.Item.LastNameFirstName
</MudLink>
@if (context.Item.OfficerRole != null)
{
<MudChip T="string" Size="Size.Small" Icon="@(AppIcons.OfficerRoleIcon(context.Item.OfficerRole.Value))">@context.Item.OfficerRole</MudChip>
}
<MudPaper Elevation="2" Class="pa-4">
<MudDataGrid T="Student"
ServerData="ServerReload"
@ref="_dataGrid"
Filterable="true"
RowsPerPage="25"
Dense="true"
Striped="true"
Hover="true">
<Columns>
<PropertyColumn Property="@(e => e.LastName)" Title="Name" Sortable="true">
<CellTemplate>
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<MudLink Href="@($"/students/details?id={context.Item.Id}&returnUrl=/students")"
Underline="Underline.Hover"
Color="Color.Primary">
@context.Item.LastNameFirstName
</MudLink>
@if (context.Item.OfficerRole != null)
{
<MudChip T="string" Size="Size.Small" Icon="@(AppIcons.OfficerRoleIcon(context.Item.OfficerRole.Value))">@context.Item.OfficerRole</MudChip>
}
</MudStack>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<IconButtonWithTooltip Icon="@Icons.Material.Filled.Edit"
TooltipText="Edit"
Href="@($"/students/edit?id={context.Item.Id}&returnUrl=/students")" />
<IconButtonWithTooltip Icon="@Icons.Material.Outlined.Delete"
TooltipText="Delete"
HoverColor="Color.Error"
OnClick="() => DeleteStudent(context.Item!)" />
</MudStack>
</MudStack>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<IconButtonWithTooltip Icon="@Icons.Material.Filled.Edit"
TooltipText="Edit"
Href="@($"/students/edit?id={context.Item.Id}&returnUrl=/students")" />
<IconButtonWithTooltip Icon="@Icons.Material.Outlined.Delete"
TooltipText="Delete"
HoverColor="Color.Error"
OnClick="() => DeleteStudent(context.Item!)" />
</MudStack>
</MudStack>
</CellTemplate>
</PropertyColumn>
<PropertyColumn Property="@(e => e.Grade)" Title="Grade (TSA Year)" Sortable="true">
<CellTemplate>
@context.Item.Grade (@context.Item.TsaYear)
</CellTemplate>
</PropertyColumn>
</Columns>
<PagerContent>
<MudDataGridPager T="Student"></MudDataGridPager>
</PagerContent>
</MudDataGrid>
</CellTemplate>
</PropertyColumn>
<PropertyColumn Property="@(e => e.Grade)" Title="Grade (TSA Year)" Sortable="true">
<CellTemplate>
@context.Item.Grade (@context.Item.TsaYear)
</CellTemplate>
</PropertyColumn>
</Columns>
<PagerContent>
<MudDataGridPager T="Student"></MudDataGridPager>
</PagerContent>
</MudDataGrid>
</MudPaper>
@code {
MudDataGrid<Student> _dataGrid = null!;