Give a ⭐️ to this repository, Starring a repository will motivate contributors.

To deploy the component see Deploy

This is a generic lighting datatable, which is built in LWC. The customization is done by design attributes.

Main features

• Show records for both custom and standard objects.
• Add cols as per the fields that exist in object in JSON format.
• Pagination as First, Previous, Next and Last buttons.
• New record creation action
• Row action like : show detail, edit a record, delete a record
• Hide/Unhide checkbox column
• Configurable actions buttons (for developers, see Buttons configuration )
• Sorting by field (Note: sort will not work on search).
• Search

Custom Data types (the component extendedDatatable extends lightning:datatable) :

• picklist
• lookup
• long text area
• formula (image)

label : This key is for override column Name. ( Example : Override Column Label )

type : This key is for the override column Type :

• supported_lwc_datatable_datatype. ( Ex : url ). ( Example : Related Field Customized )
• lookup editable column
• picklist column

typeAttributes : This key is used for customized columns and records :

• lookup editable column

{ "AccountId": { "label": "Account Record Id", "type": "Id" } }

AccountId : the api name of the column for which you want to override the label (only use the columns displayed)

{ "FirstName": { "label": "{!Label.MyLabelName}", "type": "text" } }

{ "LastName": { "label": "Surname", "type": "text" }, "AccountId": { "label": "Account Record Id", "type": "Id" } }

When overriding columns you can override different columns for the different uses cases :

• lookup editable column
• picklist column

Here the lookup will not be editable (to have editable lookup field see #lookup-editable-column)

{ "Account.Name": { "label": "Account Name", "type": "text" } }

By default, you don't need to insert JSON for a picklist field, the field is editable by default. However, you might have the following use cases :

make the picklist field non-editable

 {"StageName" : {"type": "text", "editable": false} }

you can also override the label

 {"StageName" : {"label": "Step", "type": "picklist"} }

{ "Account.Name": { "label":"Account Name", "type":"lookup", "typeAttributes":{ "placeholder": "Choose Account", "objectApiName": "Contact", "fieldName": "AccountId", "label": "Account", "value": { "fieldName": "AccountId" }, "context": { "fieldName": "Id" }, "variant": "label-hidden", "name": "Account", "fields": ["Account.Name"], "target": "_self" }  } }

placeholder : text displayed when the lookup search bar is empty

fieldName and value.fieldName : field API name that links the record to the parent record

fields : what is displayed in the column (here the name of the account)

{ "Account.Name": { "label": "Account",  "iconName": "standard:account" }  }

To configure buttons(variant is the style of a button) see the documentation here : buttons documentation

[{ "name": "New", "label": "New", "variant": "neutral" }]

[ { "name": "New", "label": "New", "variant": "neutral" }, { "name": "DeleteAll", "label": "Delete all", "variant": "destructive" } ]

The "New" button is displayed by default

You can implement your logic for your new buttons based on button JSON (new, delete-selected...).

 handleButtonAction(event) { //call desired javacript method or apex call, or throw an event based on the button key(new, delete-selected...) //you have selected rows in this.selectedRows const buttonLabel = event.target.dataset.name; switch (buttonLabel) { case 'New': this.newRecord(); break; default: } }

Click Button to deploy source in Developer/Sandbox

Feel free to ask any Question, Suggestion, Issue here

Create Pull Request to dev branch with your feature branch. Read Contribution Guidelines