- Creating Columns
- Relationships
- Available Methods
- Other Column Types
- Column Selection
- Secondary Header
- Footer
- Reusable Columns
- Anonymous Columns
- Styling
- Standard Column
- Array Columns (beta)
- Avg Columns (beta)
- Boolean Columns
- Button Group Columns
- Color Columns
- Component Columns
- Count Columns (beta)
- Date Columns
- Icon Columns (beta)
- Image Columns
- Link Columns
- Livewire Component (beta)
- Sum Columns (beta)
- View Component Columns
- Wire Link Column (beta)
- Introduction
- Boolean Filters (beta)
- Date Filters
- DateRange Filters
- DateTime Filters
- Multi-Select Dropdown Filters
- Multi-Select Filters
- NumberRange Filters
- Number Filters
- Select Filters
- Text Filters
- Livewire Custom Filter (Beta)
- Refreshing
- Loading Placeholder
- Multiple Tables Same Page
- Actions (beta)
- Adding Custom Markup
- Debugging
- Saving Table State
- Lifecycle Hooks
- Hiding The Table (beta)
- One Of Many Example
- Tools
Getting Started
Usage
DataTable
Columns
Column Types
Rows
Sorting
Pagination
Search
Bulk Actions
Filters
Filter Types
Reordering
Secondary Header
Footer
Examples
Misc.
Sponsored
Advanced Usage
Examples
🎉 Enjoying this package? Consider sponsoring me on GitHub or buying me a beer.
This is the documentation for v3. You can switch versions in the menu on the left/at the top. Check your current version with the following command:
composer show rappasoft/laravel-livewire-tables
Available Methods
These are the available configuration methods for pagination.
setPageName
Set the page name for the component's pagination, defaults to page
.
1public function configure(): void2{3 $this->setPageName('users');4}
setPaginationStatus
Enabled by default, enable/disable pagination for the component.
1public function configure(): void2{3 $this->setPaginationStatus(true);4 $this->setPaginationStatus(false);5}
setPaginationEnabled
Enable pagination for the component.
1public function configure(): void2{3 // Shorthand for $this->setPaginationStatus(true);4 $this->setPaginationEnabled();5}
setPaginationDisabled
Disable pagination for the component.
1public function configure(): void2{3 // Shorthand for $this->setPaginationStatus(false);4 $this->setPaginationDisabled();5}
setPaginationVisibilityStatus
Enabled by default, enable/disable pagination visibility.
1public function configure(): void2{3 $this->setPaginationVisibilityStatus(true);4 $this->setPaginationVisibilityStatus(false);5}
setPaginationVisibilityEnabled
Enable pagination visibility.
1public function configure(): void2{3 // Shorthand for $this->setPaginationVisibilityStatus(true);4 $this->setPaginationVisibilityEnabled();5}
setPaginationVisibilityDisabled
Disable pagination visibility.
1public function configure(): void2{3 // Shorthand for $this->setPaginationVisibilityStatus(false);4 $this->setPaginationVisibilityDisabled();5}
setPerPageVisibilityStatus
Enabled by default, enable/disable per page visibility.
1public function configure(): void2{3 $this->setPerPageVisibilityStatus(true);4 $this->setPerPageVisibilityStatus(false);5}
setPerPageVisibilityEnabled
Enable per page visibility.
1public function configure(): void2{3 // Shorthand for $this->setPerPageVisibilityStatus(true);4 $this->setPerPageVisibilityEnabled();5}
setPerPageVisibilityDisabled
Disable per page visibility.
1public function configure(): void2{3 // Shorthand for $this->setPerPageVisibilityStatus(false);4 $this->setPerPageVisibilityDisabled();5}
setPerPageAccepted
Set the accepted values for the per page dropdown. Defaults to [10, 25, 50]
1public function configure(): void2{3 $this->setPerPageAccepted([10, 25, 50, 100]);4}
Note: Set an option of -1
to enable All
.
setPerPage
Set the selected option of the per page dropdown.
1public function configure(): void2{3 $this->setPerPage(10);4}
setDefaultPerPage
Set the default selected option of the per-page dropdown, will be over-ridden if set at Session or QueryString level.
1public function configure(): void2{3 $this->setDefaultPerPage(10);4}
Note: The value set must be included in the per page accepted
values.
setPaginationMethod
Set the pagination method. By default, the table will use the paginate
method.
You may specify simplePaginate
like so:
1public function configure(): void2{3 $this->setPaginationMethod('simple');4}
You may specify cursorPaginate
like so:
1public function configure(): void2{3 $this->setPaginationMethod('cursor');4}
getPerPageDisplayedItemIds
Returns the Primary Key for the currently visible rows in an array. This should be used in a blade to ensure accuracy.
1$this->getPerPageDisplayedItemIds();
getPerPageDisplayedItemCount
Returns the number of rows that are currently displayed. This should be used in a blade to ensure accuracy.
1$this->getPerPageDisplayedItemCount();
setDisplayPaginationDetailsEnabled
Enables display of Pagination Details (e.g. Displaying Rows x of y) - default behaviour
1public function configure(): void2{3 $this->setDisplayPaginationDetailsEnabled();4}
setDisplayPaginationDetailsDisabled
Disables display of Pagination Details (e.g. Displaying Rows x of y)
1public function configure(): void2{3 $this->setDisplayPaginationDetailsDisabled();4}
setPerPageFieldAttributes
Allows for customisation of the appearance of the "Per Page" dropdown
Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.
default-colors
Setting to false will disable the default colors for the Per Page dropdown, the default colors are: Bootstrap: None
Tailwind: border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600
default-styling
Setting to false will disable the default styling for the Per Page dropdown, the default styling is: Bootstrap 4: form-control
Bootstrap 5: form-select
Tailwind: block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50
1public function configure(): void2{3 $this->setPerPageFieldAttributes([4 'class' => 'border-red-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-red-700 dark:text-white dark:border-red-600', // Add these classes to the dropdown5 'default-colors' => false, // Do not output the default colors6 'default-styles' => true, // Output the default styling7 ]);8}
setShouldRetrieveTotalItemCountStatus
Used when "simple" pagination is being used, allows the enabling/disabling of the "total records" count. This may be desirable to disable in larger data sets. This is enabled by default.
1public function configure(): void2{3 $this->setShouldRetrieveTotalItemCountStatus(false);4}
setShouldRetrieveTotalItemCountEnabled
Used when "simple" pagination is being used, enables the "total records" count.
1public function configure(): void2{3 $this->setShouldRetrieveTotalItemCountEnabled();4}
setShouldRetrieveTotalItemCountDisabled
Used when "simple" pagination is being used, disables the "total records" count.
1public function configure(): void2{3 $this->setShouldRetrieveTotalItemCountDisabled();4}
setPaginationWrapperAttributes
Used to set attributes for the "div" that wraps the pagination section
1public function configure(): void2{3 $this->setPaginationWrapperAttributes(['class' => 'text-lg']);4}