add documentation #11

Author: mickaelgudin

README.md

@@ -9,13 +9,14 @@
 This is generic lighting data table , which is build in lwc.
 The customization are done by design attributes.
 
-Features
+Main features
 The data table has following features.
 - Show records for both custom and standard object.
 - Add cols as per the fields exist in object in JSON format.
 - Pagination as First,Previous,Next,Last buttons.
 - New record creation action
 - Row action, like : show detail, edit record, delete record
+- configurable buttons (for developers, see "Buttons configuration")
 
 ## Steps to Customization through Design Attribute
 
@@ -24,15 +25,15 @@ Only specify the icon name if you wish to override the default icon of the objec
 <br/><br/>
 Design Attribute
 
-| Label           | Type       | Value                        | Example             |
-|-----------------|------------|------------------------------|---------------------|
-| Enter Icon Name  | String     | provide slds icon name  |  `standard:account` |
-| Enter Title      | String     | provide table title |  LWC Table               |
-| Enter Object API Name | String| provide object custom or standard API name|  Account |
-| Enter Columns JSON | String | { `fieldName`:api name,`label`:col label,`type`:text,number,date }. **Note** : for related field it should be concat with . i.e : Account.Name for contact | See below **Column JSON Example**
-Enter Related field API Name| String | Enter related field api name | Example AccountId for contact when component is on account layout.
-Enter WHERE clause | String | provide aditional filters | Example `LastName like '%s' AND Account.Name like '%t'`
-| Show the number of record  | Boolean | append the number of records in the title  |  checked(true) OR not checked(false) |
+| Label           | Required | Type       | Value                        | Example             |
+|-----------------|------------|------------|------------------------------|---------------------|
+| Enter Icon Name | false      | String     | provide slds icon name  |  `standard:account` |
+| Enter Title     | true      | String     | provide table title |  LWC Table               |
+| Enter Object API Name | true     | String| provide object custom or standard API name|  Account |
+| Enter Columns JSON | true  | String | { `fieldName`:api name,`label`:col label,`type`:text,number,date }. **Note** : for related field it should be concat with . i.e : Account.Name for contact | See below **Column JSON Example**
+Enter Related field API Name | false | String | Enter related field api name | Example AccountId for contact when component is on account layout.
+Enter WHERE clause | false | String | provide aditional filters | Example `LastName like '%s' AND Account.Name like '%t'`
+| Show the number of record | false | Boolean | append the number of records in the title  |  checked(true) OR not checked(false) |
 
 ## Columns JSON Example
 ``` yaml 
@@ -58,6 +59,49 @@ Enter WHERE clause | String | provide aditional filters | Example `LastName like
         "type": "text"
     }]
 ```
+## Buttons configuration (for developers, accessible in the component and from parent component)
+
+### Call apex or javascript method
+callApexFromButton must be true
+
+### Fire event to parent component
+- callApex must be false
+- needSelectedRows can be true if you need to send selected rows to parent component
+
+### Example 
+JSON :
+```
+[  
+   { label : "delete all", variant: "destructive", needSelectedRows: true, callApex: true },
+   { label : "action button", variant : "brand", needSelectedRows: false, callApex: false },
+   { label : "another action button", variant : "brand", needSelectedRows: true, callApex: false }
+];
+```
+Parent component (**you don't need parent component, you can define default buttons using actionButtonsList**) :
+```
+//in template
+<c-lwc-related-list object-name="Contact"
+        columns={columns}
+        related-field-api="AccountId"
+        is-counter-displayed=true
+        action-buttons-list={actions}
+        show-checkboxes=true
+        onaction2={helloWorld}
+        onaction3={helloWorld}
+
+//in js controller
+helloWorld(event) {
+    console.log('hello world');
+    console.log('event rows ', event.detail);
+}
+```
+
+The first button "delete all" is not going to send event to parent it will call the javascript method callApexFromButton you must 
+implement the desired javascript/apex call based on the button label.
+
+The button "action button" fires the event action2
+The button "another action button" fires the event action3
+
 ## Deploy
 Click Button to deploy source in Developer/Sandbox