Instalar paquete laravel-livewire-tables
Comprar curso

7. 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.


13 comentarios

Inicia sesión para comentar

Comentarios:

  • Victor Arana Flores

    Victor Arana Flores hace 2 años 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

      ?

  • José L

    José L hace 1 mes

    Se puede instalar el paquete en Laravel 12?

    • Victor Arana Flores hace 1 mes

      Hola Josao, te respondi en otro comentario que escribiste. La version de Laravel no tiene nada que ver, y creo que tu duda es como incluir el paquete en los nuevos kit de inicio. 

      Hoy por la noche grabaré un video en donde explico esto, así que mañana te recomiendo retomar con este curso.

  • Luis Bueno

    Luis Bueno hace 10 meses

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

     

    • Victor Arana Flores hace 10 meses

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

  • Richard Pardo

    Richard Pardo hace 10 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 10 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 10 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.