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

Salesforce Lightning Data table (LWC Version)

About

To deploy the component see Deploy

This is generic lighting data table , which is build in lwc. The customization are done by design attributes.

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
Hide/Unhide checkbox column
Configurable actions buttons (for developers, see Buttons configuration )
Sorting by field (Note: sort will not work on search).

Steps to Customization through Design Attribute

Design Attribute

Label	Required	Type	Value	Example
Enter Icon Name	❌	String	provide slds icon name (if you wish to override the default icon of the object)	`standard:account`
Enter Title	✔️	String	provide table title	LWC Table
Enter Object API Name	✔️	String	provide object custom or standard API name	Contact
Enter Columns API Name by comma seprated	✔️	String	Note : for related field it should be concat with . i.e : Account.Name for contact, Inline Edit not support cross reference Field	FirstName,LastName,Email,Phone
Enter Customized Field JSON ( This is Mandatory for Related Field )	❌	String	customized Column Label, Record Redirect, Data Type. Note : This is Mandatory for Related Fields i.e : Account.Name for contact	See below Customized Field JSON
Enter Related field API Name	❌	String	Enter related field api name	Example AccountId for contact when component is on account layout.
Hide/Unhide checkbox column	❌	Boolean	true/false	Hide/Unhide Checkbox
Enter WHERE clause	❌	String	provide aditional filters	Example `LastName like '%s' AND Account.Name like '%t'`
Enter limit	❌	Integer	limit the displayed number of records for the list	an integer
Show the number of record	❌	Boolean	append the number of records in the title	checked(true) OR not checked(false)
Show the view all / collapse buttons	❌	Boolean	display buttons to expand/collapse records	checked(true) OR not checked(false)
Enable/Disable pagination	❌	Boolean	enable or disable pagination for the list	checked(true) OR not checked(false)
Buttons to display	❌	String	buttons that we want to display	See below Buttons configuration
Enable/Disable search	❌	Boolean	enable or disable search bar	checked(true) OR not checked

Customized Field JSON

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

type : This key is for override column Type supported_lwc_datatable_datatype. ( Ex : url ). ( Example : Related Field Customized )

typeAttributes : This key is used for hyperlink to recordId. ( recId stored recordId Field ). ( Example : Add Hyperlink for navigate to record )

Example : Override Column Label

Single override

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

Multiple override

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

Related Field Customized

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

Add a hyperlink to navigate to the record

The example enables redirection to the account when we click on the account name of a contact (the field Account.Name is included in columns api name in the example).

{
    "Account.Name":
        {
            "label": "Account Name",
            "type": "url",
            "typeAttributes":
                {
                    "label":
                        { "fieldName": "Account.Name", "recId": "AccountId" }
                }
        }
}

Buttons configuration

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

Single button

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

Multiple buttons

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

Default displayed buttons

The "New" button is displayed by default

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 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:
      }
  }

Deploy

Click Button to deploy source in Developer/Sandbox

Q & A

Feel free to ask any Question, Suggestion, Issue here

Want to contribute? Great!

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

thaierissa/sfdc-lwc-lightning-datatable