Assign CSS to lightning datatable

Question

I have an LWC that fetch account records. I want to apply some CSS to the table headers.

.html

<template>
    <lightning-card title="Datatable styling in lwc">

        <!-- Only load this if data is available -->
        <template if:true={tableData}>

            <lightning-datatable 
                key-field="Id" 
                data={tableData} 
                columns={columns}
                hide-checkbox-column
            >
            </lightning-datatable>

        </template>
    </lightning-card>
</template>

.js

import { LightningElement, wire } from 'lwc';

const COLUMNS = [
    {label:'Account Name', fieldName: 'Name', cellAttributes:{ class: 'test-css'}},

    {label:'Annual Revenue', fieldName: 'AnnualRevenue', type: 'currency', 
    cellAttributes:{ class: 'test-css'}
    },

.css

.test-css {
    color: blue;
    background-color: black;
}

the rest of the code works fine. It is just the css that is not working.

Answer 1

You cannot apply custom classes to lightning-datatable:

Custom classes are currently not supported. To apply custom styling on your datatable cells, create a custom data type and then apply your custom CSS classes. See Using Different Layouts in Custom Cells.

You may only:

Pass Lightning Design System classes to cellAttributes when using standard data types.