Instalar paquete laravel-livewire-tables
Comprar curso

6. Instalar paquete laravel-livewire-tables

En este tema aprenderás a instalar y configurar el paquete Laravel Livewire Tables en tu proyecto Laravel. Te enseñaremos los requisitos y pasos necesarios para instalar el paquete y hacer que funcione correctamente.


12 comentarios

Inicia sesión para comentar

Comentarios:

  • Victor Arana Flores

    Victor Arana Flores hace 1 año Destacado

    Actualmente el paquete no es compatible con Livewire 3, por lo que se debe trabajar con livewire 2

    Luego de hacer el cambio a Livewire 2 es importante ejecutar este comando

    php artisan view:clear

    Instalación: 

    Si estás buscando una forma fácil de instalar Laravel Livewire Tables, utiliza Composer y ejecuta el siguiente comando:

    composer require rappasoft/laravel-livewire-tables

    Configuración:

    La configuración del paquete es opcional, pero si deseas personalizarlo, aquí tienes algunos comandos de publicación para ajustar las vistas, las traducciones y los activos del paquete:

    php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-config
    php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-views
    php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-translations

    En la configuración, puedes elegir el tema que prefieras: Tailwind (el predeterminado), Bootstrap 4 o Bootstrap 5.

    Purga de Tailwind:

    Si utilizas la purga de CSS de Tailwind y experimentas problemas de estilo, deberás agregar una ruta a las vistas del paquete para que Tailwind no elimine los estilos necesarios. Esto es lo que debes hacer en el archivo tailwind.config.js:

    // V2
    module.exports = {
        mode: 'jit',
        purge: [
            ...
            './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',
        ],
        ...
    };
    
    // V3
    module.exports = {
        content: [
            ...
            './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',
        ],
        ...
    };
    

    Capa Alpine.js:

    Por último, es importante que agregues el estilo global de Alpine.js a tu proyecto. Ingresa a resources/css/app.css y escribe esto:

    <style>
        [x-cloak] { display: none !important; }
    </style>
    
    • Victor Arana Flores hace 1 año

      ?

  • Luis Bueno

    Luis Bueno hace 6 meses

    hoy ya esta disponible para la version livewire 3
    https://rappasoft.com/docs/laravel-livewire-tables/v3/start/requirements

     

    • Victor Arana Flores hace 6 meses

      Hola Luis, así es. No obstante el uso del paquete sigue siendo igual.

  • Richard Pardo

    Richard Pardo hace 6 meses

    Hola, he instalado el paquete y he configurado segun la documentación, aparentemente todo está correcto, pero la tabla no reenderiza los estilos correctamente, se muestra la tabla pero no los estilos y los iconos granes. Estoy usando laravel 11, he probado tambien el paquete de Powergrid y me pasa exactamente lo mismo.

    • Richard Pardo hace 6 meses

      Hola Victor, lo he solucionado de la siguiente forma, la cual no estoy seguro de que sea la correcta, y me gustaría saber tu opinión, estoy usando Laravel 11 con Jetstream y dejo aquí lo que hice por si es útil a alguien.

      Después de instalar Datatable y ver que no funcionaba correctamente, lo que hice fue instalar Livewire siguiendo la documentación oficial con los siguientes comandos:

      composer require livewire/livewire
      php artisan livewire:publish --config
      php artisan livewire:publish --assets

      Cambie la configuración del archivo config/livewire-tables.php de true a false para poder cargar los estilos:

      'inject_core_assets_enabled' => false,
      'inject_third_party_assets_enabled' => false,

      Ya que tenia por consola los siguientes errores:

      • Failed to load resource: the server responded with a status of 404 (Not Found) /rappasoft/laravel-livewire-tables/thirdparty.css:1
      • Failed to load resource: the server responded with a status of 404 (Not Found) thirdparty.min.js:1
      • Failed to load resource: the server responded with a status of 404 (Not Found) core.min.js:1
      • Failed to load resource: the server responded with a status of 404 (Not Found) universalModuleDefinition:1

      Creer la siguiente ruta para corregir el error Livewire Update que mostrava una ventana modal negra.

      Livewire::setUpdateRoute(function($handle) {
      return Route::get('/miaplicacion/public/livewire/update', $handle);
      });

      Y con esto ya funcionó el Datatable.
       

    • Victor Arana Flores hace 6 meses

      Hola Richard, te recomiendo que sigas todas las indicaciones del curso, desde la creacion del proyecto, la creación de un virtualhost, así como las configuraciones que hago.

  • Ricardo Godoy

    Ricardo Godoy hace 1 año

    Hola, como podría hacer para instalar la versión 3 (beta) que ya soporta livewire 3 ?

    • Victor Arana Flores hace 1 año

      Ejecutalo de esta manera

      composer show rappasoft/laravel-livewire-tables "3.0.0-beta.2"

  • Paulo Andrès Serna Orozco

    Paulo Andrès Serna Orozco hace 1 año

    Buena tarde.

    encontrè la soluciòn: Se debe incluir en cada pàgina donde se incluya la tabla las siguientes directivas: 

    @section('css')

        @livewireStyles

    @stop

    @section('js')

        @livewireScripts

    @stop.

  • Paulo Andrès Serna Orozco

    Paulo Andrès Serna Orozco hace 1 año

    Victor buena tarde.

    lo que hice fue crear el proyecto, instalar bootstrap, instalar datatable, cambiar el tema del datatable a bootstrap-5, cree el componente, pero no funciona el paginador, las columnas, número de registros, ordenamiento.

    Gracias por su atención.

  • Paulo Andrès Serna Orozco

    Paulo Andrès Serna Orozco hace 1 año

    Victor buen dìa.

    Cambien el tema a bootstrap-5, se ve bien pero no tiene funcionalidad, el paginador, la cantidad de registros, el ordenamiento.

    Gracias por su colaboraciòn.

    • Victor Arana Flores hace 1 año

      Hola Paulo, podrías darme un poco más de información por favor.

      Antes de cambiar todo funcionaba correctamente?

  • Lingber Sandoval

    Lingber Sandoval hace 1 año

    prf 
    lo quiero utilizar con boostrad5 ! por que todo mi proyecto ya esta en boostrad . alguna ayuda?

  • Alexis Mendoza

    Alexis Mendoza hace 1 año

    Al momento de hacer el downgrade a la version 2.12 de livewire me arroja el siguiente error: Class "Livewire\Mechanisms\FrontendAssets\FrontendAssets" not found

    El error me lo marca en esta linea:

    Alguna solución? 

         <!-- Styles -->
            @livewireStyles
    • Maria Luisa Palomeque Flores hace 1 año

      me sale el mismo error, si alguien podría brindar apoyo!! gracias

    • Victor Arana Flores hace 1 año

      Hola, voy a revisarlo y solucionarlo para el lunes. Les pido las disculpas del caso, siempre que hay una actualizacion ocurre este tipo de cosas.

  • Sammy Joseph

    Sammy Joseph hace 1 año

    Al crear un proyecto nuevo hoy, la versión por defecto de Livewire es 3.0 (se puede ver en el archivo composer.json):
    "livewire/livewire": "^3.0"

    Pero actualmente livewire-tables solo acepta hasta la versión 2:
    Laravel Livewire 2.x

    Así que para poder trabajar con este paquete, primero debes modificar el archivo composer.json y cambiar la versión de livewire a:
    "livewire/livewire": "^2.12"

    Luego necesitas actualizar livewire desde la consola:
    composer update livewire/livewire

    Finalmente ya podrás instalar el paquete del curso:
    composer require rappasoft/laravel-livewire-tables

    • Victor Arana Flores hace 1 año

      Hola Sammy, muchas gracias por el aporte.