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


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

  • Was able to get it to work with this setup, much appreciated. Any ideas on how to autolaunch the Lightning:filecard component (ie. just have the file preview automatically open when the Modal is launched rather than the user click again)? Been stuck on that – Bobbygllh Mar 8 '19 at 20:53
  • try with lightning:openFiles – user57371 Mar 9 '19 at 15:19

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:

                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':
        // TBD for other action
        case 'action2':
            helper.otherAction(cmp, row, action);
        // etc.


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

viewDocument : function(row) {
        recordIds: [row.documentId]

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.