Introducción al Control de Paginación MudTablePager

En el desarrollo de aplicaciones Blazor, la implementación eficiente de controles de paginación es crucial para manejar grandes volúmenes de datos. MudBlazor, una biblioteca de componentes basada en Material Design, ofrece MudTablePager, un componente flexible que permite personalizar tanto la estética como el comportamiento de la paginación en tablas.

Componentes Internos de MudTablePager

El componente MudTablePager se compone de tres elementos principales para gestionar la paginación. Incluye un selector para definir el número de filas por página, un área que muestra el rango de registros visibles y controles de navegación con botones para desplazarse entre páginas. Esta estructura modular facilita la separación entre lógica y presentación.

<div class="contenedor-paginador">
  <div class="ajuste-registros">
    <MudSelect T="int" ValueChanged="CambiarRegistrosPorPagina" />
  </div>
  
  <div class="detalle-pagina">@textoPaginacion</div>
  
  <div class="botones-navegacion">
    <MudIconButton Icon="@iconoInicial" OnClick="@(() => tabla?.NavegarAPagina(EnumeracionPagina.Inicio))" />
    <MudIconButton Icon="@iconoPrevio" OnClick="@(() => tabla?.NavegarAPagina(EnumeracionPagina.Anterior))" />
    <MudIconButton Icon="@iconoSiguiente" OnClick="@(() => tabla?.NavegarAPagina(EnumeracionPagina.Siguiente))" />
    <MudIconButton Icon="@iconoFinal" OnClick="@(() => tabla?.NavegarAPagina(EnumeracionPagina.Fin))" />
  </div>
</div>

Personalización de Estilos con CSS

Para ajustar la apariencia del paginador, se pueden utilizar clases CSS predefinidas en MudBlazor. Por ejemplo, la clase .mud-table-pagination-actions controla el contenedor de botones, permitiendo modificar espaciado o estilos de hover. Es posible pasar clases personalizadas mediante el parámetro Class para aplicar estilos específicos sin alterar la estructura base.

<MudTablePager Class="estilo-paginador-personalizado" />

<style>
.estilo-paginador-personalizado .mud-table-pagination-actions {
  gap: 12px;
}
.estilo-paginador-personalizado .mud-icon-button {
  border-radius: 8px;
}
</style>

El parámetro HorizontalAlignment permite controlar la alineación del paginador, con opciones como Start, Center o End para adaptarse al diseño de la interfaz.

Lógica de Navegación y Manejo de Estados

La comunicación entre MudTablePager y la tabla padre se realiza a través de la propiedad Table, que expone métodos como NavegarAPagina para cambiar de página. Los estados de los botones se gestionan mediante propiedades calculadas, como BotonesAtrasDesactivados y BotonesAdelanteDesactivados, que pueden personalizarse para incluir condiciones adicionales, por ejemplo, durante la carga de datos.

private bool BotonesAtrasDesactivados => tabla == null || !tabla.TienePaginaAnterior;
private bool BotonesAdelanteDesactivados => tabla == null || !tabla.TienePaginaSiguiente;

// Ejemplo de uso con estado de carga
<MudTablePager 
  BackButtonsDisabled="@(cargandoDatos || !tabla.TienePaginaAnterior)"
  ForwardButtonsDisabled="@(cargandoDatos || !tabla.TienePaginaSiguiente)" 
/>

Implementación de un Paginador Personalizado

Cuando se requiere un control total sobre la interfaz de paginación, se puede utilizar el parámetro PagerContent para proporcionar un fragmento de renderizado completamente personalizado. Esto permite mantener la lógica de paginación integrada mientras se reemplaza el diseño visual por defecto.

<MudTable Items="@listaElementos" PagerContent="FragmentoPaginadorPersonalizado">
  <!-- Definición de columnas -->
</MudTable>

@code {
  private RenderFragment FragmentoPaginadorPersonalizado => __builder =>
  {
    <div class="paginador-custom">
      <MudButton OnClick="@(() => tabla.NavegarAPagina(EnumeracionPagina.Anterior))" 
                Disabled="@!tabla.TienePaginaAnterior">
        <Icon Name="Icons.Material.ChevronLeft" />
      </MudButton>
      
      <span class="info-paginas">
        Página @tabla.NumeroPagina + 1 de @tabla.TotalPaginas
      </span>
      
      <MudButton OnClick="@(() => tabla.NavegarAPagina(EnumeracionPagina.Siguiente))"
                Disabled="@!tabla.TienePaginaSiguiente">
        <Icon Name="Icons.Material.ChevronRight" />
      </MudButton>
    </div>
  };
}

Optimización para Grandes Conjuntos de Datos

Para datasets con más de 10,000 registros, se recomienda implementar paginación del lado del servidor. Esto se logra mediante el parámetro ServerData, que permite cargar datos de forma asíncrona según el estado de la tabla, como página actual y tamaño de página.

<MudTable T="Elemento" ServerData="@CargarDatosServidor">
  <!-- Definición de columnas -->
</MudTable>

@code {
  private async Task<TableData<Elemento>> CargarDatosServidor(TableState estado)
  {
    var resultado = await servicioElemento.ObtenerElementos(
      estado.Page, 
      estado.PageSize, 
      estado.SortLabel, 
      estado.SortDirection
    );
    return new TableData<Elemento> {
      Items = resultado.Items,
      TotalItems = resultado.TotalRegistros
    };
  }
}

Mejores Prácticas y Ejemplos Empresariales

En aplicaciones empresariales, se puede combinar MudTablePager con componentes como MudText para mostrar información detallada. Para dispositivos móviles, se sugiere usar consultas de medios CSS para ocultar elementos no esenciales o reorganizar controles.

@media (max-width: 600px) {
  .mud-table-pagination-caption {
    display: none;
  }
  .mud-table-pagination-actions {
    flex-wrap: wrap;
  }
}

Al implementar paginación, es importante verificar que el atributo ShowPager esté habilitado, que TotalItems refleje con precisión el recuento de registros y que las clases CSS tengan la especificidad adecuada para anular estilos predeterminados.