library mks-smart-table {🖫 49, ⚐ 7, ★ 1}

mikelmi/mks-smart-table

Laravel Server-side processing for angular-smart-table

Saturday, March 4, 2017
by mikelmi
Repository
1 Watchers
1 Stars
49 Installations

JavaScript
2 Dependents
0 Suggesters
0 Forks
0 Open issues
7 Versions
26 % Grown

The README.md

Server side processing for angular-smart-table for Laravel 5

This package provides services for server-side processing data for angular-smart-table, _(*1)

Installation

Install via composer, _(*2)

    composer require mikelmi/mks-theme:dev-master

Add the service provider in config/app.php, to providers:, _(*3)

    Mikelmi\SmartTable\Providers\SmartTableServiceProvider::class,

Publish assets, _(*4)

    php artisan vendor:publish --provider="Mikelmi\SmartTable\Providers\SmartTableServiceProvider"

Usage

Server side

Create route for handling smart-table-request., _(*5)

Inside the route:, _(*6)

Create data source. It can be Query Builder (Eloquent/Database) or Collection, _(*7)

//Query Builder
$source = \App\User::select(['id', 'name', 'email', 'created_at']);

//or Collection
$source = collect([
    ['id' => '1', 'name' => 'John Smith'],
    ['id' => '2', 'name' => 'Mister X'],
    //...
]);

Create SmartTable Engine instance, _(*8)

$engine = app(\Mikelmi\SmartTable\SmartTable::class)->make($source);

//optionaly set columns for general search
$engine->setSearchColumns(['name', 'email'])

Apply request, _(*9)

$engine->apply();

//optionaly apply advanced method for your source, e.g. default sorting
$engine->orderBy('created_at', 'desc');

Return the response, _(*10)
```
return $engine->response();
```

Client side

Include javascript file. This package ships with three js files:, _(*11)
- mks-smart-table.js - contains only base functionality, without any libraries
- mks-smart-table-st.js - includes angular-smart-table
- mks-smart-table-full.js - includes all required dependencies (angular 1.x and angular-smart-table)
E.g. (in your template):, _(*12)
```
   ...
   <script src="path/to/angular.js"></script>
   <script src="{{asset('vendor/mikelmi/mks-smart-table/js/mks-smart-table-st.js')}}"></script>
   
</body>
```
Add mks-smart-table dependency to your angular application. E.g.:, _(*13)
```
var app = angular.module('myApp', ['mks-smart-table']);
```

Init controller TableCtrl, _(*14)

<div ng-controller="TableCtrl as grid" ng-init="grid.init('{{url('/url/to/handler')}}')">

Output the table, _(*15)

<table class="table" st-pipe="grid.pipeServer" st-table="grid.rows">
   <tbody>
       <tr ng-repeat="row in grid.rows">
           <td>{[{row.id}]}</td>
           <td>{[{row.name}]}</td>
           <td>{[{row.email}]}</td>
           <td>{[{row.created_at}]}</td>
       </tr>
   </tbody>
</table>

Advanced features:, _(*16)
- Global search, _(*17)
  
  You can add some input outside the table for filtering the results, _(*18)
```
<input type="search" ng-model="gridQuery">
```
  And then add mst-watch-query directive to the table head, _(*19)
```
<thead mst-watch-query="gridQuery">
```
- Select rows, _(*20)
```
  <tbody>
      <tr ng-repeat="row in grid.rows">
          <td mst-select-row="row"></td>
```
- 'Select All' checkbox, _(*21)
```
<thead>
    <tr>
        <th mst-select-all-rows="grid.rows"> </th>
```
- TableCtrl functions, _(*22)
  - removeLocalRow(row) - remove row without server-side action
  - removeRow(row, url, confirmText) - remove row after server-side action by url
  - removeSelected(url, confirmText) - remove selected rows after server-side action by url
  - getSelected() - get selected rows
  - updateRow(row, url, confirmText) - post row by url and update it with returned data
  - updateSelected(url, confirmText) - same as updateRow but works with array of selected rows

Additional Info

There is no styles for the tables in this package. You can Twitter Bootstrap for styling it., _(*23)

Here https://github.com/mikelmi/mks-smart-table/tree/master/example you can check the example of usage this package., _(*24)

For more information about client-side implementation please visit the angular-smart-table site - https://lorenzofox3.github.io/smart-table-website/, _(*25)