0

SLDS's slds-line-clamp is a good way to truncate multi-line text at a fixed number of lines.

But it appears awkward to apply this to text cells in a lightning-datatable. This column data approach applies the class to the table cell (and so messes the whole table up) not to the container of the text:

cellAttributes: { class: 'slds-line-clamp' },

and this column data approach does not output the class at all:

typeAttributes: { class: 'slds-line-clamp' },

I also don't see any styling hooks related to line clamping. So is creating a custom datatype the only way to go here?

1 Answer 1

0

FYI doable via a custom datatype:

import LightningDatatable from 'lightning/datatable';
import textInDivWithClass from './textInDivWithClass.html';

/**
 * Allows e.g. slds-line-clamp to be applied to a text cell.
 */
export default class CustmDatatable extends LightningDatatable {
    static customTypes = {
        textInDivWithClass: {
            template: textInDivWithClass,
            standardCellLayout: true,
            typeAttributes: ['text', 'class'],
        },
    };
}

with the template HTML:

<template>
    <div class={typeAttributes.class}>{typeAttributes.text}</div>
</template>

and configured by column data of:

    {
        label: 'Description',
        fieldName: 'Description__c',
        type: 'textInDivWithClass',
        typeAttributes: {
            class: 'slds-line-clamp',
            text: {fieldName: 'Description__c'},
        },
        wrapText: true,
        hideDefaultActions: true,
        sortable: true,
    },

But in the end I've gone back to the simple one line truncation of wrapText: false with some column width adjustment to make the table look OK. Truncating at say 3 lines is still truncation, so overall seems better to go for the compactness of a single line per table row.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .