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

2 Answers 2


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, 2019 at 20:53
  • try with lightning:openFiles
    – user57371
    Mar 9, 2019 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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .