Can the VTable component achieve different hover colors for different cells?

#vtable #visactor #visulization #webdev

Question Description

Can different cells have different hover colors?

Use case: By default, the hover color is set to blue. Under certain conditions, some cells are highlighted in purple. However, the requirement is that when hovering over the highlighted cells, they should not change to the hover blue color.

Solution

It can be solved by the background color function. Set bgColor as a function to set the highlight background color for special values. Set the background color through theme.bodyStyle.hover.cellBgColor, which also needs to be set as a function to return different background colors. If some cells do not want a background color, an empty string can be returned.

Code Example

let  tableInstance;
  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
    .then((res) => res.json())
    .then((data) => {

const columns =[
    {
        "field": "Profit",
        "title": "Profit",
        "width": "auto",
        style:{
            bgColor(args){
                if(args.value>200){
                    return 'rgba(153,0,255,0.2)'
                }
                // 以下代码参考DEFAULT主题配置实现 https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/DEFAULT.ts
                const { col,row, table } = args;
                const {row:index} = table.getBodyIndexByTableIndex(col,row);
                if (!(index & 1)) {
                    return '#FAF9FB';
                }
                return '#FDFDFD';
            }
        }
    },
    {
        "field": "Order ID",
        "title": "Order ID",
        "width": "auto"
    },
    {
        "field": "Customer ID",
        "title": "Customer ID",
        "width": "auto"
    },
    {
        "field": "Product Name",
        "title": "Product Name",
        "width": "auto"
    }
];

const option = {
  records:data,
  columns,
  widthMode:'standard',
  hover:{
    highlightMode:'cell'
  },
  theme:VTable.themes.DEFAULT.extends({
    bodyStyle:{
      hover:{
        cellBgColor(args){
          if(args.value>200){
              return ''
          }
          return '#CCE0FF';
        }
      }
    }
  })
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;
})