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

Keep in mind to follow the wireui installation instructions starting at step 2: https://livewire-wireui.com/docs/get-started

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

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. Check the WireUi documentation for the available options.

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. Check the WireUi documentation for the available options.

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. php public function getBottomAppends(): array { return [ 'name' => 'email', ]; }

public function getLeftAppends(): array { return [ 'name' => 'avatar', ]; } html

## Changelog

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

## Contributing

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

## Security Vulnerabilities

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

## Credits

- [Patrick Weh](https://github.com/patrickweh)
- [All Contributors](../../contributors)

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.