Update README.md

Author: Sarveshgithub

README.md

@@ -2,7 +2,7 @@
 
 # Salesforce Lightning Data table (LWC Version) 
 
-![Image description](https://github.com/Sarveshgithub/sfdc-lwc-lightning-datatable/blob/master/lwc-datatable.PNG?raw=true)
+![datatable](https://user-images.githubusercontent.com/39730173/158892595-3e7c91a3-9259-4e13-914b-191504ca8a05.PNG)
 
 ## About
 
@@ -18,7 +18,7 @@ The data table has following features.
 - 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](#buttons-configuration-for-developers-accessible-in-the-component-and-from-parent-component) )
+- configurable buttons (for developers, see [Buttons configuration](#buttons-configuration) )
 
 ## Steps to Customization through Design Attribute
 
@@ -36,6 +36,7 @@ Design Attribute
 Enter Related field API Name | :x: | String | Enter related field api name | Example AccountId for contact when component is on account layout.
 Enter WHERE clause | :x: | String | provide aditional filters | Example `LastName like '%s' AND Account.Name like '%t'`
 | Show the number of record | :x: | Boolean | append the number of records in the title  |  checked(true) OR not checked(false) |
+| Buttons to display | :x: | String | buttons that we want to display  | new,delete-selected |
 
 ## Columns JSON Example
 ``` yaml 
@@ -61,54 +62,59 @@ Enter WHERE clause | :x: | String | provide aditional filters | Example `LastNam
         "type": "text"
     }]
 ```
-## Buttons configuration (for developers, accessible in the component and from parent component)
-
-### Call apex or javascript method
-For a button that is going to call callApexFromButton, the properties must be :
-- `callApexFromButton: true`
-
-### Fire event to parent component
-For a button that is going to fire an event, the properties must be :
-- `callApex: false`
-- `needSelectedRows : can be true if you need to send selected rows to parent component`
-
-### Example 
-Javascript array (actionButtonsList property) :
-```yml
-[  
-   { 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 }
-];
+## Buttons configuration
+
+### Buttons definition(javascript controller) :
+```
+const buttonsOfList = {
+    'new' : { label : "New", variant: "neutral", needSelectedRows: false }, 
+    'delete-everything' : {  label : "delete all", variant: "destructive", needSelectedRows: false },
+    'delete-selected' : { label : "delete selected", variant : "brand", needSelectedRows: true }
+};
+```
+### Default displayed buttons
+The "New" button is displayed by default, modify the method setDefaultListButtons to change default buttons.
+
+
+### Button logic definition (fire an event, call a method in the javascript controller)
+You can implement your own logic for your new buttons based on button key (new, delete-selected...).
+
+```
+callButtonAction(event) {
+    //call desired javacript method or apex call, or throw an event based on the button key(new, delete-selected...)
+    //if button has needSelectedRows set to true, have selected rows using this.selectedRows
+    const buttonLabel = event.target.dataset.name;
+
+    if(buttonLabel === 'new') {
+        this.newRecord();
+    } else if(buttonLabel === 'delete-selected') {
+        new customEvent('deleteselected', {detail : this.rows});
+    }
+    console.log('callButtonAction, button clicked has label : '+buttonLabel);
+}
+```
+
+**From Parent component (for developers) :**
 ```
-Parent component (**you don't need parent component, you can define default buttons using actionButtonsList**) :
-```html
-<!-- in template -->
+//in template
 <c-lwc-related-list object-name="Contact"
         columns={columns}
+        title="contacts-from-parent-component"
         related-field-api="AccountId"
         is-counter-displayed=true
-        action-buttons-list={actions}
-        show-checkboxes=true
-        onaction2={helloWorld}
-        onaction3={helloWorld}/>
+        action-buttons-to-display='new,delete-selected'
+        ondeleteselected={helloWorld} >
+
+</c-lwc-related-list>
+```
 ```
-```JS
 //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
-
-The results should be :
-![Capture buttons](https://user-images.githubusercontent.com/39730173/158386203-bca7099f-0070-48d2-8ec9-6936a68dd754.PNG)
-
 ## Deploy
 Click Button to deploy source in Developer/Sandbox