34 votes

Hyperlink record name LWC datatable

here is a solution that works perfectly. I display a list of opportunity and add a hyperlink on the column name of the data table. To do that, you have to create a wrapper class in you apex controller ...
dibocor's user avatar
  • 1,307
31 votes
Accepted

Spring 18 <lightning:datatable> how to add a button column

To display the button on the rows, you need to put the attributes in the typeAttributes object just like with actions in the row above in your example. { type: 'button', typeAttributes: { ...
Folkert's user avatar
  • 2,702
30 votes
Accepted

How to use custom LWC lightning component in lightning-datatable

Step 1 : create custom component as follows. pocCustomComp.html : <template> <div> Id: {recordId} </div> <lightning-file-upload label="Upload" ...
salesforce-sas's user avatar
24 votes
Accepted

How to set lightning:datatable fixed column widths

You can use the initialWidth property of the column to set the width when it is rendered. It can still be resized. [ { label: 'Message', fieldName: 'Description', type: 'text' }, { ...
J. Furr's user avatar
  • 476
18 votes

lightning:datatable component - hiding Save and Cancel buttons after inline edit

According to the documentation on <lightning:datatable>, you may find the suppressBottomBar attribute useful: Specifies whether the inline edit Save/Cancel bottom bar should be hidden. <...
Pranav Bhagat's user avatar
18 votes
Accepted

How do I get lightning:datatable to do some undocumented thing X?

Canonical Answer Please note: if you have been directed to this question and answer, what you are attempting to do with lightning:datatable cannot be done. You will need to find an alternative method,...
17 votes
Accepted

How to convey LWC's complex Reactive property back to markup?

Well, I was able to fix this by using the ES6 Spread operator, which basically splits the array into the individual element and then recreate array... addRow(){ this.data = [...this.data ,{...
Pranay Jaiswal's user avatar
14 votes
Accepted

lightning:datatable component - hiding Save and Cancel buttons after inline edit

Clearing the draftValues attribute on the lightning:datatable component clears the edited cells and hides the Save and Cancel buttons at the bottom of the table. e.g. cmp.find("table-component-id")....
13 votes

Lightning datatable column value misaligned

In the attribute FamilyDetailColumns , try to use cellAttributes and apply alignment for the number column like this: var columns = [{ label: 'Amount', fieldName: 'amount', type: 'currency', ...
Shamina's user avatar
  • 4,235
13 votes

(LWC) - Lightning Datatable: Custom Data Types

Below I described step by step how you can do it. For more details and code you can check the following post: Custom Types in LWC Lightning Datatable Create a Custom Data Type component customTypeA/...
Piotr Gajek's user avatar
  • 2,595
13 votes
Accepted

lwc spinner not showing if performing a javascript operation

The problem is that the browser can't update the view while JavaScript is running. In order to make this work the way you expect, you need a brief pause: this.showSpinner = true; new Promise( (...
sfdcfox's user avatar
  • 487k
13 votes
Accepted

Flatten data to display it using lightning datatable in LWC

you can prepare data before passing it to lightning-datatable @wire(getAddress, { LeadID: '$recordId' }) wired(result) { this.refreshTable = result; if (result.data) { this.addresses = ...
Oleksandr Berehovskyi's user avatar
11 votes
Accepted

lightning:datatable actions menu is hidden

As it turns out the overflow properties had to be set to visible not just on the slds-scrollable_y class but also on the slds-scrollable_x class. Problem solved.
Mossi's user avatar
  • 3,926
11 votes
Accepted

lightning:datatable not rendering correctly

A work around until the component handles this better itself is to use CSS of this nature in your component: .THIS .slds-scrollable_y {min-height: 150px} that sets the minimum height of the vertical ...
Keith C's user avatar
  • 136k
11 votes
Accepted

Lightning Data Table inline edit

The keyField should be Id, not id. Note that JavaScript is case sensitive, and as such, Lightning is also case-sensitive. You should get the correct Id so long as you use the correct casing.
sfdcfox's user avatar
  • 487k
11 votes

How to convey LWC's complex Reactive property back to markup?

Going through the docs and based on a quick test it seems you can only track changes to the internal values on Arrays created with []. Seems push() does not have the same effect but assigning using [] ...
Jayant Das's user avatar
  • 30.5k
11 votes
Accepted

Conditionally highlight a cell using datatable in LWC

Yes, Conditional Formatting can be done using cellAttributes for data table For Example, If the requirement is to format/Show all the names of users in Red whose "Due Balance" is greater than 200 ...
Abhijith E's user avatar
10 votes
Accepted

Hyperlink a Record in lightning:datatable

We can take help of the type: url and typeAttributes: {label: { fieldName: 'linkLabel' }} to show some useful link label of the column; Working with Column Data Here we have two options type ...
itzmukeshy7's user avatar
  • 3,170
10 votes
Accepted

Lightning:datatable dynamically disable rowactions

You need to handle the disabled attribute in your getRowActions handler (you do have one, right?). Here's a self-contained example that demonstrates this. Application <aura:application extends="...
sfdcfox's user avatar
  • 487k
10 votes

How to convey LWC's complex Reactive property back to markup?

Please avoid spread operators unless you really want to concatenate two arrays purposely, spread operators are O(n), which has an non negligible effect on performance. The push() operation should be ...
Diego's user avatar
  • 1,282
10 votes
Accepted

How to present a lightning-datatable on mobile devices?

There is something we do have in the slds, with the appending of single class few changes in the markup level for th and td, table will support in the desktop as well as mobile. Check here for the ...
Yaswanth Tikkisetti's user avatar
10 votes

I want to remove the first checkbox column from lightning data table in LWC. How I do that?

If you are using lightning-datatable, you can use hide-checkbox-column="true" to hide the first column.
CloudConnect's user avatar
9 votes
Accepted

DOM manipulation on lightning:datatable

As others have mentioned, the LockerService means you can't attack the problem via the DOM, but instead have to see what the component offers. I followed the lightning:datatable JavaScript through in ...
Keith C's user avatar
  • 136k
9 votes
Accepted

Add bold style to last row in Lightning Data table

For now, you can modify styles inside standard components by specifying your own custom CSS. I don't know if they'll continue to allow this in the future, however. The documentation is apparently ...
sfdcfox's user avatar
  • 487k
8 votes

lightning:dataTable in a multi-currency org

You can dynamically specify the currency code in this manner: { label: "Amount", fieldName: "Amount", type: "currency", typeAttributes: { currencyCode: { fieldName: '...
James's user avatar
  • 2,639
8 votes

Insert a link in lightning datatable Column Value

Your Type Attributes, and likely the underlying data, aren't set up properly for a url type entry. Your url item should correspond to the column in your data that contains a URL value (not the link'...
David Reed's user avatar
  • 92.6k
8 votes
Accepted

(LWC) - Lightning Datatable: Custom Data Types

Yes, absolutely. You can create your own custom component with any tags/content you want and render it in a table cell for that column. Step 1 : create custom component Step 2 : Create a new ...
salesforce-sas's user avatar
8 votes
Accepted

Can we make lightning datatable header static in LWC?

You just have to restrict the height of datatable as shown in example: <template> <div style="height: 300px;"> <lightning-datatable key-field="id" ...
salesforce-sas's user avatar
8 votes

Richtext type attribute in Datatable

LightningDatatable doesn't support rich text type, that's why you see all your text AS IS. If you want to display formatted rich text you should extend standard LightningDatatable with your new custom ...
Dmitry Loktevich's user avatar
7 votes

lightning:datatable not rendering correctly

Setting slds-scrollably_y to a minimum height is one solution, but might look a bit odd with just a few rows. A better solution would be to use overflow: visible;, like so: .THIS .slds-scrollable_x ...
Folkert's user avatar
  • 2,702

Only top scored, non community-wiki answers of a minimum length are eligible