DOCSEARCHbyAlgolia
Submit Docs

rappasoft/laravel-livewire-tables

repository·master·Indexed 24 days ago

https://github.com/rappasoft/laravel-livewire-tables

A dynamic Laravel Livewire component for building data tables, supporting Bootstrap 4, Bootstrap 5, and Tailwind CSS. It features comprehensive bulk action management, including delayed selection for large datasets, custom confirmation messages, and row filtering. The library also includes specialized column types such as ArrayColumn for displaying array data and AvgColumn for showing average values from related models.

Tokens
64.4K
Snippets
269
Records
326
Agent score
81%

What's inside laravel-livewire-tables

  2. Available Filter Types in Laravel Livewire Tables

    master

    Laravel Livewire Tables provides a variety of built-in filter types to allow users to refine data displayed in tables. Depending on your data structure, you can implement the following filter types:

    • Boolean Filter: For true/false or yes/no data.
    • Date Filter: For filtering by specific dates.
    • DateRange Filter: For filtering between two dates.
    • DateTime Filter: For filtering by date and time.
    • Livewire Component (BETA): Allows you to use a custom Livewire component as a filter.
    • Multi Select Filter (Dropdown): A dropdown menu allowing multiple selections.
    • Multi-Select Filter (Checkbox): A list of checkboxes for multiple selections.
    • Number Range Filter: For filtering values within a numeric range.
    • Number Filter: For filtering by specific numeric values.
    • Select Filter: A standard single-selection dropdown.
    • Text Filter: For searching or filtering by text strings.

  3. Configure Standard Columns in Laravel Livewire Tables

    master

    A Standard Column is the primary way to display data in your tables. It provides a wide range of configuration options to control how data is fetched, displayed, and interacted with.

    Key capabilities of Standard Columns include:

    • Creating Columns: Defining the base column structure.
    • Relationships: Accessing and displaying data from related Eloquent models.
    • Available Methods: Using built-in methods to customize column behavior (e.g., sorting, searching, formatting).
    • Column Selection: Allowing users to show or hide specific columns.
    • Secondary Headers: Adding a second row of headers for grouping or additional context.
    • Footers: Adding summary or aggregate data to the bottom of columns.
    • Anonymous Columns: Defining columns that are not directly tied to a specific database field.

  4. Overview of Lifecycle Hooks

    master
    Laravel Livewire Tables provides several lifecycle hooks that allow you to execute logic at specific stages of the table's lifecycle. These hooks are useful for re-using logic across multiple table components or centralizing default configurations. You can implement these hooks directly within your Table Component class or within a Trait to share behavior across multiple tables.

  5. How to use multiple tables on the same page

    master

    The package supports multiple tables on a single page, but there is a distinction between using different components and using the same component with different parameters:

    Supported: Different Components

    You can freely use different Livewire components on the same page.

    <livewire:users-table />
<livewire:roles-table />

    Not Supported: Same Component with different parameters

    You cannot use the same component multiple times with different parameters (e.g., passing different statuses) because they will conflict over the same query string state.

    <!-- This will NOT work correctly -->
<livewire:users-table status="active" />
<livewire:users-table status="pending" />

    Workaround: If you need the same logic with different parameters, create two distinct components (e.g., ActiveUsersTable and PendingUsersTable).

  7. Understand the difference between Tools and Toolbar

    master

    The Table component organizes additional UI elements into two hierarchical sections:

    1. Tools: The parent container. It contains the Filter Pills, Sorting Pills, and the Toolbar itself.
    2. Toolbar: A sub-section of Tools. It contains interactive elements such as:
      • Actions (if configured to use Toolbar)
      • Column Select dropdown
      • Configurable Toolbar Areas
      • Filters Button/Dropdown/Popover
      • Pagination dropdown
      • Reorder Button
      • Search Input

  9. Understand Bulk Actions in Laravel Livewire Tables

    master

    Bulk actions allow you to perform operations on multiple selected rows or all rows simultaneously within a table.

    By default, the bulk action interface is hidden. The checkboxes on the left-hand side of rows and the bulk action selector will only appear in the UI once you have defined at least one bulk action in your table configuration.

  10. How to use Delayed Select All for large datasets

    master

    By default, "Select All" makes a backend call to populate the selected array with all primary keys. For large datasets, this is slow.

    Enabling setDelaySelectAllEnabled() improves performance by preventing the immediate backend update. Instead, the frontend indicates all rows are selected, and the backend only receives this indication when the bulk action is actually triggered.

    Implementation Steps

    1. Enable delay in configure():
    $this->setDelaySelectAllEnabled();
    1. In your bulk action method, retrieve the rows using $this->getSelectedRows(). This will include the full set of rows from the current search/filter results.
    2. Crucial: Once the action completes, call $this->clearSelected() to reset the state.

    Warnings

    • Do not apply a filter, search, or sort after using "Select All" with delay enabled, as this will abandon the delay state and trigger a standard population.
    • Do not use setSelectAllStatus(true) or setSelectAllEnabled() in conjunction with this, as they force a selection regardless of frontend state.

  11. Configure filter interaction modes in Laravel Livewire Tables

    master

    Laravel Livewire Tables provides two distinct ways to interact with filters, which can be configured on a per-table basis to control how users access filtering options:

    1. Popover Menu: Filters are contained within a popover menu, typically triggered by a button.
    2. Slide Down: Filters are presented in a dedicated area that slides down from the table header.

    You can choose the mode that best fits your UI requirements for each specific table instance.