search

pierpo / react-archer

🏹 Draw arrows between React elements 🖋
https://pierpo.github.io/react-archer/
MIT License
1.17k stars 68 forks source link

Problem in Creating Dynamic Archer Elements #162

Closed eilman closed 1 year ago

eilman commented 2 years ago

I am using Material Table and I want to create multiple Archer Elements between rows from different tables. If I try to create dynamic Archer Elements, only the last archer with last target id is shown. I can solve this problem with setting target id's manually but it is not what I want because my target id list is dynamic. I want to set a list to target id (dataCmp). In example, this is the target id array dataCmp = ['c1', 'c2', 'c3']. We can only see an arrow from a1 (a row from table1) to c3(a row from table two), but it has to be a1 to c1, a1 to c2 and a1 to c3. You can see my code below. components={{ Action: tableProps => dataCmp.map(cmp => ( <ArcherElement id={'a1'} relations={[ { targetId: cmp.id, targetAnchor: 'left', sourceAnchor: 'right', style: { strokeColor: 'blue', strokeWidth: 1 }, label: <div style={{ marginTop: '-20px' }}>Arrow {tableProps.data.id}

, }, ]}

)), }}

Could you please give an advice for how can I create dynamic Archer elements ?

pierpo commented 2 years ago

Hello! Sorry I forgot to answer.

Could you provide more detail or a reproducible example? It is supposed to work with dynamic elements! (see Example 2 on the repo)