Create a lightning component which displays the list of documents which are uploaded with their type. Create a Parent Component which displays the Documents column headings and the documents records should be displayed on another component which is a child component to the parent.
Parent Component.cmp
<aura:component>
<!-- Parent Component -->
<aura:attribute name="documents" type="List" default="[]" />
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<h2>Documents</h2>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">Name</th>
<th scope="col">Type</th>
</tr>
</thead>
<tbody>
<c:ChildDocumentComponent documents="{!v.documents}" />
</tbody>
</table>
</aura:component>
parent component js file
({
init: function(component, event, helper) {
// Fetch the documents data here from an Apex controller or a data service
var documents = [
{ Name: 'Document 1', Type: 'Type 1' },
{ Name: 'Document 2', Type: 'Type 2' },
{ Name: 'Document 3', Type: 'Type 3' }
];
component.set("v.documents", documents);
}
})
Childcomponent.cmp
<aura:component>
<!-- Child Component -->
<aura:attribute name="documents" type="List" default="[]" />
<aura:iteration items="{!v.documents}" var="doc">
<tr>
<td>{!doc.Name}</td>
<td>{!doc.Type}</td>
</tr>
</aura:iteration>
</aura:component>
Thanks👍🏻
All Answers
Which specific functionality are you looking to build- is it document upload/ download/delete? Thanks
Parent Component.cmp
<aura:component>
<!-- Parent Component -->
<aura:attribute name="documents" type="List" default="[]" />
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<h2>Documents</h2>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">Name</th>
<th scope="col">Type</th>
</tr>
</thead>
<tbody>
<c:ChildDocumentComponent documents="{!v.documents}" />
</tbody>
</table>
</aura:component>
parent component js file
({
init: function(component, event, helper) {
// Fetch the documents data here from an Apex controller or a data service
var documents = [
{ Name: 'Document 1', Type: 'Type 1' },
{ Name: 'Document 2', Type: 'Type 2' },
{ Name: 'Document 3', Type: 'Type 3' }
];
component.set("v.documents", documents);
}
})
Childcomponent.cmp
<aura:component>
<!-- Child Component -->
<aura:attribute name="documents" type="List" default="[]" />
<aura:iteration items="{!v.documents}" var="doc">
<tr>
<td>{!doc.Name}</td>
<td>{!doc.Type}</td>
</tr>
</aura:iteration>
</aura:component>
Thanks👍🏻