Customizing contents

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.

Custom Element With Props

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

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

Control Overflow behavior individually

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

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

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.

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.

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.