Yes, absolutely. You can create your own custom component with any tags/content you want and render it in a table cell for that column.
Step 1 : create custom component
Step 2 : Create a new component which extends datatable
Step 3 : We can use the component (that extended datatable) where-ever we want
Full details here: How to use custom LWC lightning component in lightning-datatable
On the assumption I've understood your question correctly, we have done this as follows:
- Extend the data table to support a custom cell data type:
import LightningDatatable from 'lightning/datatable';
import matchCell from './exampleMatchCell.html';
/**
* Extends the lightning-datatable component to add a custom matchScore cell type.
* This custom cell uses a lightning-accordion to show a single collapsible section with an icon.
*/
export default class ExampleResultsTable extends LightningDatatable {
static customTypes = {
matchScore: {
template: matchCell
}
}
}
- Provide the custom cell rendering (exampleMatchCell.html):
<template>
<lightning-accordion allow-multiple-sections-open>
<lightning-accordion-section name="breakdown" label={value.percentage}>
<lightning-icon slot="actions" icon-name={value.icon} variant={value.iconVariant}></lightning-icon>
<template for:each={value.notes} for:item="note">
<p class="slds-truncate" title={note.value} key={note.key}>{note.value}</p>
</template>
</lightning-accordion-section>
</lightning-accordion>
</template>
- Use this custom component in the parent rendering instead of the standard data table:
...
<c-example-results-table
key-field="Id"
data={_results}
columns={_columns}
onrowaction={handleRowActions}
hide-checkbox-column>
</c-example-results-table>
- Have the parent define the columns including the custom type:
...
this._columns.push({
fieldName: 'score',
label: this.Label.ColumnMatch,
type: 'matchScore',
initialWidth: 250,
fixedWidth: undefined,
typeAttributes: {}
});
...
For us, our datatable gets rendered like the following example, where the "Match" column is the one containing an accordion:
The row height adjusts depending on whether the accordion is open or closed, as illustrated.
You will find documentation about handling columns with "custom data types" under "Creating Custom Data Types".
Best Answer
Step 1 : create custom component as follows.
pocCustomComp.html :
and its JS:
Step 2 : Create a new component which extends datatable
pocLightningDatatable.js:
Here we are defining custom data types – fileUpload. Also do you notice that we are importing pocFileUpload template? You need to create pocFileUpload.html in the same folder as pocLightningDatatable
pocFileUpload.html – you have to use the custom component that we created before.
Observe the usage of
value
here, it is automatically passed as the value for the fieldName we define incolumns
.Step 3 : We can use the component (that extended datatable) where-ever we want
And the javascript which uses custom datatype:
Note: pocLightningDatatable.html will not have anything in it.
Apex class:
Reference: https://salesforcesas.home.blog/2019/07/26/using-custom-lwc-components-in-lightning-datatable/