为每个单元格制作自定义工具提示

我想使可见的行变量值("公司"为特定(作为工具尖端。

我尝试在表声明中声明"工具提示"自定义函数返回值。

tooltips: function (cell) {
        let data = cell.getRow();
        return "Value of " + data.company;
      }

可在此小提琴

上获得完整的代码

我想显示公司变量的值，即鼠标悬停的alpha，beta，伽马等。

尝试以下：

tooltips: function (cell) {
        let data = cell.getRow();
        return "Value of " + data._row.data.company;
      }

const tableDataNested = [{
    group: "Backend Engineer A",
    name: "Sourced",
    applied: 300,
    screened: 40,
    interviewed: 5,
    company: "Alpha"
  },
  {
    group: "Backend Engineer A",
    name: "Referred",
    applied: 3,
    screened: 1,
    interviewed: 0,
    company: "Beta"
  },
  {
    group: "Backend Engineer A",
    name: "University",
    applied: 4,
    screened: 2,
    interviewed: 1,
    company: "Gamma"
  },
  {
    group: "Backend Engineer B",
    name: "Sourced",
    applied: 1000,
    screened: 140,
    interviewed: 55,
    company: "Delta"
  },
  {
    group: "Backend Engineer B",
    name: "Referred",
    applied: 30,
    screened: 11,
    interviewed: 2,
    company: "Epsilon"
  },
  {
    group: "Backend Engineer B",
    name: "University",
    applied: 40,
    screened: 22,
    interviewed: 10,
    company: "Phi"
  },
];
const table = new Tabulator("#example-table", {
  data: tableDataNested,
  dataTree: true,
  dataTreeStartExpanded: true,
  groupBy: "group",
  columnCalcs: "table",
  tooltips: function(cell) {
    const company = cell.getRow().getData().company
    return "Value of " + (company) ? company : '' ;
  },
  columns: [{
      title: "Name",
      field: "name",
      responsive: 0
    },
    {
      title: "Applied",
      field: "applied",
      bottomCalc: "sum"
    },
    {
      title: "Screened",
      field: "screened",
      bottomCalc: "sum"
    },
    {
      title: "Interviewed",
      field: "interviewed",
      bottomCalc: "sum"
    },
  ],
});

<head>
  <link href="https://unpkg.com/tabulator-tables@4.3.0/dist/css/tabulator.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.3.0/dist/js/tabulator.min.js"></script>
</head>
<body>
  <div id="example-table"></div>
</body>

相关内容

最新更新

热门标签：