Mejorando la Gestión de Datos: Tablas Nativas con Filament HasTable en Reimpact
En el proyecto Reimpact/platform, nos hemos enfocado en optimizar la interfaz de usuario y la eficiencia en la gestión de datos. Recientemente, hemos dado un paso significativo al migrar nuestras tablas de homologación manuales a la funcionalidad nativa HasTable de Filament.
Anteriormente, la gestión de datos se realizaba a través de tablas HTML construidas manualmente. Si bien eran funcionales, carecían de características esenciales para una experiencia de usuario robusta y eficiente, como la paginación, búsqueda, ordenación y filtrado. Esto implicaba un esfuerzo adicional para el usuario al manejar grandes volúmenes de datos y un mayor costo de mantenimiento para el equipo de desarrollo.
La Solución: Filament HasTable
La implementación del trait HasTable de Filament ha transformado por completo la forma en que interactuamos con estas tablas. Ahora, la tabla de homologación cuenta con:
- Paginación Nativa: Opciones de visualización de 10, 25, 50 o 100 registros por página.
- Búsqueda Rápida: Funcionalidad de búsqueda integrada para encontrar registros específicos de forma instantánea.
- Ordenación Dinámica: Posibilidad de ordenar los datos por cualquier columna relevante.
- Filtros Avanzados: Incluyendo un selector múltiple para niveles, un selector para marcas y filtros para las cuatro columnas de categorías, permitiendo una segmentación precisa de los datos.
Esta migración no solo mejora la usabilidad para nuestros administradores, sino que también simplifica el código base, aprovechando las potentes capacidades que Filament ofrece de fábrica. Un ejemplo básico de cómo se integra un filtro en Filament podría ser:
use Filament\Tables\Filters\SelectFilter;
use Illuminate\Database\Eloquent\Builder;
class ListHomologaciones extends ListRecords
{
protected function getTableFilters(): array
{
return [
SelectFilter::make('marca')
->options(Marca::all()->pluck('nombre', 'id'))
->query(function (Builder $query, array $data): Builder {
if (isset($data['value'])) {
$query->where('marca_id', $data['value']);
}
return $query;
})
];
}
}
Corrección en Widgets de Gráficos
Adicionalmente, se abordó un error común en PostgreSQL relacionado con la cláusula GROUP BY al utilizar widgets de gráficos. Este problema surgía al realizar consultas agregadas sin una ordenación previa explícita, lo que podía llevar a comportamientos inesperados o errores en la base de datos. La solución implicó asegurar la adición de reorder() antes de las consultas agregadas, garantizando que el GROUP BY se aplique correctamente y los gráficos muestren datos precisos.
Esta mejora asegura que los reportes y visualizaciones de datos sean consistentes y confiables, un aspecto crucial para la toma de decisiones basada en datos.
En resumen, la actualización a Filament HasTable en Reimpact/platform es un claro ejemplo de cómo la adopción de herramientas y patrones modernos puede resultar en una experiencia de usuario superior y un desarrollo más eficiente.
