Introduction:
In this blog post, we will explore how to apply dynamic CSS styling to a Lightning Web Component (LWC) Datatable. LWC is a powerful framework provided by Salesforce for building web components on the Lightning Platform. The Datatable component allows us to display tabular data in a structured and organized manner. By leveraging its features and using CSS styling, we can enhance the visual appearance and user experience of our LWC applications. Let's dive into the details and learn how to implement dynamic CSS styling for the LWC Datatable.
Prerequisites:
Before we begin, make sure you have a basic understanding of LWC development and have set up the necessary tools, such as Salesforce DX and a Salesforce Developer Edition org.
Step 1: Set up the project
Create a new LWC project using the Salesforce CLI and navigate to the project directory.
sfdx force:project:create -n LWC-Datatable-Styling
cd LWC-Datatable-Styling
Step 2: Create a new LWC component
Generate a new LWC component named "DataTableStyling" using the Salesforce CLI.
sfdx force:lightning:component:create --componentname DataTableStyling --outputdir force-app/main/default/lwc
Step 3: Implement the CSS styling
Open the "DataTableStyling" component in your favorite code editor and modify the "DataTableStyling.css" file. Add the following CSS code to style the LWC Datatable dynamically:
:host {
display: block;
padding: 1rem;
}
.dataTableWrapper {
border: 1px solid #ccc;
border-radius: 5px;
padding: 1rem;
}
.dataTableWrapper .slds-table {
width: 100%;
margin-bottom: 1rem;
border-collapse: collapse;
}
.dataTableWrapper .slds-table th {
background-color: #f2f2f2;
font-weight: bold;
padding: 0.5rem;
text-align: left;
border-bottom: 1px solid #ccc;
}
.dataTableWrapper .slds-table td {
padding: 0.5rem;
border-bottom: 1px solid #ccc;
}
.dataTableWrapper .slds-table td.error {
color: red;
font-weight: bold;
}
.dataTableWrapper .slds-table td.warning {
color: orange;
font-weight: bold;
}
.dataTableWrapper .slds-table td.success {
color: green;
font-weight: bold;
}
Step 4: Implement the LWC component code
Open the "DataTableStyling.js" file and replace the default code with the following code:
import { LightningElement } from 'lwc';
export default class DataTableStyling extends LightningElement {
data = [
{ name: 'Record 1', status: 'Error' },
{ name: 'Record 2', status: 'Warning' },
{ name: 'Record 3', status: 'Success' },
];
get tableRows() {
return this.data.map((row) => {
return {
name: row.name,
status: row.status.toLowerCase(),
};
});
}
}
Step 5: Implement the LWC template code
Open the "DataTableStyling.html" file and replace the default code with the following code:
<template>
<div class="dataTableWrapper">
<table class="slds-table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<template for:each={tableRows} for:item="row">
<tr key={row.name}>
<td>{row.name}</td>
<td class={row.status}>{row.status}</td>
</tr>
</template>
</tbody>
</table>
</div>
</template>
Step 6: Deploy and test the component
Use the Salesforce CLI to deploy the LWC component to your org:
sfdx force:source:deploy -p force-app/main/default/lwc/DataTableStyling
Open your Salesforce Developer Edition org and create a new Lightning Page or App to include the "DataTableStyling" component. Preview the page or app, and you should see the LWC Datatable with dynamic CSS styling based on the "status" field.
Conclusion:
In this blog post, we learned how to apply dynamic CSS styling to an LWC Datatable component. By leveraging the power of CSS and the flexibility of LWC, we can create visually appealing and user-friendly interfaces for displaying tabular data. Feel free to explore more styling options and customize the CSS code to suit your specific requirements.