DEV Community

方帅
方帅

Posted on

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

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.

Image description

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;
})
Enter fullscreen mode Exit fullscreen mode

Result Display

Just paste the code in the example directly into the official editor to display it.

Image description

Relevant Documents

Theme Usage Reference Demo:https://visactor.io/vtable/demo/theme/extend

Theme Usage Tutorial:https://visactor.io/vtable/guide/theme_and_style/theme

Related api:https://visactor.io/vtable/option/ListTable#theme

github:https://github.com/VisActor/VTable

Top comments (0)