Issue With DataGridDisplayMode.Table

[grumpykiwi]

If I set my datagrid to use grid as the mode, everything displays fine

If I change to table mode, the column headers and filters all lose their place

I have tried all sorts of combinations but cant figure out why this is happening.

I am a CSS luddite BTW.

'''

<FluentDataGrid TGridItem="Timesheet" DisplayMode="DataGridDisplayMode.Table"
				ResizableColumns="false"
				HeaderCellAsButtonWithMenu="false"
				@ref="MyGrid"
				ShowHover="true"
				Loading="@IsLoadingData"
				Items="FilteredTimesheets"
				Style="width: 100%;"
				Pagination="@Pagination">
		
	<TemplateColumn Title="#" Align="Align.Start" Width="55px">
		<ChildContent>
			<FluentTooltip Anchor="@context.RecordNo.ToString()" Position="TooltipPosition.Right">Approval History</FluentTooltip>
			<FluentIcon id="@context.RecordNo.ToString()" OnClick="@(() => ShowHistory(context.RecordNo.Value))" value="@(FontAwesome.Icon("fa-circle-info", "#000000d9", FontAwesome.FontAwesomeIconSize.Large))" />
		</ChildContent>
	</TemplateColumn>
	<TemplateColumn Title="Begin Date" Align="Align.Start">
		<ChildContent>
			@context.BeginDate.ToShortDateString()
		</ChildContent>
		<ColumnOptions>
			<div class="search-box">
				<FluentDatePicker @bind-Value="BeginDateFilter" @bind-Value:after="@OnSearch"
								  ShowWeekNumbers="false"
								  ShowTodayButton="false"
								  ShowClearButton="true"
								  ShowGoToTodayButton="false"
								  ShowMonthPicker="false"
								  ShowYearPicker="false"
								  ShowTimePicker="false"
								  ShowCalendarButton="false"
								  ShowDayPicker="true"
								  ShowDateInput="false" />
				<FluentButton Appearance="Appearance.Outline" @onclick="ClearBeginDate">Clear</FluentButton> 
			</div>

		</ColumnOptions>
	</TemplateColumn>
	<TemplateColumn Title="End Date" Align="Align.Start">
		<ChildContent>
			@context.EndDate.ToShortDateString()
		</ChildContent>
		<ColumnOptions>
			<div class="search-box">
				<FluentDatePicker @bind-Value="EndDateFilter" @bind-Value:after="@OnSearch"
								  ShowWeekNumbers="false"
								  ShowTodayButton="false"
								  ShowClearButton="true"
								  ShowGoToTodayButton="false"
								  ShowMonthPicker="false"
								  ShowYearPicker="false"
								  ShowTimePicker="false"
								  ShowCalendarButton="false"
								  ShowDayPicker="true"
								  ShowDateInput="false" />
				<FluentButton Appearance="Appearance.Outline" @onclick="ClearEndDate">Clear</FluentButton> 
			</div>
		</ColumnOptions>

	</TemplateColumn>
	<TemplateColumn Title="Description" Align="Align.Start">
		<ChildContent>
		@context.Description
		</ChildContent>
		<ColumnOptions>
			<div class="search-box">
				<FluentSearch type="search" Autofocus="true" Placeholder="Description" @bind-Value="EmployeeNameFilter"
				@bind-Value:after="OnSearch" Immediate="true" ImmediateDelay="500" />
			</div>
		</ColumnOptions>
	</TemplateColumn>
	<TemplateColumn Title="Employee" Align="Align.Start">
		<ChildContent>
			@context.EmployeeName
		</ChildContent>
		<ColumnOptions>
			<div class="search-box">
				<FluentSearch type="search" Autofocus="true" Placeholder="Employee Name" @bind-Value="EmployeeNameFilter"
				@bind-Value:after="OnSearch" Immediate="true" ImmediateDelay="500" />
			</div>
		</ColumnOptions>
	</TemplateColumn>
	<TemplateColumn Title="State" Align="Align.Start">
		<ChildContent>
			@context.State
		</ChildContent>
	</TemplateColumn>
	<TemplateColumn Title="Lines" Align="Align.Center">
		<ChildContent>
			@context.TimesheetEntries.Where(x => x.TimesheetKey == context.RecordNo).Count()
		</ChildContent>
	</TemplateColumn>
	<TemplateColumn Title="Hours" Align="Align.Center">
		@context.TimesheetEntries.Sum(x => x.Qty).ToString("N2")
	</TemplateColumn>
</FluentDataGrid>

'''

Any pointers in the right direction would be greatly appreciated.

It is entirely possible I am doing the whole filter column thing wrong which could be causing it.

Thanks

Mark

[vnbaaij]

Is there a specific reason you want to use the table mode? Are you going to use virtualization with the grid? If not, I would just stick with the grid mode.

As for what you are seeing now, can you try to set a Width parameter for each column.

[grumpykiwi]

The only reason for table mode was for striping alternate rows for readability. I read an issue that said table mode is required for that to work. I will try setting width on the columns tomorrow. Thanks

[vnbaaij]

Yes, striping is a valid use case indeed.

[Lindsay-Mathieson]

Similar issue here - All the template headers are getting stacked vertically with Table mode and sticky headers set. Am using Virtual Mode

[vnbaaij]

@grumpykiwi I can't directly use the code you provided (don't have the time sheet type for example). Can you provide something 'ready to run'? Same question for @Lindsay-Mathieson. Thanks.

Update: I tried to reproduce with our DataGrid examples, but I can't get it reproduced. Please supply reproduction code.

[grumpykiwi]

HI Vincent I have prepared a sample project that shows the issue. Where should I upload the zip file? Note: Adding the width to each column in the grid makes the title disappear altogether. Thanks

[vnbaaij]

Just posting a link to the zip here is fine.

[vnbaaij]

@grumpykiwi please post your zip here asap. I want to try to get a fix in for 4.11.9 which we are about to release...

[vnbaaij]

I was able to get the posted code to work with some Copilot-Fu .🥋Happy to report that I found what the issue is. It will be in the next release.

PS: from a UI (and a11y) standpoint, it would be better to use HeaderCellAsButtonWithMenu. You can combine it with the Filtered parameter on the columns that can be filtered, like this:

<TemplateColumn Title="Begin Date" Align="Align.Start" Width="155px" Filtered="@(BeginDateFilter!=null)">

It will give a better representation of a filtered state because it will only show the filter icon (after the header text_) when a filter is applied. If you only have the filter option on a column (so no sort/resize), the filter dialog will automatically show once the button is clicked. No additional menu will be shown.

The icon we use with your current setup gives the impression that you can click the button to clear the filter. It only opens the filter dialog again.

That was a design error we made earlier which we've fixed with the 'cell as button' functionality.