Datatable con Livewire en Laravel 8

Crear un Datatable con Livewire en Laravel 8 es bien sencillo, a día de hoy, que ya han pasado más de 2 años desde que Livewire inició su camino, existen multitud de dependencias que hacen este trabajo por nosotros ofreciéndonos mucha flexibilidad para adaptar los desarrollos a nuestras necesidades.

En este tutorial vamos a utilizar el package laravel-livewire-tables, el cual, entre otras cosas, nos ofrece la posibilidad de trabajar con diferentes frameworks CSS, actualmente Bootstrap 4, Bootstrap 5 y TailwindCSS. Contenido del tutorial Datatable con Livewire en Laravel 8 Crear un proyecto Laravel 8 utilizando Jetstream y Livewire Para cubrir el caso de forma completa lo primero que vamos a hacer es crear un nuevo proyecto con Laravel 8 utilizando Jetstream y Livewire.

En el proceso del comando anterior recuerda seleccionar Livewire para tenerlo todo completamente configurado y hacer la instalación de dependencias en el cliente con npm install y npm run dev. Preparar la base de datos Ahora configura tu archivo .env para establecer una conexión con tu base de datos y ejecuta el siguiente comando para crear un modelo Project con su respectiva migración y controlador.

Abre la migración para la tabla de proyectos y actualiza su código por el siguiente.

Sencillo, ¿no? Espero que sí, en caso de no ser así, no te pierdas el curso gratuito de Laravel 8, todo esto y mucho más está explicado en detalle para que lo entiendas todo a la perfección.

Ahora abre el modelo Project y realiza los siguientes ajustes.

Vamos a modificar la factoría de proyectos para poder dar de alta registros en la tabla projects con diferentes fechas, será muy útil para los filtros de nuestro Datatable.

Finalmente, vamos a actualizar DatabaseSeeder con lo siguiente.

Aquí simplemente creamos 10 usuarios, 95 proyectos y un usuario más con el que identificarnos :P

Para dejar el setup de base de datos listo, vamos a ejecutar el siguiente comando.

Si ahora revisas tu base de datos deberías ver todo lo que hemos hecho, usuarios y proyectos. Instalar Laravel Livewire Tables Los siguientes comandos son necesarios para instalar las dependencias para seguir este tutorial.

Crear componente Datatable con Livewire: ProjectsTable Aunque en breve este package tendrá la posibilidad de crear componentes utilizando artisan, a día de hoy no es así, por lo tanto, debemos crear nuestro componente con el siguiente comando.

Utilizamos el flag --inline para que Livewire no cree el archivo de vista, ¿por qué? El package que estamos utilizando no nos obliga a generar vistas, ya nos ofrece estos recursos por defecto, aunque si lo deseamos, podemos sobrescribirlos.

Una vez tenemos nuestro componente Datatable con Livewire, vamos a abrirlo para realizar el primer ejemplo básico, poco a poco le iremos dando funcionalidad, la meta es que entiendas cada paso realizado.

Nuestro componente extiende de DatatableComponent, que es quien nos otorga toda la funcionalidad que necesitamos sin hacer nada.

El método columns retorna un array con las columnas que deseamos mostrar y sus características (sortable, searchable).

El método query retorna una instancia de IlluminateDatabaseEloquentBuilder con la consulta inicial de nuestro Datatable.

Antes de continuar, vamos a mostrar estos resultados en pantalla utilizando nuestro controlador ProjectController y el sistema de rutas de Laravel.

Excelente, ¿o no? Quizá te habrás dado cuenta que mi componente, por lo menos los metadatos del Datatable aparecen en español, y, si estás siguiendo mis pasos, a ti te estén apareciendo en inglés :( Datatable con Livewire Multi idioma Hacer que nuestro componente pueda ser multi idioma es bien sencillo, lo primero que debemos hacer es publicar la dependencia de traducciones del package laravel-livewire-tables.

Una vez hecho, dirígete al directorio resources/lang/vendor/livewire-tables y crea el archivo es.json con el siguiente contenido.

Para que el idioma español sea utilizado por nuestro componente Livewire vamos a actualizar el idioma de nuestro proyecto, esto lo conseguimos desde el archivo config/app.php.

Si ahora vuelves a revisar tu proyecto verás que ahora sí aparece en español :P Añadir columnas de acción a nuestro Datatable ¿Qué sería de nosotros sin las columnas de acción en un Datatable? No seríamos absolutamente nadie :)

Añadir estas columnas en nuestro componente es bien sencillo, en nuestro caso nos vamos a apoyar de una plantilla blade que hará las delicias.

Lo primero que debemos hacer es ajustar nuestro componente Datatable con Livewire de la siguiente forma.

Llamando al método format al definir una columna podemos definir su formato, y, por si fuera poco, podemos decirle que deseamos utilizar un archivo .blade y además de eso pasarle la fila actual con un alias, en este caso el alias|nombre de la variable será $project.

Para que esto no falle, vamos a crear el archivo projects/actions.blade.php con el siguiente código.

Gracias a la configuración de nuestro Datatables podemos utilizar el objeto $project en nuestro archivo de acciones.

Relaciones Eloquent en nuestro Datatable Otro tema de primera necesidad es el trabajar con relaciones. En nuestro caso tenemos una relación con el usuario, ya que un proyecto siempre pertenece a un usuario. Para representar esta relación simplemente debemos modificar nuestro componente por lo siguiente.

Lo primero que puedes ver es que al definir la columna en el método columns le decimos a nuestro componente que el campo que deseamos utilizar el user.email, de esta forma nuestro componente sabrá qué hacer.

Pero eso no es suficiente, para no tener decenas de consultas duplicadas, es importante actualizar nuestro método query para cargar la relación user correctamente ->with("user").

Ordenar por relaciones Eloquent Otro tema demasiado importante como para pasarlo por alto. La ordenación por relaciones en Eloquent muchas veces resulta algo complejo, en nuestro caso es cosa de niños, sólo debemos saber qué código debemos añadir y en qué lugar :P

En nuestro caso sólo debemos modificar el método columns definiendo el método sortable con la siguiente sintaxis.

Filtrado por fechas Para finalizar esta entrada, vamos a ver lo sencillo que es añadir el filtro por fechas a nuestro componente para que podamos buscar proyectos creados en una determinada fecha. De paso, también veremos cómo formatear las fechas renderizadas por nuestro Datatable.

El código final de nuestro proyecto sería el siguiente.

TIP

Para que nuestro buscador no realice peticiones en exceso, podemos definir la propiedad de clase $searchFilterDebounce indicando el número de milisegundos que queremos esperar hasta que el usuario deja de escribir en los filtros.

Lo primero que debemos hacer es definir la columna para el campo created_at de la tabla projects. De paso formateamos esa fecha con el método format de la clase Column.

Para que los filtros aparezcan en nuestro componente Datatable con Livewire es importante definir el método filters, el cual retorna un array de filtros.

El último paso sería actualizar el método query para que sólo cuando se esté filtrando por la columna created_at se aplique el filtro para buscar por la fecha seleccionada.

Y eso es todo :) Espero que lo hayas disfrutado y te resulte útil.