├── .styleci.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── composer.json ├── config └── config.php ├── demo └── livewire-smart-table.gif ├── resources └── views │ ├── livewire-smart-table.blade.php │ └── sort-icon.blade.php └── src ├── LivewireSmartTable.php └── LivewireSmartTableServiceProvider.php /.styleci.yml: -------------------------------------------------------------------------------- 1 | preset: laravel 2 | 3 | disabled: 4 | - single_class_element_per_statement 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to `livewire-smart-table` will be documented in this file 4 | 5 | ## 1.4.0 - 2022-02-25 6 | - Laravel 9.x support added. 7 | - PHP 7.4, 8.0 and 8.1 support added. 8 | - PHP 7.1 support removed. 9 | 10 | ## 1.3.0 - 2021-04-10 11 | - Laravel 8.x support added. 12 | - Livewire 2.x support added. 13 | - Styles changed to Tailwind. 14 | - Added support for array casted json fields. 15 | 16 | ## 1.2.1 - 2020-07-31 17 | - Command for publishing the views has been added to the README.md file. 18 | 19 | ## 1.2.0 - 2020-06-28 20 | - Tests added 21 | 22 | ## 1.1.0 - 2020-06-21 23 | 24 | - Added column properties. 25 | 26 | ## 1.0.0 - 2020-06-14 27 | 28 | - initial release 29 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are **welcome** and will be fully **credited**. 4 | 5 | Please read and understand the contribution guide before creating an issue or pull request. 6 | 7 | ## Etiquette 8 | 9 | This project is open source, and as such, the maintainers give their free time to build and maintain the source code 10 | held within. They make the code freely available in the hope that it will be of use to other developers. It would be 11 | extremely unfair for them to suffer abuse or anger for their hard work. 12 | 13 | Please be considerate towards maintainers when raising issues or presenting pull requests. Let's show the 14 | world that developers are civilized and selfless people. 15 | 16 | It's the duty of the maintainer to ensure that all submissions to the project are of sufficient 17 | quality to benefit the project. Many developers have different skillsets, strengths, and weaknesses. Respect the maintainer's decision, and do not be upset or abusive if your submission is not used. 18 | 19 | ## Viability 20 | 21 | When requesting or submitting new features, first consider whether it might be useful to others. Open 22 | source projects are used by many developers, who may have entirely different needs to your own. Think about 23 | whether or not your feature is likely to be used by other users of the project. 24 | 25 | ## Procedure 26 | 27 | Before filing an issue: 28 | 29 | - Attempt to replicate the problem, to ensure that it wasn't a coincidental incident. 30 | - Check to make sure your feature suggestion isn't already present within the project. 31 | - Check the pull requests tab to ensure that the bug doesn't have a fix in progress. 32 | - Check the pull requests tab to ensure that the feature isn't already in progress. 33 | 34 | Before submitting a pull request: 35 | 36 | - Check the codebase to ensure that your feature doesn't already exist. 37 | - Check the pull requests to ensure that another person hasn't already submitted the feature or fix. 38 | 39 | ## Requirements 40 | 41 | If the project maintainer has any additional requirements, you will find them listed here. 42 | 43 | - **[PSR-2 Coding Standard](https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-2-coding-style-guide.md)** - The easiest way to apply the conventions is to install [PHP Code Sniffer](https://pear.php.net/package/PHP_CodeSniffer). 44 | 45 | - **Add tests!** - Your patch won't be accepted if it doesn't have tests. 46 | 47 | - **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date. 48 | 49 | - **Consider our release cycle** - We try to follow [SemVer v2.0.0](https://semver.org/). Randomly breaking public APIs is not an option. 50 | 51 | - **One pull request per feature** - If you want to do more than one thing, send multiple pull requests. 52 | 53 | - **Send coherent history** - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please [squash them](https://www.git-scm.com/book/en/v2/Git-Tools-Rewriting-History#Changing-Multiple-Commit-Messages) before submitting. 54 | 55 | **Happy coding**! 56 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Turan Karatuğ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Livewire Smart Table 2 | An advanced, dynamic datatable component with pagination, sorting, and searching including json data. 3 | 4 | ![Livewire Smart Table Demo](demo/livewire-smart-table.gif) 5 | 6 | ## Installation 7 | 8 | You can install the package via composer: 9 | 10 | ```bash 11 | composer require tkaratug/livewire-smart-table 12 | ``` 13 | 14 | ## Requirements 15 | This package uses livewire/livewire (https://laravel-livewire.com/) under the hood. 16 | 17 | It also uses Tailwind (https://tailwindcss.com) for base styling. 18 | 19 | Please make sure you include both of these dependencies before using this component. 20 | 21 | ## Usage 22 | In order to use this component, you must create a new Livewire component that extends from `LivewireSmartTable` 23 | 24 | You can use `make:livewire` to create a new component. For example. 25 | 26 | ``` 27 | php artisan make:livewire UserList 28 | ``` 29 | 30 | In the `UserList` class, instead of extending from the base Livewire Component class, extend from `LivewireSmartTable` class. 31 | Also, remove the render method. You'll have a class similar to this snippet. 32 | 33 | In this class, you must define columns that you want to show in a table. 34 | 35 | ```php 36 | class UserList extends LivewireSmartTable 37 | { 38 | $columns = [ 39 | 'id' => [ 40 | 'type' => 'string', // column type 41 | 'name' => 'Id', // column header 42 | 'class' => 'text-danger', // column class 43 | ], 44 | 'name' => [ 45 | 'type' => 'string', 46 | 'name' => 'Name', 47 | ], 48 | 'email' => [ 49 | 'type' => 'string', 50 | 'name' => 'E-Mail', 51 | ], 52 | ]; 53 | } 54 | ``` 55 | 56 | Keys of columns array must be the same as column names in database table or key of a json object. 57 | 58 | To render the component in a view, just use the Livewire tag or include syntax. 59 | 60 | ```blade 61 | 62 | ``` 63 | 64 | `$query` must be instance of an **Eloquent Collection**. 65 | 66 | For example, create a `UserController` class, select users to show in a table and pass them to a view file. 67 | 68 | ````php 69 | class UserController extends Controller 70 | { 71 | public function index() 72 | { 73 | $users = App\User::where('is_active', '=', true)->get(); 74 | 75 | return view('users', ['users' => $users]); 76 | } 77 | } 78 | ```` 79 | 80 | Then in `users.blade.php` use Livewire tag and give users to `query` attribute. 81 | ``` 82 | 83 | ``` 84 | 85 | ## Column Properties 86 | ### ```string``` 87 | It is used for showing data as string in HTML table. 88 | 89 | ### ```link``` 90 | It is used for showing data as link in HTML table. 91 | 92 | In addition to type, you must define a `url` to redirect when clicked. 93 | ```php 94 | $columns = [ 95 | 'profile' => [ 96 | 'type' => 'link', 97 | 'url' => 'http://example.com/users/{id}/profile', 98 | 'target' => '_blank' 99 | ], 100 | ]; 101 | ``` 102 | 103 | It is also possible to give parameters to the URL. All you need to do is give the column name containing the data you want to pass to the url in curly braces. 104 | 105 | Let's say you have a database table contains blog posts and each post has a slug. To show post titles in html table as a link, you need to define column as follows: 106 | ```php 107 | 'title' => [ 108 | 'type' => 'link', 109 | 'url' => 'http://example.com/posts/{slug}', 110 | ]; 111 | ``` 112 | The component is smart enough to find the `slug` field of current record and give it to the url. 113 | 114 | ### ```json``` 115 | It is used for showing data from json columns. If you have a json column in your database table, you can show values from it in html table. 116 | 117 | Let's say you have a json column named `contact` in your database table and contains address details in it. 118 | 119 | `{"address":{"country":"Turkey","city":"Istanbul","state":"Besiktas"}}` 120 | 121 | To show just the city in html table, you need to define column as follows: 122 | ```php 123 | 'city' => [ 124 | 'type' => 'json', 125 | 'name' => 'City', // Text for column header 126 | 'from' => 'contact', // field that contains json data in a db table 127 | 'value' => 'address.city' // nested json value 128 | ]; 129 | ``` 130 | It will find the json data from `contact` column, and take city value inside address key then show it on the table. 131 | 132 | ### ```actions``` 133 | It is used for showing action links for each row in html table. 134 | 135 | You need to give `element` and `url` keys for the html element of the link and url to redirect. 136 | 137 | ```php 138 | 'actions' => [ 139 | 'type' => 'actions', 140 | 'name' => 'Actions', // Text for column header 141 | 'actions' => [ 142 | [ 143 | 'element' => '', 144 | 'url' => 'http://example.com/users/{id}/profile' 145 | ], 146 | [ 147 | 'element' => '', 148 | 'url' => 'http://example.com/users/{id}/edit' 149 | ], 150 | ] 151 | ]; 152 | ``` 153 | 154 | ## Publishing Views 155 | You can also publish the view files to customize them. 156 | 157 | All you need to do is running the following command. Then the views will be copied into `/resources/views/vendor/livewire-smart-table` directory. 158 | 159 | ```bash 160 | php artisan vendor:publish --tag=livewire-smart-table-views 161 | ``` 162 | 163 | ## Testing 164 | 165 | ```bash 166 | composer test 167 | ``` 168 | 169 | ## Security 170 | 171 | If you discover any security related issues, please email tkaratug@hotmail.com.tr instead of using the issue tracker. 172 | 173 | ## Credits 174 | 175 | - [Turan Karatuğ](https://github.com/tkaratug) 176 | 177 | ## License 178 | 179 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information. 180 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tkaratug/livewire-smart-table", 3 | "description": "An advanced datatable component for Laravel Livewire", 4 | "keywords": [ 5 | "tkaratug", 6 | "livewire-smart-table" 7 | ], 8 | "homepage": "https://github.com/tkaratug/livewire-smart-table", 9 | "license": "MIT", 10 | "type": "library", 11 | "authors": [ 12 | { 13 | "name": "Turan Karatuğ", 14 | "email": "tkaratug@hotmail.com.tr", 15 | "role": "Developer" 16 | } 17 | ], 18 | "require": { 19 | "php": "^7.4|^8.0|^8.1|^8.2", 20 | "illuminate/support": "^6.0|^7.0|^8.0|^9.0|^10.0", 21 | "livewire/livewire": "^2.0", 22 | "ext-json": "*" 23 | }, 24 | "require-dev": { 25 | "orchestra/testbench": "^5.0|^6.0|^7.0|^8.0", 26 | "phpunit/phpunit": "^9.0" 27 | }, 28 | "autoload": { 29 | "psr-4": { 30 | "Tkaratug\\LivewireSmartTable\\": "src" 31 | } 32 | }, 33 | "autoload-dev": { 34 | "psr-4": { 35 | "Tkaratug\\LivewireSmartTable\\Tests\\": "tests" 36 | } 37 | }, 38 | "scripts": { 39 | "test": "vendor/bin/phpunit", 40 | "test-coverage": "vendor/bin/phpunit --coverage-html coverage" 41 | 42 | }, 43 | "config": { 44 | "sort-packages": true 45 | }, 46 | "extra": { 47 | "laravel": { 48 | "providers": [ 49 | "Tkaratug\\LivewireSmartTable\\LivewireSmartTableServiceProvider" 50 | ], 51 | "aliases": { 52 | "LivewireSmartTable": "Tkaratug\\LivewireSmartTable\\LivewireSmartTableFacade" 53 | } 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /config/config.php: -------------------------------------------------------------------------------- 1 | 2 | @if ($data->isEmpty()) 3 | 6 | @else 7 |
8 |
9 |
10 |
11 | 16 |
17 | 20 | 21 | 22 | 23 | 24 |
25 |
26 |
27 | 28 |
29 |
30 |
31 |
32 | 37 |
38 |
39 |
40 |
41 |
42 | 43 |
44 | 45 | 46 | 47 | @foreach ($columns as $column => $props) 48 | 66 | @endforeach 67 | 68 | 69 | 70 | @foreach ($data as $item) 71 | 72 | @foreach ($columns as $column => $props) 73 | @if ($props['type'] === 'link') 74 | 79 | @elseif ($props['type'] === 'actions') 80 | 85 | @else 86 | 89 | @endif 90 | @endforeach 91 | 92 | @endforeach 93 | 94 |
49 | @if ($props['type'] !== 'actions') 50 | 51 | @if (isset($props['name'])) 52 | {{ $props['name'] }} 53 | @else 54 | {{ $column }} 55 | @endif 56 | 57 | @include('livewire-smart-table::sort-icon', ['field' => $column]) 58 | @else 59 | @if (isset($props['name'])) 60 | {{ $props['name'] }} 61 | @else 62 | {{ $column }} 63 | @endif 64 | @endif 65 |
75 | 76 | {!! $item->{$column} !!} 77 | 78 | 81 | @foreach ($item->{$column} as $option) 82 | {!! $option['element'] !!} 83 | @endforeach 84 | 87 | {!! $item->{$column} !!} 88 |
95 |
96 | 97 |
98 | {{ $data->links() }} 99 |
100 |
101 | @endif 102 | 103 | -------------------------------------------------------------------------------- /resources/views/sort-icon.blade.php: -------------------------------------------------------------------------------- 1 | @if ($sortField !== $field) 2 | {!! $sortIcon !!} 3 | @elseif ($sortAsc) 4 | {!! $sortAscIcon !!} 5 | @else 6 | {!! $sortDescIcon !!} 7 | @endif 8 | -------------------------------------------------------------------------------- /src/LivewireSmartTable.php: -------------------------------------------------------------------------------- 1 | query = $query; 41 | $this->page = request()->query('page', $this->page); 42 | } 43 | 44 | /** 45 | * Sort by. 46 | * 47 | * @param $field 48 | * @return void 49 | */ 50 | public function sortBy($field): void 51 | { 52 | if ($this->sortField === $field) { 53 | $this->sortAsc = ! $this->sortAsc; 54 | } 55 | 56 | $this->sortField = $field; 57 | } 58 | 59 | /** 60 | * Render 61 | * 62 | * @return Factory|View 63 | */ 64 | public function render() 65 | { 66 | $items = $this->prepareData($this->query); 67 | 68 | // If user search something, filter items by input 69 | if (!empty($this->search)) { 70 | $items = $this->query->filter(function ($item) { 71 | $found = false; 72 | foreach ($this->columns as $column => $props) { 73 | if ($props['type'] !== 'actions') { 74 | if (stripos($item->{$column}, $this->search) !== false) { 75 | $found = true; 76 | } 77 | } 78 | } 79 | return $found; 80 | }); 81 | } 82 | 83 | // Sort results 84 | $data = $this->sortAsc 85 | ? $items->sortBy($this->sortField) 86 | : $items->sortByDesc($this->sortField); 87 | 88 | // Paginate results 89 | $data = new LengthAwarePaginator( 90 | $data->forPage($this->page, $this->perPage), 91 | $data->count(), 92 | $this->perPage, 93 | $this->page, 94 | ['path' => request()->url(), 'query' => request()->query()] 95 | ); 96 | 97 | return view('livewire-smart-table::livewire-smart-table', [ 98 | 'data' => $data, 99 | 'columns' => $this->columns, 100 | ]); 101 | } 102 | 103 | /** 104 | * Prepare data by columns 105 | * 106 | * @param Collection $query 107 | * @return Collection 108 | * @throws \JsonException 109 | */ 110 | private function prepareData(Collection $query): Collection 111 | { 112 | foreach ($query as $item) { 113 | foreach ($this->columns as $key => $props) { 114 | if (isset($props['type'])) { 115 | switch ($props['type']) { 116 | case 'json': 117 | $from = $item->hasCast($props['from'], ['array']) 118 | ? $item->{$props['from']} 119 | : json_decode($item->{$props['from']}, true, 512, JSON_THROW_ON_ERROR); 120 | $nestedFields = explode('.', $props['value']); 121 | foreach ($nestedFields as $field) { 122 | $from = $from[$field] ?? null; 123 | } 124 | $item->{$key} = $from; 125 | break; 126 | case 'link': 127 | $item->{$key.'_url'} = $this->makeUrl($props['url'], $item); 128 | break; 129 | case 'actions': 130 | $actions = []; 131 | foreach ($props['actions'] as $action) { 132 | $actions[] = [ 133 | 'element' => $action['element'], 134 | 'url' => $this->makeUrl($action['url'], $item), 135 | ]; 136 | $item->{$key} = $actions; 137 | } 138 | break; 139 | default: 140 | } 141 | } 142 | } 143 | } 144 | return $query; 145 | } 146 | 147 | /** 148 | * Make url 149 | * 150 | * @param string $url 151 | * @param $item 152 | * @return string 153 | */ 154 | private function makeUrl(string $url, $item): string 155 | { 156 | preg_match_all('/\{.*?\}/', $url, $matches); 157 | 158 | foreach ($matches[0] as $match) { 159 | preg_match('/\{([^\]]*)\}/', $match, $field); 160 | $url = str_replace($match, $item->{$field[1]}, $url); 161 | } 162 | 163 | return $url; 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /src/LivewireSmartTableServiceProvider.php: -------------------------------------------------------------------------------- 1 | loadViewsFrom(__DIR__.'/../resources/views', 'livewire-smart-table'); 15 | 16 | if ($this->app->runningInConsole()) { 17 | $this->publishes([ 18 | __DIR__.'/../config/config.php' => config_path('livewire-smart-table.php'), 19 | ], 'config'); 20 | 21 | // Publishing the views. 22 | $this->publishes([ 23 | __DIR__.'/../resources/views' => resource_path('views/vendor/livewire-smart-table'), 24 | ], 'livewire-smart-table-views'); 25 | } 26 | } 27 | 28 | /** 29 | * Register the application services. 30 | */ 31 | public function register(): void 32 | { 33 | // Automatically apply the package configuration 34 | $this->mergeConfigFrom(__DIR__.'/../config/config.php', 'livewire-smart-table'); 35 | } 36 | } 37 | --------------------------------------------------------------------------------