Download the PHP package karlos3098/laravel-primevue-table-service without Composer

Package responsible for pagination and sorting of tables with primeVue on the Laravel + InertiaJs side.

Author: Let's Code IT - Karol Sójka

Installation

Install the package

Publish components for vue

[!WARNING] Now the most difficult step, but very important

For our package to work, we need to replace one file from primevue - DataTable.vue This file is different for each version of Vue. We have prepared files for you for the primevue version:

• 3.46.0

Then overwrite the import into the DataTable component in your app.js file using the appropriate version from the list

Now you just need to add these 2 main components to your app.js file as well

Don't forget to initialize them!

It's time to create the first table.

We recommend using this approach of using services in Laravel. Your file could then look something like this:

Then the controller could be something like:

Now it's time to display the table in the frontend.

Let's start with 'globalFilterColumns' This is a list of fields in which the global search engine should search above the table, placed in the header template.

In the above example, we display 3 columns in the table that we manage:

• contact
• text
• date

The simplest example is the text column. This is a regular text column where we can simply search by phrase.

The second interesting one is 'contact'. The name is not used either in the resource or as a field in the model. This is a proper name for communication between vue and the backend. 'queryPaths' is important here. Here we can provide a list of fields (as you can see, also from the relationship) on which filtering should take place. If they were not provided, the website would automatically try to search in the 'contact' column, which does not exist.

Another example is the 'date' column. In this case, I declared it as a 'created_at' column and filtering is to take place there, but here we also have sorting.

The last example is 'type' in which we can search by selecting an option from the list.

You will also find 'rowsPerPage' under the column declaration. It tells you about the available pagination's per page in the table.

Also remember to provide the correct 'propName', i.e. the prop under which you pass the table in inertiajs. In case of an incorrect name, there will be no reaction to sorting and pagination.

Summary

The project was created with the intention of implementing it in several of my own projects, but I decided to share it. I am willing to cooperate and expand it. In the near future I also wanted to do some filtering using the numeric range that primevue provides, but I'm running out of time.

For the project to work, I had to replace one import in the DataTable.vue file with my file, but each version of DataTable is different.

Still, my solution that provides this will work from version 3.46 and a dozen or so versions upwards, but you would have to throw the rest of the versions into the project for convenience.