How to add dropdown in table?

[ngominhtrungcmag]

I try add Dropdown in table but it can't show like expect. Please help me how to show Dropdown in table

`<Table @ref="_table" TItem="SysCompany" RenderMode="TableRenderMode.Table" class="table-sys0108"
HeaderTextWrap="true" ShowRefresh="false" ShowSearch="true" ShowAdvancedSearch="false"
ShowLoading="true" ShowFilterHeader="true"
IsPagination="true" PageItemsSource="[10, 20, 40]" IsFixedHeader="true"

       ShowToolbar="true" ShowSkeleton="true" ShowAddButton="false" ShowDeleteButton="false" ShowEditButton="false"
       IsAutoCollapsedToolbarButton="true" ShowExtendButtons="true" ShowExtendEditButton="false" ShowExtendDeleteButton="false" 
       ExtendButtonColumnWidth="240" ExtendButtonColumnAlignment="Alignment.Center"
       
       IsMultipleSelect="true" IsStriped="true" IsBordered="true"
       OnQueryAsync="OnQueryAsync">
	<TableToolbarTemplate>
		<TableToolbarButton TItem="SysCompany" Icon="fa-fw fa-solid fa-plus"
		                    OnClickCallback="(items) => OnClickEditCompanyById(string.Empty)"
		                    IsEnableWhenSelectedOneRow="false" Text="@GetLang("Add")" Color="Color.Primary"/>
		<TableToolbarButton TItem="SysCompany" Icon="fa-fw fa-solid fa-gears"
		                    OnClickCallback="(items) => OnClickEditCompanyConfigById(items.FirstOrDefault()?.CompanyId)"
		                    IsEnableWhenSelectedOneRow="true" Text="@GetLang("EditConfig")" Color="Color.Primary"/>
		<TableToolbarButton TItem="SysCompany" Icon="fa-fw fa-solid fa-pen-to-square"
		                    OnClickCallback="(items) => OnClickEditCompanyById(items.FirstOrDefault()?.CompanyId)"
		                    IsEnableWhenSelectedOneRow="true" Text="@GetLang("Edit")" Color="Color.Primary"/>
		<TableToolbarButton TItem="SysCompany" Icon="fa-fw fa-solid fa-trash"
		                    IsDisabled="@(SelectedRows == null || !SelectedRows.Any())"
		                    OnClickCallback="(items) => OnClickDelete(items)"
		                    Text="@GetLang("Delete")" Color="Color.Danger"/>
	</TableToolbarTemplate>
	<TableColumns>
		<TableColumn @bind-Field="@context.Parent" Align="Alignment.Center" Text="@GetLang("Parent")" Width="80" Sortable="true" Filterable="true"/>
		<TableColumn @bind-Field="@context.CompanyId" Text="@GetLang("CompanyId")" Width="260" Sortable="true" Filterable="true"/>
		<TableColumn @bind-Field="@context.CompanyName" TextWrap="true" Text="@GetLang("CompanyName")" DefaultSortOrder="SortOrder.Asc" DefaultSort="true" Sortable="true" Filterable="true"/>
		<TableTemplateColumn Text="@GetLang("Disable")" Width="80" Readonly="true">
			<Template Context="disabled">
				@if (context.Disable == 1)
				{
					<Switch Value="true" OnColor="Color.Success" IsDisabled="true"></Switch>
				}
				else
				{
					<Switch Value="false" OnColor="Color.Success" IsDisabled="true"></Switch>
				}
			</Template>
		</TableTemplateColumn>
		<TableTemplateColumn Text="@GetLang("Actions)")">
			<Template Context="actions">
				<Dropdown TValue="string">
					<ButtonTemplate Context="button">
						<Button Icon="fa-solid fa-ellipsis-vertical" Text="@GetLang("Actions")"
						        Color="Color.Secondary" Size="Size.Small"></Button>
					</ButtonTemplate>
					<ItemsTemplate>
						<Button Icon="fa-solid fa-pencil" Text="@GetLang("Edit")"
						                OnClick="() => OnClickEditCompanyById(context.CompanyId)"></Button>
						<Button Icon="fa-solid fa-trash" Text="@GetLang("Delete")"
						                OnClick="() => OnClickDelete(new List<SysCompany> { context })"></Button>
					</ItemsTemplate>					
				</Dropdown>
			</Template>
		</TableTemplateColumn>
	</TableColumns>
</Table>`

[ArgoZhang]

@ngominhtrungcmag could you upload a mini-repro-project?

[1753070058]

BootstrapBlazorApp1.zip

Here this is example project using Table with Dropdown. I setup it in User page, I see it toggle dropdown but dont show

[ArgoZhang]

@1753070058 thank you very much. We will resolve this issue as soon as possible. could you give this project a Star thanks again.

[ArgoZhang]

@1753070058 Hi. I checked your code and found that you need to add a property to make the pop-up window appear.
please add IsPopover="true" on the Dropdown component

<Dropdown TValue="string" IsPopover="true">
    <ButtonTemplate Context="button">
        <Button Icon="fa-solid fa-ellipsis-vertical" Text="Action"
                Color="Color.Secondary" Size="Size.Small"></Button>
    </ButtonTemplate>
    <ItemsTemplate>
        <Button Icon="fa-solid fa-pencil" Text="Edit"></Button>
        <Button Icon="fa-solid fa-trash" Text="Delete"></Button>
    </ItemsTemplate>
</Dropdown>

[ngominhtrungcmag]

Thank you for your detailed explanation and for pointing out the missing property. It worked perfectly. I appreciate your help!