El componente Table de Bootstrap Blazor ofrece una gran flexibilidad para personalizar cómo se muestran los datos. Mientras que la generación automática de columnas simplifica el desarrollo inicial, muchas veces necesitamos un control más preciso sobre el comportamiento y apariencia de cada columna.

Deshabilitar la generación automática

Para tomar el control total sobre las columnas mostradas, primero debemos desactivar la generación automática estableciendo AutoGenerateColumns="false". A continuación, usamos el contenedor TableColumns para definir manualmente cada columna mediatne TableColumn:

<Table TItem="Foo" 
       IsPagination="true" 
       ShowFooter="true"
       IsStriped="true" 
       IsBordered="true" 
       ShowSkeleton="true"
       OnQueryAsync="@OnQueryAsync"
       AutoGenerateColumns="false">
    <TableColumns>
        <TableColumn @bind-Field="@context.Name" />
        <TableColumn @bind-Field="@context.DateTime" />
        <TableColumn @bind-Field="@context.Address" />
        <TableColumn @bind-Field="@context.Count" />
    </TableColumns>
</Table>

Agregar funcionalidades a columnas

Cada columna puede configurarse individualmente con características como ordenamiento y filtrado. Por ejemplo, habilitar estas funciones en campos numéricos o de fecha mejora significativamente la experiencia del usuario:

<TableColumn @bind-Field="@context.DateTime" Sortable="true" Filterable="true" />
<TableColumn @bind-Field="@context.Count" Sortable="true" Filterable="true" />

El sistema detecta automáticamente el tipo de dato (como DateTime o int) y muestra los controles adecuados, como un selectro de fechas o un filtro numérico, sin necesidad de configuración adicional.

Renderizado personalizado con plantillas

Para personalizar completamente cómo se muestra un valor en una celda, podemos usar el parámetro Template. Esto permite aplicar lógica condicional, estilos visuales o incluso componentes embebidos.

Por ejemplo, resaltar en rojo los valores bajos en una columna de conteo:

<TableColumn @bind-Field="@context.Count" Sortable="true" Filterable="true">
    <Template Context="row">
        @if (row.Value < 30)
        {
            <span style="color: red;">@row.Value</span>
        }
        else
        {
            <span>@row.Value</span>
        }
    </Template>
</TableColumn>

Este enfoque permite integrar cualquier marcado HTML o lógica de negocio directamente dentro de la celda, manteniendo la interacción natural con el resto de la tabla, incluyendo edición y validación.

Formularios dinámicos

Las opciones definidas en las columnas también afectan a los formularios emergentes generados automáticamente al editar o crear registros. Los campos respetan las propiedades configuradas, como editabilidad, visibilidad y tipo de entrada, lo que asegura coherencia entre visualización y edición.