- Creating Columns
- Relationships
- Available Methods
- Other Column Types
- Column Selection
- Secondary Header
- Footer
Getting Started
Usage
DataTable
Columns
Rows
Sorting
Pagination
Search
Bulk Actions
Filters
Reordering
Secondary Header
Footer
Examples
Misc.
🎉 Enjoying this package? Consider sponsoring me on GitHub or buying me a beer.
This is the documentation for v2. 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 on the datatable component.
General
setPrimaryKey
Set the primary key column of the component.
public function configure(): void
{
$this->setPrimaryKey('id');
}
Attributes
setComponentWrapperAttributes
Set a list of attributes to override on the main wrapper of the component
public function configure(): void
{
$this->setComponentWrapperAttributes([
'id' => 'my-id',
'class' => 'this that',
]);
}
setTableWrapperAttributes
Set a list of attributes to override on the div that wraps the table
public function configure(): void
{
$this->setTableWrapperAttributes([
'id' => 'my-id',
'class' => 'this that',
]);
}
By default, this replaces the default classes on the table wrapper, if you would like to keep them, set the default flag to true.
public function configure(): void
{
$this->setTableWrapperAttributes([
'default' => true,
'class' => 'added these classes',
]);
}
setTableAttributes
Set a list of attributes to override on the table element
public function configure(): void
{
$this->setTableAttributes([
'id' => 'my-id',
'class' => 'this that',
]);
}
By default, this replaces the default classes on the table, if you would like to keep them, set the default flag to true.
public function configure(): void
{
$this->setTableAttributes([
'default' => true,
'class' => 'added these classes',
]);
}
setTheadAttributes
Set a list of attributes to override on the thead element
public function configure(): void
{
$this->setTheadAttributes([
'id' => 'my-id',
'class' => 'this that',
]);
}
By default, this replaces the default classes on the thead, if you would like to keep them, set the default flag to true.
public function configure(): void
{
$this->setTheadAttributes([
'default' => true,
'class' => 'added these classes',
]);
}
setTbodyAttributes
Set a list of attributes to override on the tbody element
public function configure(): void
{
$this->setTbodyAttributes([
'id' => 'my-id',
'class' => 'this that',
]);
}
By default, this replaces the default classes on the tbody, if you would like to keep them, set the default flag to true.
public function configure(): void
{
$this->setTbodyAttributes([
'default' => true,
'class' => 'added these classes',
]);
}
setThAttributes
Set a list of attributes to override on the th elements
public function configure(): void
{
// Takes a callback that gives you the current column.
$this->setThAttributes(function(Column $column) {
if ($column->isField('name')) {
return [
'class' => 'bg-green-500',
];
}
return [];
});
}
setThSortButtonAttributes
Set a list of attributes to override on the th sort button elements
public function configure(): void
{
// Takes a callback that gives you the current column.
$this->setThSortButtonAttributes(function(Column $column) {
if ($column->isField('name')) {
return [
'class' => 'bg-green-500',
];
}
return [];
});
}
By default, this replaces the default classes on the th, if you would like to keep them, set the default flag to true.
public function configure(): void
{
$this->setThAttributes(function(Column $column) {
if ($column->isField('name')) {
return [
'default' => true,
'class' => 'bg-green-500',
];
}
return ['default' => true];
});
}
setTrAttributes
Set a list of attributes to override on the tr elements
public function configure(): void
{
// Takes a callback that gives you the current row and its index
$this->setTrAttributes(function($row, $index) {
if ($index % 2 === 0) {
return [
'class' => 'bg-gray-200',
];
}
return [];
});
}
By default, this replaces the default classes on the tr, if you would like to keep them, set the default flag to true.
public function configure(): void
{
$this->setTrAttributes(function($row, $index) {
if ($index % 2 === 0) {
return [
'default' => true,
'class' => 'bg-gray-200',
];
}
return ['default' => true];
});
}
setTdAttributes
Set a list of attributes to override on the td elements
public function configure(): void
{
// Takes a callback that gives you the current column, row, column index, and row index
$this->setTdAttributes(function(Column $column, $row, $columnIndex, $rowIndex) {
if ($column->isField('total') && $row->total < 1000) {
return [
'class' => 'bg-red-500 text-white',
];
}
return [];
});
}
By default, this replaces the default classes on the td, if you would like to keep them, set the default flag to true.
public function configure(): void
{
// Takes a callback that gives you the current column, row, column index, and row index
$this->setTdAttributes(function(Column $column, $row, $columnIndex, $rowIndex) {
if ($column->isField('total') && $row->total < 1000) {
return [
'default' => true,
'class' => 'bg-red-500 text-white',
];
}
return ['default' => true];
});
}
Offline
Offline indicator is enabled by default, but if you ever needed to toggle it you can use the following methods:
Enable/disable the offline indicator.
setOfflineIndicatorStatus
public function configure(): void
{
$this->setOfflineIndicatorStatus(true);
$this->setOfflineIndicatorStatus(false);
}
setOfflineIndicatorEnabled
Enable the offline indicator.
public function configure(): void
{
// Shorthand for $this->setOfflineIndicatorStatus(true)
$this->setOfflineIndicatorEnabled();
}
setOfflineIndicatorDisabled
Disable the offline indicator.
public function configure(): void
{
// Shorthand for $this->setOfflineIndicatorStatus(false)
$this->setOfflineIndicatorDisabled();
}
Query String
The query string is enabled by default, but if you ever needed to toggle it you can use the following methods:
setQueryStringStatus
Enable/disable the query string.
public function configure(): void
{
$this->setQueryStringStatus(true);
$this->setQueryStringStatus(false);
}
setQueryStringEnabled
Enable the query string.
public function configure(): void
{
// Shorthand for $this->setQueryStringStatus(true)
$this->setQueryStringEnabled();
}
setQueryStringDisabled
Disable the query string.
public function configure(): void
{
// Shorthand for $this->setQueryStringStatus(false)
$this->setQueryStringDisabled();
}
Relationships
Disabled by default, enable to eager load relationships for all columns in the component.
setEagerLoadAllRelationsStatus
Enable/disable column relationship eager loading.
public function configure(): void
{
$this->setEagerLoadAllRelationsStatus(true);
$this->setEagerLoadAllRelationsStatus(false);
}
setEagerLoadAllRelationsEnabled
Enable column relationship eager loading.
public function configure(): void
{
// Shorthand for $this->setEagerLoadAllRelationsStatus(true)
$this->setEagerLoadAllRelationsEnabled();
}
setEagerLoadAllRelationsDisabled
Disable column relationship eager loading.
public function configure(): void
{
// Shorthand for $this->setEagerLoadAllRelationsStatus(false)
$this->setEagerLoadAllRelationsDisabled();
}
Builder
setAdditionalSelects
By default the only columns defined in the select statement are the ones defined via columns. If you need to define additional selects that you don't have a column for you may:
public function configure(): void
{
$this->setAdditionalSelects(['users.id as id']);
}
Since you probably won't have an ID
column defined, the ID will not be available on the model to use. In the case of an actions column where you have buttons specific to the row, you probably need that, so you can add the select statement to make it available on the model.
Misc.
setEmptyMessage
Set the message displayed when the table is filtered but there are no results to show.
Defaults to: "No items found. Try to broaden your search."
public function configure(): void
{
$this->setEmptyMessage('No results found');
}