How to show an image in tabulator

user_15883956 0
Viewed 338

I am new to reactjs and new to tabulator. I am setting the tabulator with the database columns from sql database. In the sql database a column for image url exists which when opened in the browser shows an image.

I am setting up my tabulator as follows:

const ForwardInventoryColumns=[
      {formatter:"responsiveCollapse", width:30, minWidth:30, align:"center", resizable:false, 
     headerSort:false},
      {
        title: "",
        field: "",
        align: "center",
        headerSort:false,
        formatter: reactFormatter(<UpdateDataButton />),        
      },
      
      { title: "Type", field: "type", minWidth : 20, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",visible:true},
      { title: "ID", field: "id", minWidth : 150, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",visible:true},
      { title: "Description", field: "desc", minWidth : 40, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",
      editor: "number", editorParams: {allowEmpty: false},cellEdited:this.updateTableData,  
      validator:{type:"max", parameters:99999999 },visible:true},
      { title: "ImageURL", field: "imgurl", minWidth : 20, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",
      editor: "number", editorParams: {allowEmpty: false},cellEdited:this.updateTableData , 
      validator:{type:"max", parameters:99999999 },visible:true},
      { title: "Active", field: "active", minWidth : 20, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",
      editor: "number", editorParams: {allowEmpty: false},cellEdited:this.updateTableData , 
      validator:{type:"max", parameters:99999999 },visible:true}

I want to show the image url column as an image of the url in the table rendering in my front end. How do I do this?

tabulator reactjs
1 Answers

Use the "image" formatter. From the v4.9 docs :

{title:"Example", field:"example", formatter:"image", formatterParams:{
    height:"50px",
    width:"50px",
    urlPrefix:"http://website.com/images/",
    urlSuffix:".png",
}}

The "value" of your data in the field "example" will be placed in between the urlPrefix and urlSuffix value. If your data has the full URL, dont use either of these parameters in your column definition.

user_105096160
Related