26
Step 1 : create custom component as follows.
pocCustomComp.html :
<template>
<div>
Id: {recordId}
</div>
<lightning-file-upload label="Upload"
name="fileUploader"
accept={acceptedFormats}
record-id={recordId}
...
25
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:
{
iconName: 'utility:edit',
label: 'Edit',
name: 'editRecord',
title: 'editTitle',
disabled: false,
value: 'test'
}
}
Update
The ...
19
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 like this:
public with sharing class GetAllOpportunities {
@AuraEnabled(cacheable=true)
public static List<DataTableWrapper> getAllOpps() {
...
15
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' },
{
type: 'button',
initialWidth: 34,
typeAttributes: {
iconName: 'utility:new_window',
name: 'newWindow',
...
15
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, such as using a normal SLDS data table instead.
Unfortunately, in the general sense, the features in the documentation are all that you get. It is possible ...
14
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.
<lightning:datatable suppressBottomBar="true" ... />
12
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").set("v.draftValues", null);
Thanks to tsalb for pointing me in the right direction.
11
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.
11
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 scrolling region that lightning:datatable outputs:
<div tabindex="-1" class="slds-scrollable_y" style="width: 902px;">
<table role="grid" class="...
11
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.
11
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 [] notion is.
In summary, you will need to recreate the array and assign the values using [] notion.
I was able to get this working by utilizing it as below:
...
11
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 ,{name:'Mylabel2s' , website:'2google.com' ,phone :'74126478963',amount : 45 } ];
}
Playground link
10
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 possible values are(action, ..., url);
typeAttributes value depends on the type option value like for url we have (label, target);
Here is the example of the same: ...
10
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(
(resolve,reject) => {
setTimeout(()=> {
this.sortMyData(this.allData, this.sortByMapped, this.sortDirection);
resolve();
}, 0);
}).then(...
10
you can prepare data before passing to lightning:datatable
@wire(getAddress, { LeadID: '$recordId' }) wired(result) {
this.refreshTable = result;
if (result.data) {
let preparedAddresses = [];
result.data.forEach(address => {
let preparedAddress = {};
preparedAddress.Account_Id = address.AccountId.Id;
...
9
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="force:slds">
<aura:attribute name="data" type="List" />
<aura:attribute name="columns" type="List" />
<aura:handler name="init" ...
9
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 as observable as assigning a new array if the property is @track.
https://developer.salesforce.com/docs/component-library/tools/playground/V4r9CeGW/2/edit
9
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',
cellAttributes: { alignment: 'left' }}
// other column data
];
For more details refer to documentation below in section Aligning Data in a ...
8
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 the debugger and found that the cellAttributes mechanism documented to support this:
{
label:'Confidence',
fieldName:'confidence',
type:'percent'...
8
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's title or the column title). You can use the typeAttributes map to supply three additional parameters:
label
target
tooltip
Your columns entry should look ...
7
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 markup for the table.
.THIS .slds-table_header-fixed_container {
min-height: 12em;
}
7
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 component which extends datatable
Step 3 : We can use the component (that extended datatable) where-ever we want
Full details here: How to use custom LWC lightning ...
7
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 event.detail.action.
Below is example: (Playground Link):
columns = [
{ type: 'button', typeAttributes: { label: 'First Button', name: 'first_button', ...
7
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 slds classes and styles, from the above link, Select the variants as responsive and form factor as mobile, then you will see the below attached screenshot.
6
It's possible to preselect items, however I noticed a bug on API v42 (current version) and I confirmed that with SFDC support team. When using the attribute to bind the selected rows, it simply doesn't work, however if you find the lightning:datatable and then change the selectedRows, it works properly.
component = component.find("partnerTable");
...
6
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 { overflow: visible; }
.THIS .slds-scrollable_y { overflow: visible; }
This will allow the action menus to go over other elements, regardless of the height of ...
6
This is just Locker Service working as designed. To stop malicious code from one component being able to scrape data from another component, Locker Service prevents access to the DOM elements of a component if you're trying access from a different namespace.
Data table is in the lightning namespace, so you'll never be allowed to get the DOM elements.
...
6
Short Answer
No.
Long Answer
I'm not going to spend a ton of time on this, but the general idea is that each component gets to decide how to parse its attributes.
As a working example, this code outputs what you expect:
<aura:iteration items="[{label: 'Type', fieldName: 'type'}, {label: 'ID', fieldName: 'channelId'}]" var="item">
{!item.label}:...
6
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 unclear on the topic. Here's a copy-paste example for you.
app
<aura:application extends="force:slds">
<aura:attribute name="col" type="Object[]" /&...
6
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 column supports inline editing. The default is false.
With a quick test, I could confirm that you won't be able to disable a particular cell in a lightning:...
Only top voted, non community-wiki answers of a minimum length are eligible
