Give a ⭐️ to this repository, Starring a repository will motivate contributors.
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).
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 |
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 )
{ "AccountId": { "label": "Account Record Id", "type": "Id" } }
{
"LastName": { "label": "Surname", "type": "text" },
"AccountId": { "label": "Account Record Id", "type": "Id" }
}
{ "Account.Name": { "label": "Account Name", "type": "text" } }
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" }
}
}
}
To configure buttons(variant are 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 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:
}
}
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 banch. Read Contribution Guidelines