Examples(React)

Thes examples are quick demo with its code. ( I used this page for validation of functionalities! ).

Here is all DEMO code

If you want to see more, Go go Basic Usage and more pages.

Welcome To SVG Table Example!code

v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!v===@===|!

Standalonecode

Header 1Col SpanRow 1, Cell 1Row SpanmultilinesupportRow 1, Cell 3Row 2, Cell 1Row 2, Cell 3

basic democode

Header 1Col SpanRow 1, Cell 1Row SpanmultilinesupportRow 1, Cell 3Row 2, Cell 1Row 2, Cell 3

basic demo(HTML table strucutre)code

This example demonstrates HTML table structure

Header 1Col SpanRow 1, Cell 1Row SpanmultilinesupportRow 1, Cell 3Header 1Col Span

basic demo with radiuscode

This example demonstrates HTML table structure

Header 1Col SpanRow 1, Cell 1Row SpanmultilinesupportRow 1, Cell 3Row 2, Cell 1Row 2, Cell 3

basic with simple arraycode

cell1cell2line2cell3cell4contentcell7contentcell9

automatic colSpancode

cell1cell2line2cell3cell4cell4automatic span!cell4auto span with row-spancell5more cells

basic with elementcode

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

basic with propscode

Header 1Header 2This is Added ElementCell

Rotate Textcode

Cell 1Cell 2Cell 3Cell1Cell 3

allowing overflow by defaultcode

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

allowing only one cell overflowcode

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 adjustmentcode

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

no border table democode

header1header2Row1, Cell1Row 1, Cell 2Row 1, Cell 3Row 2, Cell 1Row 2, Cell 3

Marginscode

Paddingscode

in the first row, paddings for the text only works for left and top paddings.

but paddings are still used when you add nested table to calculate valid area.

paddings: [30, 50, 30, 50]paddings: 50this table is in padding boundary.paddings: [30, 50, 30, 50]

Table with Heightcode

below green box is (600px x 400px) in size.

And pink box is (500px x 300px) in size.

SVG Table is width: 500, height: 400, borderWidths: 1, borderColors: 'red', margins: 20, colGaps: 10, rowGaps: 10

All rows are automatically adjusted

header1header2header3cell1cell2cell3cell1cell2cell3

Table with Height with override heightcode

below green box is (600px x 400px) in size.

And pink box is (500px x 300px) in size.

SVG Table is width: 500, height: 300, borderWidths: 1, rowHeights: [1,1,1], borderColors: 'red'

All rows are automatically adjusted(100 = 300/3) based on rowHeights as ratio, but first row has height:200 in style.

since more specific style wins, the table height become 400

header1header2header3cell1cell2cell3cell1cell2cell3

embedded tablecode

Header 1Header 2Header3Blue TextOrangeBack,WhiteTextGradient BackGradient Back2Header 1Col SpanRow 1, Cell 1Row SpanmultilinesupportRow 1, Cell 3Row 2, Cell 1Row 2, Cell 3Header 1Header 2Row1, Cell1Row 1, Cell 2Row 1, Cell 3Row 2, Cell 1Row 2, Cell 3header1header2Row1, Cell1Row 1, Cell 2Row 1, Cell 3Row 2, Cell 1Row 2, Cell 3Header 1Header 2Header3Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3Header 1Header 2testRow 1, Cell 2Row 1, Cell 3Row 2, Cell 1Row 2, Cell 3

embedded table(HTML Like)code

Header 1Header 2Header 3Blue TextOrangeBack,WhiteTextGradient BackGradient Back2Header 1Col SpanRow 1, Cell 1Row SpanmultilinesupportRow 1, Cell 3Row 2, Cell 1Row 2, Cell 3Header 1Header 2Row1, Cell1Row 1, Cell 2Row 1, Cell 3Row 2, Cell 1Row 2, Cell 3header1header2Row1, Cell1Row 1, Cell 2Row 1, Cell 3Row 2, Cell 1Row 2, Cell 3Header 1Header 2Header3Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3Header 1Header 2testRow 1, Cell 2Row 1, Cell 3Row 2, Cell 1Row 2, Cell 3

embedded table as propscode

Header 1Header 2Header3emptyfilledemptyfilledfilledemptyemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledfilledemptyfilledemptyemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledfilledemptyfilledemptyemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyemptyfilledempty

embedded table with height as wellcode

Header 1Header 2Header3emptyfilledemptyfilledfilledemptyemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledfilledemptyfilledemptyemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledfilledemptyfilledemptyemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyfilledemptyfilledemptyfilledemptyfilledfilledemptyemptyfilledemptyfilledfilledemptyemptyfilledempty

embedded table with height as well(HTML like)code

Header 1Header 2Header 3cell 1cell 2cell 3cell 1cell 2cell 3cell 1cell 2cell 3filledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilledfilled

text style overridecode

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

only table bordercode

Header 1Header 2Header3Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3

table border with margincode

Header 1Header 2Header 3Cell 1Cell 2Cell 3Cell 1Cell 2Cell 3

table border stylescode

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

background color and text colorcode

Blue TextOrangeBack,WhiteTextGradient BackGradient Back2

gapscode

Header 1Header 2Row1, Cell1Row 1, Cell 2Row 1, Cell 3Row 2, Cell 1Row 2, Cell 3

out bound labels examplecode

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

table stylescode

Row1, Cell1rotate 15, opacity 0.5Row 1, Cell 3Row 2, Cell 1Row 2, Cell 3