I have an HTML table, where there a row column that renders on condition,
<table class="slds-table slds-table--bordered">
<head>
<tr>
<th>Title</th>
<th>File Type</th>
<th>Uploaded on</th>
</tr>
</thead>
<tbody>
<template for:each={files} for:item="f">
<tr key={f.Id}>
<td>
<a href="javascript:void(0)" data-id={f.Id} onclick={previewFile}> {f.Title} </a>
</td>
<td>
{f.FileExtension}
</td>
<td>
<lightning-formatted-date-time value={f.CreatedDate}
year="numeric"
month="numeric"
day="numeric"
hour="2-digit"
minute="2-digit">
</lightning-formatted-date-time>
</td>
<td>
<div if:true={allowDelete}>
<a onclick={handleConfirmDialog} data-id={f.Id} data-name={f.Title}>
<lightning-button-icon icon-name="utility:delete" alternative-text="delete"></lightning-button-icon>
</a>
</div>
</td>
</tr>
</template>
</tbody>
</table>
Which renders this way:
As you can see, the delete element is conditional and the title is actually a "link" that should show a preview of the file.
I would like to migrate this piece of the code to use the lightning datatable instead of an HTML table or have the HTML table refreshed each time a new element is added or removed (using lightning-datatable and refreshApex() is way easier to achieve this) - (gonna post another question for this).
So far this is what I have done:
HTML
<lightning-card title="Datatable Example" icon-name="custom:custom63">
<div class="slds-m-around_medium">
<template if:true={files.data}>
<lightning-datatable
key-field="Id"
data={files.data}
columns={columns}
onsave={handleSave}
draft-values={draftValues}
hide-checkbox-column>
</lightning-datatable>
</template>
<template if:true={files.error}>
<!-- handle Apex error -->
</template>
</div>
</lightning-card>
JS
const COLUMNS = [
{
label: 'Title', fieldName: 'Title'
},
{
label: 'File type', fieldName: 'FileExtension'
},
{
label: 'Updated on', fieldName: 'CreatedDate', type: 'date', typeAttributes: {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "2-digit",
minute: "2-digit"
}
},
{
label: 'Delete', type: 'button-icon', typeAttributes: {
iconName: "utility:delete",
title: 'Delete'
}
}
]
Which renders this way:
I guess I could do some CSS toggle or something to hack this delete icon condition, but I feel like it's gonna be an "ugly" solution.
If I manage to refresh the HTML table that will be enough for my goal, but since I'm using LWC, shouldn't I try to implement LWC elements?
So, this is what I'd like to learn to do:
Refresh an HTML table from the JS controller. *Edit #1- Use a button-icon/button, inside lightning datatable and show it conditionally.
- Make the title/text to show the file preview, by using the NavigationMixin preview file method from the docs.
I don't want you to think I pretend to get the straight solutions from here, rather than that if you can guide me in the right direction, point me the documentation that I should be reading, I'll really appreciate it.
Best,
Edit #1
I was able to make the two tables refresh (lightning-datatable refresh as per the documentation stands for the element). But most importantly, the HTML table would be enough for the use case of the component, but I'd like to learn how to achieve this using the lightning-datatable element.
By using a wired Apex method to a property:
JS
@wire(getFiles, { recordId: '$recordId', documentPrefix: '$documentPrefix' })
files;
HTML
<table class="slds-table slds-table--bordered">
<thead>
<tr>
<th>Title</th>
<th>File Type</th>
<th>Uploaded on</th>
</tr>
</thead>
<tbody>
<template if:true={files.data} for:each={files.data} for:item="file">
<tr key={file.Id}>
<td>
<a href="javascript:void(0)" data-id={file.Id} onclick={previewFile}> {file.Title} </a>
</td>
<td>
{file.FileExtension}
</td>
<td>
<lightning-formatted-date-time value={file.CreatedDate}
year="numeric"
month="numeric"
day="numeric"
hour="2-digit"
minute="2-digit">
</lightning-formatted-date-time>
</td>
<td>
<div if:true={allowDelete}>
<a onclick={handleConfirmDialog}
data-id={file.Id}
data-name={file.Title}>
<lightning-button-icon icon-name="utility:delete" alternative-text="delete">
</lightning-button-icon>
</a>
</div>
</td>
</tr>
</template>
</tbody>
</table>
