In the LWC I'm building, I can't get the column headers to center. Below is the CSS file I have in my LWC component folder.
.slds-th__action {
justify-content: center;
}
and the markup
<template>
<lightning-card>
<template if:true={accountList}>
<lightning-datatable
class="slds-table_col-bordered"
key-field="id"
data={accountList}
columns={columns}
hide-checkbox-column>
</lightning-datatable>
</template>
</lightning-card>
</template>
I know that this should work because when I go into the chrome dev tools and put that style attribute in, the column headers align. But it is ignoring my CSS class for some reason. I've also tried adding !important at the end and have tried adding .THIS to the CSS class but neither make any difference.
Ran into the same problem and the only way I could do it was to import a static resource in the LWC:
Create a file with the ".css" extension with the following css and upload it as a static resource:
.custom-data-table .slds-th__action {
justify-content: center;
}
The ".custom-data-table" is not necessary but targets only the table you want.
If you don't add this, it will align the header of every table, even the standard ones.
I wrapped the data table in a div with the "custom-data-table" class in my case.
Then import it into your JS:
Js:
import { loadStyle } from 'lightning/platformResourceLoader';
import datatableHeaderCenter from '@salesforce/resourceUrl/datatableHeaderCenter';
export default class CustomDataTable extends LightningElement {
connectedCallback() {
loadStyle(this, datatableHeaderCenter)
.then(() => {
console.log('CSS loaded successfully');
})
.catch(error => {
console.error('Error loading CSS', error);
});
}
}
HTML:
<div class="custom-data-table">
<lightning-datatable
key-field="id"
data={data}
columns={columns}
onsave={handleSave}
oncancel={handleCancel}
draft-values={draftValues}
hide-checkbox-column="true"
>
</lightning-datatable>
</div>
