Datatable Styling in LWC | Lightning Web Component
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- In this video, We will learn how to style Lightning Datatable in the lightning web component. We will cover the following topic in this video
1) Create a new component
2) Write Apex Class to fetch Account records
3) Fetch data to LWC from Apex
4) Create lightning datatable and load the account data to datatable
5) hide datatable checkbox
6) add slds text color to the table column
7) add an icon to the column with positions
8) add a background color to the column cell using slds colors
9) upload external CSS to the static resources
10) loading external CSS to component
11) adding an external CSS class to the column cell
12) adding an external CSS class to the table header
SLDS ICON
====================
www.lightningd...
SLDS TEXT COLOR
====================
www.lightningd...
FOR COOL STUFF OF LIGHTNING WEB COMPONENT
=============================================
www.salesforce...
FOLLOW ME -
FACEBOOK - / salesforcetroop
LINKEDIN - / nikhilkarkra
TWITTER - @karkra_nikhil
This is especially for all the students and IT professional who wants to make their career in Salesforce.
PLEASE DO LIKE, SHARE AND SUBSCRIBE THIS VIDEO WITH ALL YOUR STUDENT NETWORK, IT NETWORK AND SALESFORCE NETWORK.
Let everyone learn Salesforce and become a part of our #Ohana.#navigation #lwc #ohana #pagination
![[Watch Party] RoV Pro League 2024 Winter | ( Bacon Time Vs PSG )](http://i.ytimg.com/vi/zM25REvnJW4/mqdefault.jpg)
I was Struggling over DataTables. Thank you for this Video and Knowledge 😊
Great tutorial.. Was able to un-block myself in few hours :) Great job.
Great explanation! Thanks!
Your udemy course on Lwc is epic great
Thank you very much, this video is priceless, it helped me a lot!!! also have learnt a lot.
thank you 🙏
Excellent Session Nikhil..Last couple of months, I followed your videos and leant a lot about LWC. Now I feel more comfortable to work on this topic except the CSS in LWC. Can you please please conduct sessions how to effectively use CSS in LWC.
In real-time, salesforce enforce us to use SLDS library over custom CSS. if you have issues with any specific topic in CSS let me know. In web world CSS is tougher than JS
Great Video, I like your content Nikhil
Nice bro this is really help for me
Good job, mate. I was able to follow all the steps. Thanks for your video.
Great job Nikel. Really Amazing stuff 👍
Appreciate your effort. Quite a useful video. Totally worth it
Great tutorial! Thanks!
Thanks!)
Hi Great video, even after 2 years it is useful. I have a request, how do you apply style to Input element inside datatable? for example if need to reduce the size of the text input how to do ? can you guide me to the right direction? Thank you
Good job Nikhil,can u pls tell how do we freeze first three columns in standard data table
Thank for this. is there a way to disable the hover on rows so that i wont have to edit it thru css static resources?
Hi Nikhil, I want to create a new checkbox type field in the data table and also want to disable based on the some condition of the row. Can you please help me for this?
Great Video, in your example, your data table loads the data throughout the entire page, on my datatable it stops halfway through the page and has a scroll bar, would you know why this is happening?
Hi nikhil, you added css for columns , what if I want to apply background color for particular row
Can you clarify the doubt - whenever I use column property initialwidth on Columns, the dataTable is not auto adjusting to different screen widths..
I need the dataTable to be responsive thogh we give different initial widths
I'm looking for information about put a color to a icon utility, in your example you add utility:up but how make to add color to tat icon. I haven't been able to do it ;'(
How to set row color on row selection? Lets say, I select one row and the row highlighted in yellow.
I want to implement a lightning combobox inside a LWC lighting datatable column, is that possible!?
I tried extending the datatable and added my custom type for a combobox but my combobox now appears inside the column, so. Can't see it when the options show, only half an option is visible!
Is there a way I can make the all of the combobox be visible when I click it and it opens its options!
Or should I just go for old-school tables with slds and aura within my LWC!?
SWEET
PS: a difficult one this one seems hey.. Lol
Sweet
Keep well and be safe bro!
🛸😁🇧🇬🙏
Hi - in this demo i notice when hovering to column header the background color did not set properly. what is the fix for that?
hi nikhil, is there any way we can embed rich area text in datatables and show formatted text in bold italic as per the record,, i am able to remove html tags,, but data coming out is just plane.. any suggestions
Hi Nikhil, can we use internal css which can be loaded inside the wire method
Can you upload to navigate to related records from lwc datatable by clicking the name link
how to add view all and onclick open page and show all the rows
Hi Nikhil,
How to apply custom CSS for a button which is in Datatable as rowAction! This technique I have tried but no luck :(
Hi, is it natural to take too much time to deploy apex class from vs code, i don't get it it is running for a very long time period
Hi Nikhil,
Thank you for providing a very knowledgeable session.
I've a question lets say if you are returning AccountwithContacts from the SOQL query, then how you are going to handle "column" attributes of Lightning DataTable
ex: if you are returning [Select Id,Name,Industry,(Select Id,Name,Phone,Email,Fax from Contacts) FROM Account LIMIT 10];
then how to assign Account Contacts data to the DataTable.
Would be great if you would share your thoughts on this.
you can modify that data that is coming from apex in js using map function according to your need.
@@salesforcetroop Hi sir , I followed all the steps as mentioned in your video in my existing lwc data-table . The color is coming but only for alternate records i.e for Account1 it is orange but Account 2 it is white and same goes like that . Can you please help on this .
Hi Nikhil,
Why did you used three dots before item in the statement
return {...item,"amountColor": amountColor, "iconName":iconName}
It's a spread operator which make a new copy of object
Hi, thank you for this video which is very good. Is there any limitation of adding a css file within the same component example "datatableDemo.css" instead of importing and using static resources?
lightning-datatable is a standard component of lwc and you can't change the style of standard component using custom(datatableDemo.css) css files. Only way to apply css to standard component is global css.
@@salesforcetroop Thank you
When I am resizing the column then horizontal scroll bar is coming , how can I remove?.
I having an issue while practicing. In console log I can see data has the property 'amountColor' but in UI the color of the data is not changed. Can u pls help me with this.
Can someone help me in the above issue.
How to add custom validation on datatable columns
how to apply css to table header?
can we set custom color apart from error or success, If I want blue or Orange?
That you can apply by adding class to css file and that CSS file should be loaded through static resources
Hii Nikhil please let me know how much time I needed to learn LWC for a intermediate level, I am already working as a salesforce professional.
It's all about practice and problem solving skills. Just learn basics of js and architecture of LWC.
@@nikhilkarkra6513 thanks nikhil, god bless you, all videos are awesome 👍
Hello nikhil , it was really a good one. And also is it possible to hide or show particular column in data le based on a condition ?
@salesforcetroop
hi this is not there in your udemy course could you please add it
I didn't understand that why we cannot use css class in lightning database tags?
LIghtning standard component is tightly coupled and because of there shadow DOM you can't override there CSS by CSS file. You need an global CSS to override those styles.
@@salesforcetroop ok thank-you for informing me, but Lightning Button is also a standard component, but still we can use class for styling it. Then how?
@@movieworld9471
.nik{
color:red;
background:yellow;
}
To standard button also your css will not work.
@@salesforcetroop Thank you so much for your help, its really appreciated!
Just one question more, like as I know lightning button is also standard component, but still we don't need to use any static css file. We can do css by making css file in that lwc component only.
But for datatable, we need to use static resource as it is also a standard component.
So why, and whats the reason behind it. When both are standard one, but still for lightning button, we don't need to use any static resource css file. Thanks.
@@movieworld9471 standard lightning button you can't style using css file. try that