Download the PHP package team-nifty-gmbh/tall-datatables without Composer

A package to create datatables using alpinejs, tailwind, livewire and laravel

This package aims to provide a simple way to create datatables using alpinejs, tailwind, livewire and laravel.

It relies mainly on alpinejs to avoid re-rendering the whole table when something changed.

Requirements

• PHP >= 8.1
• Laravel >= 9.46
• AlpineJS >= 3.0
• TailwindCSS >= 3.0
• Livewire >= 2.11
• Vite >= 4.0
• MeiliSearch >= 1.0

Installation

1. You can install the package via composer:

2. Add the scripts tag to your layout BEFORE alpinejs

3. Add the following to your tailwind.config.mjs

4. Run vite build to compile the javascript and css files

5. Publishing the views is optional. If you want to use the default views you can skip this step.

Optionally, you can publish and run the migrations with:

Optionally, you can publish the config file with:

Optionally, you can publish the views using

Configuration

By default the package caches the state of the table in the session. If you want to disable this feature, you can set the cache option to false in the .env file.

The caching is done per datatable. If you want to use your datatable in a different context you should set a different cache key. In your blade file pass the cache key to the component.

You have to ensure that all cache-keys you set across your application are unique.

Usage

This command creates a new DataTable class.

Inside this class you should define at least the columns you want to display

Choosing a layout

By default, the table is rendered as a table. You can change the layout by overriding the getLayout method.

This package delivers 2 layouts: 'tall-datatables::layouts.grid' and 'tall-datatables::layouts.table'

You can also create your own layout by creating a blade file inside the resources/views/components folder.

Using your own view

If you want to use your own view as a wrapper around the layout you can override the $view property.

Your view should include the default data-table wrapper:

Adding Buttons to the table

You can add buttons to the table by overriding the getTableActions method.

These buttons will be rendered above the table on the right side. If your table has search enabled, the buttons will be rendered on the right side of the search input.

NOTE: My advice is to embed the datatable inside another component and use the wire:ignore directive to avoid re-rendering the whole page. The "Create" button could dispatch an alpinejs event to the parent component. The listener could trigger a livewire function to render the create form.

Adding Buttons to a row

NOTE: Keep in mind that tall-datatables relies on alpinejs to render the data.

Each row is rendered using the x-for directive. This means that every record is available as a variable called record.

Remember that the record variable contains only the columns that are returned by the getReturnKeys php method. The Model key is always available.

You can add buttons to a row by overriding the getRowActions method.

TIP: If you want to prevent the row-clicked event to be dispatched on a button click add the $event.stopPropagation() method to the button attributes.

Combining Columns

You can combine multiple columns into one by overwrite the get{Position}Appends. As the name states the defined columns will be appended to the position.

This function would append the email below the name in the name column. This is just for view purposes. The data is still available in the record variable. Also, all formatters are applied before the column is appended.

NOTE: Keep in mind to add the appended Columns to the getReturnKeys method.

Eager Loading

If you need to eager load additional data you can override the getBuilder method

Minimized Network traffic

The datatable component will only return the columns you defined in the enabledCols property. In case you need a specific column to be always returned you can override the getReturnKeys method.

This is especially needed when you want to format money values in the frontend.

Using your DataTable inside another component

To use this new Data table you can add a livewire tag in your blade file:

You can pass contextual attributes when you call the component like this:

This keeps your component reusable, and you can use it in different contexts.

Using your DataTable as a full page component

To use this new Data table as a full page component you can just point a route to the component. See the Livewire documentation for more information.

Row clicked

NOTE: The data-table-row-clicked event is always dispatched, however if your record has the InteractsWithDataTables interface implemented the getUrl() method will be called to get the url to redirect to.

If you just need the click event without a redirect you can set the $hasNoRedirect property to true.

Every row click dispatches a data-table-row-clicked event with the model as payload. You can listen to this event in your AlpineJS.

If you want to use your clicked row with livewire my recommendation is to use the $wire property from alpinejs.

Echo and Eloquent Events

If you want to listen to eloquent events that occur on the model you can use the HasEloquentListeners trait in your Datatable. This trait will automatically register the Echo event listeners for created, updated and deleted events.

Your models should use the BroadcastsEvents trait from this package.

You have to define your Authentication callbacks like this:

To have created events working you have to add an aditional route:

Prepare your model

HasFrontendFormatter trait

If you want to format the data for the frontend you should use the HasFrontendAttributes trait in your model. This trait will add a method to your model called getFrontendAttributes()

Also, you should define a detailRouteName property in your model which points to a view showing the details of the model.

If your detail route needs additional parameters you can override the getDetailRouteParameters() method in your model class.

The trait adds an attribute accessor to your model which contains the detail route for a single model instance.

Styling the table

Adding Attributes to a row

You can add attributes to a row by overriding the getRowAttributes method.

Infinite Scrolling

By default, the table shows pagination. If you want to use infinite scrolling you can set the hasInfiniteScroll property to true.

When the end of the table comes into viewport the table adds the amount of records you defined in the perPage property. Please keep in mind that the network traffic grows each time as livewire has to hydrate the whole data not just add the new records.

NOTE: If you use infinite scrolling you need to import the alpinejs intersect plugin in your main projects js file.

Show filter inputs below column names

If you want to show the filter inputs below the column names you can set the showFilterInputs property to true.

Hiding the header

If you want to hide the header you can set the hasHeader property to false.

The sidebar with the filters are still available, but you have to add your own button to show it.

Icons

You can set an iconName property in your model which will be used to display an icon in the table. You can set any icon from the heroicons library.

InteractsWithDataTables interface

If a model is used in a relation of a model that has a datatable you should implement the TeamNifty\TallDatatables\Contracts\InteractsWithDataTables interface. This interface will add two methods to your model.

Casts

The Package uses casts to format the data for the frontend. You can define your own casts in the casts property of your model. Aside from the primitive cast you can add your own casts. These cast classes should implement the TeamNifty\TallDatatables\Contracts\HasFrontendFormatter interface which brings the getFrontendFormatter() method.

Searchable

If you want to search in your datatable you should use the Searchable trait from laravel scout. The package will automatically detect if your model is searchable and will add a search input to the datatable.

If you don't want to use the search input you can set the isSearchable property to false in your DataTable.

Testing

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Patrick Weh
• All Contributors

License

The MIT License (MIT). Please see License File for more information.