[SalesForce] How to use a smaller font in lightning-datatable

We are in the process of moving from Classic to Lightning. I am rebuilding some Visualforce pages to Lightning Web Components. One of the many challenges is this one:

The font that is used in a lightning-datatable is much larger than that in a Visualforce apex:pageBlockTable. This causes data to be illegible (not enough data is visible anymore).

I guess this has to be solved with CSS class or style. I am a CSS newbie and, also, googling on lightning-datatable gives me lots of aura answers that do not seem to work for LWC. How can I change the font sizes of all data in a lightning-datatable to – say – 80%?

Best Answer

You can't specifically target the font inside, but you can shrink the entire table via zoom:

.eighty-percent {
    zoom: 80%;
}

<template>
    <lightning-datatable class="eighty-percent" data={data} columns={cols} key-field="id">
    </lightning-datatable>
</template>

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    @track data = [{id:'1',name:'Demo'}];
    @track cols = [{label:'Name',fieldName:'name'}];
}

I created a Playground that demonstrates this.

Related Topic