Tabulator image enlarge on click

user_15883956 0
Viewed 133

I am new to reactjs and I am new to tabulator. I am using a tabulator to show a row which also has an image in one of the columns, as shown below.

enter image description here

I want to enlarge the image to its original size. How can I achieve this.

This is the code below:

const ForwardInventoryColumns=[
      {formatter:"responsiveCollapse", width:100, minWidth:100, align:"center", resizable:false, 
      headerSort:false},
      {
        title: "",
        field: "",
        align: "center",
        
        
        headerSort:false,
        
        formatter: reactFormatter(<UpdateDataButton />),        
      },
      
      { title: "Type", field: "type", minWidth : 100, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",visible:true},
      { title: "ID", field: "id", minWidth : 100, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",visible:true},
      { title: "Description", field: "desc", minWidth : 100, 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 : 100, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",
       editorParams: {allowEmpty: false},cellEdited:this.updateTableData , validator:{type:"max", 
       parameters:99999999 },visible:true,formatter:"image", formatterParams:{height:"50px",
       width:"50px",
       urlPrefix:"http://website.com/images/",
       urlSuffix:".png",
          }},
      { title: "Active", field: "active", minWidth : 100, headerSort: false,headerFilter: "input", 
      headerFilterPlaceholder:"search...",
      editor: "number", editorParams: {allowEmpty: false},cellEdited:this.updateTableData , 
      validator: 
      {type:"max", parameters:99999999 },visible:true}
tabulator reactjs
2 Answers

the quick and dirty ? set your width parameter in the formatterParams to something larger. (or get rid of height + width entirely and just put it in the minWidth column attribute)

The longer and more complicated, you're probably going to have to walk the rows, getting the actual <img> in the imgurl field, get its width and keep track of the widest image. Then use

updateColumnDefinition("imgurl", {minWidth:savedMaxWidth});

The problem I see with this is WHEN do you walk the rows to find the largest image ? You prolly dont know when the browser has pulled all the images to know that its time to go search and find the biggest image ?

user_105096160

well not working code, but the general idea...

<div id='dialog' style='display:none;z-index:2;width:100%;height:100%:position:relative'>
    <span style='position:absolute:top:0:right:0' onclick="document.getElementById('dialog').style.display='none'"><b>X</b></span>
    <img id='blowup' src=''>
</div>
<div id="tabulator"></div>

...

cellclick:function(e,cell) {
   document.getElementById('blowup').src = cell.getValue();
   document.getElementById('dialog').style.display = 'block';
},
user_105096160
Related