制表符：将图标与链接格式化程序一起使用

Question

Using Tabulator Link formatter for an Icon column

I have a column set to a Link formatter, which I would like to display an Icon in rather than text (to emulate a button).

I have a simple custom Formatter available to render the icon

        function printIcon(cell, formatterParams, onRendered) 
        {
            return "<i class='fa fa-print'></i>";
        };

And the column defined with the Label option of the Link set to the custom formatter

  {
    "field": null,
    "title": "",
    "visible": true,
    "width": 20,
    "formatter": "link",
    "formatterParams": {
      "labelField": null,
      "urlPrefix": "../record/?TaskID=",
      "urlField": "TaskID",
      "target": "",
      "label": printIcon
    },
    "headerFilter": "",
    "headerFilterParams": null,
    "headerSort": false,
    "editor": "",
    "editorOptions": null,
    "position": 16,
    "cellClick": null
  }

However the cell is rendering with the custom formatter value appearing as text, rather than the icon Visible in the image below.

It feels like i'm missing something obvious, but I can add an icon column and add a link column, i just don't see a way of combining them.

Thanks for any suggestions

Answer 1

The obvious is this:

http://tabulator.info/docs/4.7/format#format

"Link

The link formater renders data as an anchor with a link to the given value (by default the value will be used as both the url and the label of the tag).

[...]

label - a string representing the lable, or a function which must return the string for the label, the function is passed the Cell Component as its first argument"

The only way I know to link a Icon column and a Link column is by having the cellClick function of the Icon process the link in the Link column.

Answer 2

In addition to Adrian's answer above, you can also have a look at the Icon/Button Column formatting documentation

Answer 3

You can use a custom formatter that returns a valid html element: a link with an icon.

This is an example of column definition:

{title:"Title", field:"Field", 
 formatterParams:{
  urlPrefix:"url_prefix",
 },
 formatter: function(cell, formatterParams, onRendered){
   let value = cell.getValue();
   let href = `${formatterParams["urlPrefix"]}${value}`;
   return "<a href="+href+"> <i class='fa fa-link'></i>"
 }
},