function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
PrashanthPrashanth 

how can we built this component Using The lightning Aura Components?

User-added image
Best Answer chosen by Prashanth
Anirudha KulkarniAnirudha Kulkarni
Yes u can create the Lightning aura component which displays the List of documents with there type below code will help you to solve your requirement 

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

SwethaSwetha (Salesforce Developers) 
HI Prashanth,
Which specific functionality are you looking to build- is it document upload/ download/delete? Thanks
PrashanthPrashanth
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.
Anirudha KulkarniAnirudha Kulkarni
Yes u can create the Lightning aura component which displays the List of documents with there type below code will help you to solve your requirement 

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👍🏻
This was selected as the best answer