[Question] How to add timeline to play a schedule data using vtable

[zairl23]

Just find the schedule example using vtable: https://visactor.io/vtable/demo/business/project-schedule, now i want to add a timeline to play the schedule, and the table can scroll in a certain frequence, how to achieve this target?

[fangsmile]

use api:
setScrollLeft
or
scrollToCell(cellAddr: { col?: number; row?: number })=>void
@zairl23

[zairl23]

Thank you! Another question: is there the api to draw a vertical red lines in the vtable which can move by following scrollToCell api call。 @fangsmile

[fangsmile]

可以自定义渲染

args.table.getSelectedCellInfos() 获取选中状态 判断后确定自定义渲染元素应该什么

[zairl23]

can draw this vertical line using cusomRenderer and animate the vertical line
@fangsmile

[fangsmile]

滚动好搞，示例后面加这么一段话：

let animationId;
let scrollX=0;
let t = Date.now();
function animate() {
  console.log('animate')
  // 更新动画的逻辑代码
  const t1 = Date.now();
  if (scrollX>=tableInstance.getAllColsWidth()) {
    console.log('cancelAnimationFrame');
    cancelAnimationFrame(animationId);
    return;
  }
  if(t1-t>=30){
    t=t1;
    tableInstance.setScrollLeft(scrollX);
    scrollX+=3;
  }
  // 执行动画播放
  animationId = requestAnimationFrame(animate);
}

// 开始动画播放
animationId = requestAnimationFrame(animate);

不过如果支持那条竖线需要写自定义函数了。可以加我们的飞书交流群找我进行具体业务场景的交流

@zairl23