MudBlazor – MudTable genérico
Estoy tratando de crear mi propio componente personalizado que hereda de MudTable. En mi componente personalizado he creado una propiedad IEnumerable de tipo TItem, y luego envío un DataSource desde la clase padre y también defino el tipo TItem a través de un parámetro. El problema que tengo es que MudTable usa @context para obtener los valores del DataSource, lo cual se conoce cuando se le proporciona el DataSource con un tipo predefinido. Puedes ver aquí MudTable.
Pero, ¿cómo puedo hacer eso cuando el DataSource es de tipo genérico? El @context no sabe en qué propiedad tomar el valor.
Componente principal que incluye el componente personalizado:
<CETable DataSource="Persons" ItemType="Person"></CETable>
public List<Person> Persons { get; set; }
protected override void OnInitialized()
{
Persons = new List<Person>();
Persons.Add(new Person { AgeOfPerson = "25", Name = "Mike" });
Persons.Add(new Person { AgeOfPerson = "35", Name = "John" });
Persons.Add(new Person { AgeOfPerson = "45", Name = "Michel" });
}
public class Person
{
public string Name { get; set; }
public string AgeOfPerson { get; set; }
}
Componente personalizado (CETable):
@typeparam ItemType
@inherits MudTable<ItemType>
<MudTable Items="DataSource">
<HeaderContent>
@*Enviaré más adelante esas columnas como parámetro*@
<MudTh>Name</MudTh>
<MudTh>AgeOfPerson</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Name">@context.</MudTd> // ¿Cómo definir el contexto aquí?
<MudTd DataLabel="AgeOfPerson">@context.</MudTd> // ¿Cómo definir el contexto aquí?
</RowTemplate>
</MudTable>
@code{
[Parameter]
public IEnumerable<ItemType> DataSource { get; set; }
}
Gracias por la ayuda.
davy.ai
Para definir el contexto en el componente personalizado cuando el DataSource es de tipo genérico, puedes utilizar el operador “@” seguido del nombre de la propiedad o campo en el tipo genérico que corresponde a la columna que deseas mostrar.
En la sección RowTemplate del componente personalizado, puedes reemplazar “@context.” con “@context.Nombre” para mostrar la columna Nombre y “@context.EdadDePersona” para mostrar la columna EdadDePersona. De esta manera, el objeto @context sabrá en qué propiedad tomar el valor.
Aquí tienes un ejemplo de cómo puedes modificar la sección RowTemplate del componente personalizado:
Con esta modificación, puedes pasar un tipo genérico como parámetro DataSource al componente personalizado y mostrará las columnas Nombre y EdadDePersona como se espera, incluso si el tipo no está predefinido.