you can add an SVG Element as you want. Its position will start from left-top if you don’t use callback function.
Do you want to adjust the element based on the center position? No problem! Use callback function.
For the clean look and feel, the default behavior of the cell does not allow overflow of the content. But you can set them to allow overflow with one line. This is useful for debugging. (You know, content is hiding and have no idea where it is…)
You can make only some cell to overflow as well. This allow you to control the table look granually.
if your usecase is simply adjusting a little text position based from the center of the cell, you can use cx, cy
If you want to put labels outside of the table area, you might find it is very hard. You can add before and after items to make outbound labels easily.
You can change background of the cells and table. If you want to even more customize it, you can add some defs through props. In this example, You will see gradients. You can also change the text color simply.
svg-table has class names for individual elements. so you can add css.
but also, you can control individual text’s attributes since the attributes are passed by style.textStyle
option. All possible attributes can be passed to text elements.
using this behavior, we can override text’s position, layout, and much more behavior.
in this example, I just overrode the positions of text.