It's possible to use Ant Design Tour component with Ant Design Table component?

Question

I want to use https://ant.design/components/tour/ component. But there is a question raised: it's possible to use it with Ant Design Table? (https://ant.design/components/table)

Ok, I tried to use Tour component with HTML-native table (), and it works. But how to use it with Ant Design Table is not clear

Answer 1

To make Tour component work with header of Table columns, we can go such way:

Define ref for a Header:

const someHeaderRef = useRef<HTMLElement>(null);

Pass it to a Table columns definition:

const columns = [
  {
    title: (
      <>
        Some Header
        <span
          ref={someHeaderRef}
        />
      </>
    ),
    dataIndex: 'someHeader',
  }
];

Define this ref into Tour steps:

const steps: TourProps['steps'] = [
    {
      title: 'Some Header',
      description: '',
      target: someHeaderRef.current,
    },
];

<Tour steps={steps} />