29 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: { ...
user avatar
  • 2,572
29 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" ...
user avatar
28 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 ...
user avatar
  • 1,227
18 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' }, { ...
user avatar
  • 386
17 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. <...
user avatar
17 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,...
14 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 ,{...
user avatar
13 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")....
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.
user avatar
  • 3,786
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 ...
user avatar
  • 130k
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.
user avatar
  • 434k
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 [] ...
user avatar
11 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( (...
user avatar
  • 434k
11 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 = ...
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 ...
user avatar
  • 3,099
10 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/...
user avatar
9 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="...
user avatar
  • 434k
9 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 ...
user avatar
  • 1,262
9 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', ...
user avatar
  • 3,385
8 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 ...
user avatar
  • 130k
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: '...
user avatar
  • 2,509
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'...
user avatar
  • 87k
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 ...
user avatar
8 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 ...
user avatar
8 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 ...
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 ...
user avatar
  • 2,572
7 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 ...
user avatar
  • 434k
7 votes
Accepted

Can we specify a minimum height for a lightning:datatable/lightning-datatable?

It is a little bit fragile since it relies on the SLDS style class slds-table_header-fixed_container but this sets an (exaggeratedly large) min-height on the header div that gets rendered into the ...
user avatar
  • 22.3k
7 votes

Conditionally enable edit in lightning:datatable

Per documentation, the editable attribute for lightning:datatable is applicable directly at the column level, and it does not mention anything at cell level, excerpt below: Specifies whether a ...
user avatar
7 votes
Accepted

Distinguish between two row actions of datatable for LWC

We would normally have property name in type attributes based on which you can differentiate. However you can also use label (if they are different - usually they are same) or any other attribute in ...
user avatar

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