Download the PHP package fantismic/yet-another-table without Composer
On this page you can find all versions of the php package fantismic/yet-another-table. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download fantismic/yet-another-table
More information about fantismic/yet-another-table
Files in fantismic/yet-another-table
Package yet-another-table
Short Description This is yet another laravel livewire table and come as is. You can filter, you can sort, you can bulk, toggle columns, the basics. The data input is a collection/array, we cant handle models.
License MIT
Informations about the package yet-another-table
Yet Another Table
This is yet another laravel livewire table and come as is. You can filter, you can sort, you can bulk, toggle columns, the basics. The data input is a collection/array, we cant handle models.
Consider using other packages like the ones that heavily inspired this one (rappasoft livewire tables/powergrid tables) for better performance and more and better features.
Requirements
- Laravel 10/11
- Livewire 3
Installation
You may want to let the user save the table arrange of columns. If so, publish the migrations...
...and run them.
That's it. You are ready to go.
Optionals
You may want to publish the lang settings and change all the 6 keys. Up to you.
Creating a table
The artisan way
To create a table you can run the following:
Rendering the table
This is nothing more than a livewire component, so the rendering is just the same:
Fullpage layout
Add the layout attribute right before the class with your layout:
Included in blade view
Livewire docs to render component
Base functions
settings(): void
Here you can set some settings to the table in general: title, column id, bulk, state handler, etc.
data(): collection
Here you return the data. As is, a collection of arrays or objects, you return it we display it. When you create a table an example of data is in the stub in order to see what is expected.
columns(): array
Here you return an array of column instances with the modifiers you want.
filters(): array
Here you return an array of filter instances.
options(): array
Here you return an array with function => label form.
This will generate an "Options" button in the view that will display a dropdown with the options you set and they will call the function established as key.
Passing data to the table
To pass data to the component, either from a route or from an attribute in the <livewire>
tag, you only need to declare it as a public property in the table component.
Using the mount() function
If you need to use the mount()
function in the table component, be sure to call the parent mount()
order to avoid errors.
Contents
Settings
View
- Set table title
- Override title classes
- Set a custom header
- Set component classes
- Add table classes
- Set table classes
- Set sticky header
- Table spinner
- Table spinner view
- Modals View
Sorting
- Set default sort column
- Set default sort direction asc
- Set default sort direction desc
Bulk
- Enable bulk
- Get selected rows
Table state handler
- Enable state handler
Pagination
- Use pagination
- Set default per page rows value
- Set options for per page rows
Misc
- Set column ID
- Show column toggle button
Columns
- Styling
- Custom Data
- Hidding columns
- Hidding columns from selector
- Hide column by default
- Boolean columns
- Link columns
Filters
- String filter
- DateRange Filter
- Select Filter
- Select Magic Filter
- Bool Filter
Options
Export
Settings
View
Set table title
setTitle(string $title)
By default the component shows only the table. Use this to display a title.
Override title classes
overrideTitleClasses(string $classes)
The title is displayed in a single div, if you want to change the default styling you can use this function to override the default classes and apply your own.
Tailwind classes only
Set a custom header
setCustomHeader(string $html)
If you want, you can add your own html in the header in order to replace the title at all or add some stuff.
This will render at the top of the component any html you pass.
Set component classes
setComponentClasses(string $classes)
Here you can set classes for the component wrapper, this includes the buttons, the pagination, the title, etc. Its the whole view.
Tailwind classes only
Add table classes
addTableClasses(string $classes)
Here you can add classes to the table wrapper. Only the table, buttons, pagination, title, etc are outside this wrapper.
Tailwind classes only
Set table classes
setTableClasses(string $classes)
Same as addTableClasses
, but instead of adding classes to the wrapper you override the defaults leaveing only what you pass to the function.
Tailwind classes only
Set sticky header
setStickyHeader()
Disabled by defualt, enable this to stick the table header, useful when disabled pagination with a scrolling table.
Table spinner
useTableSpinner(bool $bool)
Enabled by default, set this to false
to disable the loading spinner.
Table spinner view
setTableSpinnerView(string $view)
If useTableSpinner
is activated, you can use your own blade to display the spinner/message you want when loading.
Modals View
setModalsView(string $view)
This adds the passed view at the bottom of the component, useful for modals.
Sorting
Set default sort column
setSortColumn(string $column)
By default data is displayed as is, you can set a default sort by a column.
Set default sort direction asc
setSortDirectionAsc(bool $boolean)
If setSortColumn is set, by default the order will be 'asc', but you can enforce that if necessary.
Set default sort direction desc
setSortDirectionDesc(bool $boolean)
If setSortColumn is set, you can set the direction 'desc' by default.
Set search placeholder
setSearchLabel(string $title)
By default the global search placeholder is "Search", you can change it for whatever you want here.
Bulk
Enable bulk
hasBulk(bool $boolean)
Disabled by default. Set hasBulk to true to enable the functionality. This will use the 'id' column to identify the row, if there is no 'id' column in your data you must set which column to use with setColumnID
Bulk functionality can be combined with Options
Get selected rows
getSelectedRows()
This will return an array of ids of the current selected options.
Remove row from table
removeRowFromTable(string $id, ?bool $resetSelected = true)
Remove a row by its id from the table.
By default this function reset the selected rows, if you dont want that pass a
false
as a second parameter.
Table state handler
Enable state handler
useStateHandler(bool $boolean)
In order to enable this feature you need to publish and run the migration of the package.
Disabled by default. When enabled in column toggle button the user can save the current set of column's visibility. Each time the component is reloaded the columns will be visibile according to user election.
This functionality distincts users and tables, you can have many to many, each will get their custom visualization per table.
Pagination
Use pagination
usePagination(bool $bool)
Enabled by default, set this to false
to disable pagination.
Set default per page rows value
setPerPageDefault(int $number)
By default 10 rows are displayed. Change this to show as many as you want per page.
Set options for per page rows
setPerPageOptions(int $number)
Default value: ["10", "15", "25", "50"].
Misc
Set column ID
setColumnID(string $column)
By default 'id' is the assumed column for identifying a row in order to use bulk functions. If you want to set another column of your data you can do that using this.
Show column toggle button
showColumnToggle(bool $bool)
Enabled by default, you can disable this button and remove it from view.
Columns
Column::make(string label, ?string $field)
In order to render the data the way you need it, you have to create a "columns" function returning an array of any of the Column objects we provide.
Column
The Column class provides several modifiers to customize your table:
Styling
styling(string $classes)
You can pass classes to add to all <td>
in the column. The classes will be prefixed with !
in order to override other conflicting classes.
Custom Data
customData(Closure $function)
To customize the data of the column you can pass any html in a closure function with $row
and $value
variable available.
Tip: if you pass html, you need to add the ->toHtml() modifier
Hidding columns
hideWhen(bool $bool)
Hides the column from the view. When true
the user cannot access this column at all.
Hidding columns from selector
hideFromSelector(bool $bool)
Hides the column from the toggle dropdown.
Hide column by default
isVisible(bool $bool)
By default all columns are visible. IF you set this to true
the table will render with this column hidden, but the user can display it any time with the column toggle switch.
Boolean columns
BoolColumn::make(string $label, string $field)
You can use this column to boolean values, they will render in table view as ✔️ and ❌.
You can set what is considered true
for a strict comparison with the trueIs()
.
Also, you can customize the label/icons to appear in each case with trueLabel()
and falseLabel()
Link columns
LinkColumn::make(string $label, ?string $field)
Link column takes an destination and generates a link with the closure function.
Filters
[Filter]::make(string label, ?string $column)
In addition to the search input that filters globally on the table, you can add filters by column.
Note: if you pass only the label parameter, the filter will search for a column with same label and match, if you want to specify a column use the second parameter to assign the filter to the column label you want.
To enable filters, you need to create a "filters" function that returns an array of any of the Filter objects we provide.
String filter
FilterString::make(string $label, ?string $column)
This filter will search in column with label $label
and filter the table accordingly.
DateRange Filter
FilterDateRange::make(string $label, ?string $column)
This filter uses flatpickr to display a date range select and filter the table based on user input.
Select Filter
FilterSelect::make(string $label, array $options)
This filter displays a select
with the options given.
Select Magic Filter
FilterSelectMagic::make(string $label, array $options)
Same as select filter, but with magic. This filter with get all values from the column given, make the unique and display them.
Bool filter
FilterBool::make(string $label, ?array $compared_with = null, ?string $index = null)
This filter displays a toggle
to make boolean comparisons.
By default it will compare true
and false
, but you can pass an array ["true" => "My True value", "false" => "My false value"]
and it will compare to that.
Options
You can add an additional button next to the column toggle to display a list of custom options/actions. This options/actions will 'wire:click' the key given.
In this example, when user clicks on 'Delete selected rows' the function 'remove' will be called.
Make sure you implement this functions in your component in order to avoid errors.
Export
You have three methods in order to handle the data to export:
If you have Laravel Excel the stub comes with three functions added to the Options dropdown in order to export the data by this criterias that will work out of the box.
If you have other ways to expor the data or simply dont want to export at all feel free to delete the functions in the component.