README

git repository

Simple yet effective and fully configurable component for all CRUD operations. A Laravel - Livewire - WireUI component that can intuitively present model data in a table (or create/update/delete forms) using Tailwind and WireUI with minimal component configuration while also maintaining fully scalable, extendable and configurable capabilities. It also comes with optional built-in smart-forms that facilitate all CRUD operations.

Features
Actual example
Installation
Example usage
Available configs
i. Table
ii. Form
Events & Listeners
i. Table
ii. Form

Features

Auto detect column models (except enums)
Search columns depending on their type with text, select, number input etc.
Sort/Group by column asc/desc/null
Paging
Column visibility
Add / edit / delete object forms
State save
Context menu (right click)

Actual example

Auto created table just by giving the model class

<livewire:wire-ui-smart-table
    table_core_db_model="WireUiSmartTable\\Models\\TestModel"
    table_features_use_fillable="false"
    table_columns_enums='{"test_enum":"WireUiSmartTable\\\\Enums\\\\TestEnum::cases"}'
/>

Auto created table with the above code

Auto created form just by giving the model class

<livewire:wire-ui-smart-form
    form_core_db_model="WireUiSmartTable\\Models\\TestModel"
    form_columns_enums='{"test_enum":"WireUiSmartTable\\\\Enums\\\\TestEnum::cases"}'
/>

Auto created table with the above code

Installation

Follow this steps to install the packages into your laravel project

Do not forget WireUI installation instructions see https://v1.wireui.dev/docs/get-started#installation

composer require iakovos/wireui-smart-table
Install Tailwind CSS (see https://tailwindcss.com/docs/installation)
npm install livewire-sortable --save-dev (see https://github.com/livewire/sortable)
Import livewire-sortable package in your bundle (app.js):
import 'livewire-sortable'
// Or.
require('livewire-sortable')
Add @stack('wire-ui-smart-scripts') after livewire and WireUI scripts on your root document template

Example usage

Simplest example usage for a model that has 1 enum property is


<livewire:wire-ui-smart-table
    table_core_db_model="App\\Models\\User"
    table_columns_enums='{"department_type":"App\\\\Enums\\\\DepartmentTypes::cases"}'
/>

or prettier


<livewire:wire-ui-smart-table
    table_core_db_model="$mymodel"
    table_columns_enums='{{ json_encode($enums) }}'
/>

Available configurations

The only required configuration for your component is the livewire properties table_core_db_model and table_columns_enums (if any). Smart table will auto-detect all columns and relations on the model and display a table with columns, filters, sorting, paging, visibility and grouping (more to be added later)

All templates can be changed either by changing the path to the desired variable template or by publishing the templates and changing them.

In case you wish to show certain columns or wish to configure it further here are all the configuration options (all options are livewire component attributes) :

Table Configs

Required

Livewire property name	Definition
table_core_db_model	The main model for which the table is used for e.g. App\Models\User
table_columns_enums	(if any) Declare a column as enum, path\to\a\class::cases should return available cases of an enum e.g. `{"User.column_name":"path\\\\to\\\\a\\\\enum\\\\class::cases"}`

Optional / auto-detected

Livewire property name	Definition
table_columns_columns	The columns you wish to show. e.g. `table_columns_columns='["id","name","relationName.id","relationName.some_column"]'`
table_columns_booleans	A flat array of boolean column names e.g. `["column_1","relation.column_2"]`
table_columns_integers	A flat array of numeric columns names e.g. `["column_1","relation.column_2"]`
table_columns_datetimes	A flat array of columns that should appear with datepicker filtering e.g. `["column_1","relation.column_2"]`
table_relations_files	A flat array containing the names of file relations. Relations must be of HasMany type and file model should have at least the following columns: name, path, size, category
builder_filters	a function to be called for hard-filtering rows (e.g. according to application user rights) e.g. `builder_filters="App\\Http\\Controllers\\UserResourceController::applyLogicFilters"`, defined as `function applyLogicFilters($builder):Builder` MUST return builder
table_relations_filters	An associated array that defines which function to call to add filters for a given column dropdown e.g. `table_relations_filters={"broker_id":"App\\\\Http\\\\Controllers\\\\UserResourceController::applyColumnFilters"}` defined as `function applyColumnFilters($column_name, $builder):Builder` MUST return builder
table_features_use_fillable	Use laravel fillable (if false finds all columns from schema) if columns were not defined
table_features_search	Search state variable
table_features_columns_visibility	Visibility state variable.
table_features_replaces	Most (if not all) of the times column names are not user-friendly. Smart table will auto-convert column name " relationName.some_column" to "Relation Name Some Column" but just in case that is not enough you can declare the columns however you want e.g. `{"relationName.some_column":"My new column"}`
table_features_group_properties	A flat array of column names initially used for grouping
table_settings_default_datetime_format	The datetime format to use on table. default is 'd-m-Y'
table_settings_default_datepicker_format	The datetime format to use on datepickers. default is 'DD-MM-YYYY'
table_settings_enable_groups	Enable or disable group on request. default is true
table_settings_show_clear_filter	Show or hide the clear filters button. default is true
table_settings_show_loading	Show or hide loading spinners. default is true
table_settings_show_filters	Show or hide column filters. default is true
table_settings_enable_joined_groups	Allow or not using more than 1 column for groups. default is false
table_settings_save_state	Persist current table state on database per account/model. default is true
table_templates_top_toolbox	The template that includes all the top section above the actual table with its components
table_templates_top_right_buttons	The buttons template to use on the top right of table for row actions
table_templates_header_row	Includes all the th headers
table_templates_filters_style	Selects style for filters, on every table column or a dropdown, valid values="dropdown" or "table", default table
table_templates_filters_row	The table row containing all header filters in case of table style
table_templates_filters_integer	Template for integer column filter
table_templates_filters_enum	Template for enum column filter
table_templates_filters_datetime	Template for datetime column filter
table_templates_filters_boolean	Template for boolean column filters
table_templates_filters_string	Template for string column filters
table_templates_filters_select_multiple	Template for relation filters
table_templates_data_group_row	Template for table group
table_templates_data_row	Template for table row
table_templates_cell_id_checkbox	Template for first cell containing the select row checkbox
table_templates_cell_checkbox	Template for boolean cells
table_templates_cell_array	Template for cell containing many values e.g. a m2m relationship
table_templates_cell_string	Template for string cells
table_templates_context_menu	The buttons template to use as context menu when right-clicking a row

Form Configs

Required

Livewire property name	Definition
form_core_db_model	The main model for which the table is used for e.g. App\Models\User
form_columns_enums	(if any) Declare a column as enum, path\to\a\class::cases should return available cases of an enum e.g. `{"User.column_name":"path\\\\to\\\\a\\\\enum\\\\class::cases"}`

Optional / auto-detected

Livewire property name	Definition
form_features_replaces	Most (if not all) of the times column names are not user-friendly. Smart table will auto-convert column name " relationName.some_column" to "Relation Name Some Column" but just in case that is not enough you can declare the columns however you want e.g. `{"relationName.some_column":"My new column"}`
form_features_use_fillable	use model fillables otherwise detect columns from schema
form_columns_columns	The columns you wish to show. e.g. `table_columns_columns='["id","name","relationName.id","relationName.some_column"]'`
form_columns_booleans	A flat array of boolean column names e.g. `["column_1","relation.column_2"]`
form_columns_integers	A flat array of numeric columns names e.g. `["column_1","relation.column_2"]`
form_columns_datetimes	A flat array of columns that should appear as datepicker
form_columns_texts	A flat array of columns that should appear as textarea
form_relations_files	A flat array containing the names of file relations. Relations must be of HasMany type and file model should have at least the following columns: name, path, size, category
form_default_columns_spans	The number of grid columns to use defaults to 4
form_columns_spans	An associative array of column_name=>grid-col-span for each property defaults to 1
form_columns_hidden	A flat array of column names to hide
form_relations_hidden	A flat array of relation names to hide
form_enum_options	An associative array of arrays containing the enum values (not needed if form_columns_enums are defined
form_attributes	The columns that are being used by the component after auto-detection or json deserialization
form_settings_layout_type	The form layout type defaults to "single" but will support "tabs" in the near future
form_rules_create	Validation rules used when creating a new item
form_rules_update	Validation rules used when editing an item
form_events_creating	Function to be called before creating an object e.g. `form_events_creating="App\\Livewire\\Calendar::creatingNewChecklist"` MUST RETURN THE ITEM ITSELF
form_events_created	Function to be called after creation of an object MUST RETURN THE ITEM ITSELF
form_events_updating	Function to be called before updating an object MUST RETURN THE ITEM ITSELF
form_events_updated	Function to be called after updating an object MUST RETURN THE ITEM ITSELF
form_events_deleting	Function to be called before deleting an object
form_events_deleted	Function to be called after deletion of an object
template_layout_single_add	Template used for add form
template_layout_single_edit	Template used for edit form
template_relation_file	Template used for file relation
template_attribute_boolean	Template used for boolean attributes
template_attribute_datetime	Template used for datetime attributes
template_attribute_enum	Template used for enum attributes
template_attribute_integer	Template used for integer attributes
template_attribute_select_multiple	Template used for many to many relation attributes
template_attribute_select_single	Template used for single select relation and enum attributes

Events and Listeners

1. Table

Event name	Definition
refresh	Refreshes the table
setSelectedIds(array $ids)	Set the selected/checked ids on table e.g. `[5=>true, 17=>true]`
rowClicked($id)	Signal that a row with $id has been clicked

2. Form

Event name	Definition
openSmartForm	Shows the form
rowClicked($id)	Signal that a row with $id has been clicked
deleteItem	Deletes the item with id defined by rowClicked

iakovos / wireui-smart-table

Maintainers

Details

README

Features

Actual example

Auto created table just by giving the model class

Auto created form just by giving the model class

Installation

Example usage

Available configurations

Table Configs

Required

Optional / auto-detected

Form Configs

Required

Optional / auto-detected

Events and Listeners

1. Table

2. Form