update doc

Author: yazan-alnugnugh

README.md

@@ -10,10 +10,21 @@
     <img src="art/intro-image.png" alt="laravel-vue-datatable intro image">
 </p>
 
-**if you want to make dataTable easy and quickly with crazy features, this package is for you.**
-
-These two Laravel packages are for making easy and quickly dataTable for your work, the goal is creating Datatable an easy way using ajax, 
-with interesting features,  just  with little steps, you  can create it
+**if you want to create DataTable easy and quickly with crazy features, this package is for you.**
+
+These two Laravel packages are for making easy and quickly DataTable for your work with several features like:
+- Searching
+- Sorting
+- Add new relations
+- Multiple selection
+- Delete/Delete all
+- Restructing data
+- Permession access
+ -Response notifications for events
+- Pagination.
+
+The goal is to create Datatable in easy way using ajax,
+ with interesting features, just with little steps, you can create it
 
 
 

_docs/1-introduction.md

@@ -11,10 +11,21 @@
     <img src="../art/intro-image.png" alt="laravel-vue-datatable intro image">
 </p>
 
-**if you want to make dataTable easy and quickly with crazy features, this package is for you.**
-
-These two Laravel packages are for making easy and quickly dataTable for your work, the goal is creating Datatable an easy way using ajax, 
-with interesting features,  just  with little steps, you  can create it
+**if you want to create DataTable easy and quickly with crazy features, this package is for you.**
+
+These two Laravel packages are for making easy and quickly DataTable for your work with several features like:
+- Searching
+- Sorting
+- Add new relations
+- Multiple selection
+- Delete/Delete all
+- Restructing data
+- Permession access
+ -Response notifications for events
+- Pagination.
+
+The goal is to create Datatable in easy way using ajax,
+ with interesting features, just with little steps, you can create it
 
 ## Demo
 

_docs/2-Installation-and-Setup.md

@@ -11,14 +11,14 @@
 ## Requirements
 
 * [Vue.js](https://vuejs.org/)  => 2.x
-* [Laravel](http://laravel.com/docs/) => 7.x
-* [Tailwind](https://tailwindcss.com/) => 1.*
+* [Laravel](http://laravel.com/docs/) => 8.x
+* [Tailwind](https://tailwindcss.com/) => 3.*
 
 
 ## Installation
 
 
-for install and setup them we will work on the server-side and client-side , using few steps 
+To install and setup the packages we will work on the server-side and the client-side , using a few steps:
 ## server side 
 
 #### step 1
@@ -32,7 +32,7 @@ create grid class
 php artisan make:grid-class exampleGrid
 ```
 
-## clint side
+## client side
 
 #### step 1 
 ```bash

_docs/3-Configuration.md

@@ -39,8 +39,8 @@
 | `url ` | String | "/" | (required) json data url |
 | `toolbar` | Object | {} |  to setup toolbar |
 | `toolbar.show` | Bool | true | to disable or enable toolbar |
-| `toolbar.delete` | Object | {} | to add delete all option to toolbar |
-| `toolbar.delete.url` | String | '/' | to set delete all url |
+| `toolbar.delete` | Object | {} | to add "delete all" option to toolbar |
+| `toolbar.delete.url` | String | '/' | to set "delete all" url |
 | `toolbar.delete.show` | Bool | true | to disable or enable delete button |
 | `search` | Object | {} | to setup search input |
 | `search.show` | Bool | true | disable or enable the feature |
@@ -75,7 +75,8 @@
       :filters="{
             selection:{
                    show: true,
-                   data:[
+                   data:[ 
+                        // you can add here more than one section filter
                        {
                        label: 'Admins',
                        relation: 'createdBy',
@@ -130,7 +131,7 @@
 | --- | --- | --- | --- |
 | `label ` | String | '' |  table column head name |
 | `column` | String | '' |  database column name |
-| `show` | Bool | true | to add toolbar config |
+| `show` | Bool | true | disable or enable column |
 | `sort` | Object | {} | is responsible for sort column |
 | `sort.sortable` | Bool | true | disable or enable sorting  |
 | `sort.sortColumn` | String | '' | column name for sorting |

_docs/4-Usage.md

@@ -5,7 +5,7 @@
   3. [Configuration](3-Configuration.md)
   4. [Usage](4-Usage.md)
         * [Basic Usage](#Basic-Usage)
-        * [relation include](#relation-include)
+        * [add a relation](#add-a-relation)
         * [Searching](#Searching)
         * [Sorting](#Sorting)
         * [Selection filter](#Selection-filter-for-relations)
@@ -134,7 +134,7 @@ use the data-table component in your blade
 
 ```
 
-## relation include
+## add a relation
 
 ### **server side**
 
@@ -178,7 +178,7 @@ add relation column to columns prop
 
 ### **server side**
 
-to start using search input we will specific columns we want to search within by default search column will be ``id``
+To start using search input we need to specify columns we want to search through, by default search column will be ```id```
 
 add ``` $searchColumns``` property to start use search feature
 
@@ -194,7 +194,7 @@ add ``` $searchColumns``` property to start use search feature
 
 to use the sort feature we will add a sort object
 
-there is 3 property inside sort
+there ar 3 property inside sort
 
 1- ````sort.sortable```` : if you want to use a column for sorting 
 
@@ -249,8 +249,7 @@ to use rows count per page we need to use ````perPage```` prop
 
 ### **client side**
 
-to add select input for relation column you will add filters prop as below
-```selection``` the object contains all filter selection data
+to add select input for relation column you will add filters prop as below , the ```selection``` object contains all filter selection data
 
  ````show```` to disable or enable selection filter 
 
@@ -289,16 +288,16 @@ to add select input for relation column you will add filters prop as below
 ## Data mapping
 ### **server side**
 
-if you would to restructure data we provide this method for you
+if you would to restructure data, we provide this method for you
 
-in first we will add ```$isMapping``` property equal true
+in first, we will add ```$isMapping``` property equal true
 ```php
 // app/DataGrid/PostGrid.php
 
    protected $isMapping = true;
 ```
-after that, we will add this method is contains callback 
-function return array contain our collection 
+after that, we will add this method that contains callback
+ function return array contain our collection
 ```php
 // app/DataGrid/PostGrid.php
 
@@ -321,8 +320,10 @@ function return array contain our collection
 
 ### **server side**
 
-to add action buttons to rows we will use an action array to do that
-we can add associative array to action array with two value button structure and visibility true or false
+To add action buttons to rows we will use an action array to do that, we can add associative array
+ to action array with two value:
+  - button structure 
+  - visibility true or false.
 
 ```php
 // app/DataGrid/PostGrid.php
@@ -349,8 +350,8 @@ we can add associative array to action array with two value button structure and
 
 ### **server side**
 
-to use delete action just we can insert our delete button and add 
-```delete```class to Html tag and ```data-path``` attribute include path to delete element As shown below 
+To use delete action we can just insert our delete button and add ```delete``` class
+ to Html tag and ```data-path``` attribute include path to delete element As shown below
 ```php
 // app/DataGrid/PostGrid.php
 
@@ -379,7 +380,7 @@ to use delete action just we can insert our delete button and add
 
 ### **client side**
 
-inside toolbar object will add url property contain our delete all route
+inside toolbar object we will add url property contains our 'delete all' route
 ```html
 // resources/posts/index.blade.php
 
@@ -397,8 +398,8 @@ inside toolbar object will add url property contain our delete all route
 ```
 
 ### **server side**
-in server-side will receive request containing ids 
-after that do our delete mission
+in server-side we will receive request containing ids list,
+ after that we will do our delete mission
 ```php
 
 public function destroyAll(Request $request){