Examples

Thes examples are quick demo with its code for Vanilla JS ( 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 ===@=== | !

Standalone code

Header 1 Col Span Row 1, Cell 1 Row Span multiline support Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 3

basic demo code

Header 1 Col Span Row 1, Cell 1 Row Span multiline support Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 3

basic with simple array code

cell1 cell2 line2 cell3 cell4 content cell7 content cell9

basic rounded table code

Header 1 Col Span Row 1, Cell 1 Row Span multiline support Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 3

automatic colSpan code

cell1 cell2 line2 cell3 cell4 cell4 automatic span! cell4 auto span with row-span cell5 more cells

basic with element code

Header 1 Header 2 Header3 This is Added Element Row Span Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 3

basic with props code

Header 1 Header 2 This is Added Element Cell

Rotate Text code

Cell 1 Cell 2 Cell 3 Cell1 Cell 3

allowing overflow by default code

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

allowing only one cell overflow code

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

text position adjustment code

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

no border table demo code

header1 header2 Row1, Cell1 Row 1, Cell 2 Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 3

Margins code

Paddings code

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: 50 this table is in padding boundary. paddings: [30, 50, 30, 50]

Table with Height code

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

header1 header2 header3 cell1 cell2 cell3 cell1 cell2 cell3

Table with Height with override height code

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

header1 header2 header3 cell1 cell2 cell3 cell1 cell2 cell3

embedded table code

Header 1 Header 2 Header3 Blue Text OrangeBack, WhiteText Gradient Back Gradient Back2 Header 1 Col Span Row 1, Cell 1 Row Span multiline support Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 3 Header 1 Header 2 Row1, Cell1 Row 1, Cell 2 Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 3 header1 header2 Row1, Cell1 Row 1, Cell 2 Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 3 Header 1 Header 2 Header3 Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Header 1 Header 2 test Row 1, Cell 2 Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 3

embedded table as props code

Header 1 Header 2 Header3 empty filled empty filled filled empty empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled filled empty filled empty empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled filled empty filled empty empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty empty filled empty

embedded table with height as well code

Header 1 Header 2 Header3 empty filled empty filled filled empty empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled filled empty filled empty empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled filled empty filled empty empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty filled empty filled empty filled empty filled filled empty empty filled empty filled filled empty empty filled empty

text style override code

Header 1 Header 2 test Row 1 Cell 2 Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 3

only table border code

Header 1 Header 2 Header3 Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3

table border with margin code

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

table border styles code

Header 1 Header 2 test Row 1, Cell 2 Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 3

background color and text color code

Blue Text OrangeBack, WhiteText Gradient Back Gradient Back2

gaps code

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

out bound labels example code

Before TOP LABEL After Before Header 2 Header 2 After Header 2 LEFT LABEL text Row Span Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 3

table styles code

Row1, Cell1 rotate 15, opacity 0.5 Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 3