4

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%?

5

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.

6
  • @sfdxfox will this be blocked by locker service or is it wrong developer.salesforce.com/docs/component-library/tools/…
    – User6670
    Mar 5 '20 at 15:12
  • 1
    @User6670 Locker Service doesn't affect CSS. The Shadow DOM does. Looking at the table, it appears that slds-table is set to a font-size of "inherit", so changing it from a parent container (as in your example) is also supported. If the font-size was embedded in the table, this trick would not work. It should be safe to use either method.
    – sfdcfox
    Mar 5 '20 at 15:16
  • It's just as easy as it looks. The table itself still spans the entire width of the window, but the used fonts are all decreased in size. Thanks! Mar 5 '20 at 15:26
  • Can I use this zoomattribute for CustomDataTable as well? Apr 25 '20 at 8:10
  • 2
    @IsuruBuddhikaHerath Yes, it should work just fine for a custom data table.
    – sfdcfox
    Apr 25 '20 at 10:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.