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:
{
...
- 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"
...
- 22.7k
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 ...
- 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' },
{
...
- 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.
<...
- 181
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 ,{...
- 34.7k
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.
- 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 ...
- 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.
- 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 [] ...
- 29k
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(
(...
- 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 = ...
- 17.2k
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 ...
- 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/...
- 593
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="...
- 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 ...
- 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',
...
- 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 ...
- 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: '...
- 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'...
- 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 ...
- 22.7k
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 ...
- 675
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 ...
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 ...
- 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 ...
- 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 ...
- 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 ...
- 29k
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 ...
- 22.7k
Only top scored, non community-wiki answers of a minimum length are eligible