Table With Custom Element

you can add an SVG Element as you want. Its position will start from left-top if you don’t use callback function.

Header 1Header 2Header3This is Added ElementRow SpanRow 1, Cell 3Row 2, Cell 1Row 2, Cell 3

Custom Element With Props

Do you want to adjust the element based on the center position? No problem! Use callback function.

Header 1Header 2This is Added ElementCell

Allow Contents Overflow

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…)

This should overflow Because it is so long!!CellCellCellThis should overflow Because it is so long!!CellCellCellThis should overflow Because it is so long!!

Control Overflow behavior individually

You can make only some cell to overflow as well. This allow you to control the table look granually.

This should overflow Because it is so long!!CellCellCellThis should overflow Because it is so long!!CellCellCellThis should overflow Because it is so long!!

Text Position Adjustment

if your usecase is simply adjusting a little text position based from the center of the cell, you can use cx, cy

cx: -10, cy: -3without cx,cycx: 10, cy: 3

Outbound Labels

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.

BeforeTOP LABELAfterBefore Header 2Header 2After Header 2LEFT LABELtextRow SpanRow 1, Cell 3Row 2, Cell 1Row 2, Cell 3

Background and Text Color change

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.

Blue TextOrangeBack,WhiteTextGradient BackGradient Back2

Text override

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.

Header 1Header 2testRow 1 Cell 2Row 1, Cell 3Row 2, Cell 1Row 2, Cell 3