README

This package provides services for server-side processing data for angular-smart-table

Installation

Install via composer

    composer require mikelmi/mks-theme:dev-master

Add the service provider in config/app.php, to providers:

    Mikelmi\SmartTable\Providers\SmartTableServiceProvider::class,

Publish assets

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

Usage

Server side

Create route for handling smart-table-request.

Inside the route:

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

//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

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

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

Apply request

$engine->apply();

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

Return the response
```
return $engine->response();
```

Client side

Include javascript file. This package ships with three js files:
- 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):
```
   ...
   <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.:
```
var app = angular.module('myApp', ['mks-smart-table']);
```

Init controller TableCtrl

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

Output the table

<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:
- Global search
  
  You can add some input outside the table for filtering the results
```
<input type="search" ng-model="gridQuery">
```
  And then add mst-watch-query directive to the table head
```
<thead mst-watch-query="gridQuery">
```
- Select rows
```
  <tbody>
      <tr ng-repeat="row in grid.rows">
          <td mst-select-row="row"></td>
```
- 'Select All' checkbox
```
<thead>
    <tr>
        <th mst-select-all-rows="grid.rows"> </th>
```
- TableCtrl functions
  - 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.

Here https://github.com/mikelmi/mks-smart-table/tree/master/example you can check the example of usage this package.

For more information about client-side implementation please visit the angular-smart-table site - https://lorenzofox3.github.io/smart-table-website/

mikelmi / mks-smart-table

Maintainers

Details