Lightning Data Table and File Preview

Question

Was wondering if anyone has figured out how to integrate the File Preview (for PDFs, jpgs etc.) that is present in the standard Files Related List into Lightning Data Table? i found this link that can open a preview "/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId=0688E0000008paMQAQ" but its not in the same in functionality and layout (ie. doesnt have the Download, Share etc. links). I've seen some uses of lightning:fileCard but not within Lightning Datatable

Answer 1

Create a row action in data table and launch slds modal opener where you can use lightning:fileCard base component to preview a file.

Answer 2

As @user57371 said to show the view button on the rows, you need to put the attributes in the typeAttributes object just like the below example.

component.set('v.doctablecolumns', [
    {label: 'Column1', fieldName: 'Column1'.....},
    {label: 'Column2', fieldName: 'Column2'.....},
    {
        label: 'View',
        type: 'button',
        initialWidth: 105,
        typeAttributes: { disabled: false, label: 'View', name: 'view', title: 'Click to Preview', iconName: 'utility:preview'}
    }
]);

Then you add a onrowaction attribute to the lighting:datatable component:

<lightning:datatable
                columns="{! v.columns }"
                data="{! v.data }"
                onrowaction="{! c.handleRowAction }"
                />

Then add a method to your controller to handle the button click. Something like this:

handleRowAction: function (cmp, event, helper) {
    var action = event.getParam('action');
    var row = event.getParam('row');
    switch (action.name) {
        case 'view':
            helper.viewDocument(row);
            break;
        // TBD for other action
        case 'action2':
            helper.otherAction(cmp, row, action);
            break;
        // etc.
    }

}

To show the document create a helper method and use lightning:openFiles as below.

viewDocument : function(row) {
    $A.get('e.lightning:openFiles').fire({
        recordIds: [row.documentId]
    });                 
},

Please note you need to have the Content Document Id in the DataTable model.