Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
LWC rich text column type for lightning-datatable (with standard text wrapping support)
<template>
<!-- A custom component instead of lightning-datatable -->
<c-my-custom-datatable
key-field="textCol"
columns={columns}
data={tableData}
wrap-text-max-lines="3">
</c-my-custom-datatable>
</template>
import { LightningElement } from "lwc";
/**
* A component that uses new datatable
*/
export default class cmpWithDatatable extends LightningElement {
columns = [
// standard text column
{ label: "Text Column", fieldName: "textCol", wrapText: true },
// custom richText column
{ label: "Rich Text", fieldName: "richTextCol", type: "richText", wrapText: true }
];
tableData = {
textCol: "Text",
richTextCol: "<h3>Rich Text</h3>"
};
}
<template>
</template>
import LightningDatatable from "lightning/datatable";
import richTextColumnType from "./richTextColumnType.html";
/**
* Custom component that extends LightningDatatable
* and adds a new column type
*/
export default class MyCustomDatatable extends LightningDatatable {
static customTypes={
// custom type definition
richText: {
template: richTextColumnType,
standardCellLayout: true
}
}
}
<template>
<!-- a template for cell. File in the myCustomDatatable directory -->
<template if:true={wrapText}>
<lightning-formatted-rich-text value={value} class="slds-truncate">
</lightning-formatted-rich-text>
</template>
<template if:false={wrapText}>
<lightning-formatted-rich-text value={value}>
</lightning-formatted-rich-text>
</template>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment