Add example of fillOpacity usage in tables

bpampuch · Feb 7, 2020 · 3f1f653 · 3f1f653
1 parent fa05456
commit 3f1f653
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 2 deletions.
diff --git a/dev-playground/public/samples/tables b/dev-playground/public/samples/tables
@@ -275,8 +275,61 @@ content: [
 			]
 		},
 		layout: {
-			fillColor: function (i, node) {
-				return (i % 2 === 0) ? '#CCCCCC' : null;
+			fillColor: function (rowIndex, node, columnIndex) {
+				return (rowIndex % 2 === 0) ? '#CCCCCC' : null;
+			}
+		}
+	},
+	{text: 'handling fill color opacity...', margin: [0, 20, 0, 8]},
+	{text: '... just hardcoding values in the second row', margin: [0, 20, 0, 8]},
+	{
+		style: 'tableExample',
+		table: {
+			body: [
+				['Sample value 1', 'Sample value 2', 'Sample value 3'],
+				[
+					{text: 'Sample value 1',fillOpacity:0.15,fillColor:'blue'},
+					{text: 'Sample value 2',fillOpacity:0.60,fillColor:'blue'},
+					{text: 'Sample value 3',fillOpacity:0.85,fillColor:'blue'},
+				],
+				['Sample value 1', 'Sample value 2', 'Sample value 3']
+			]
+		},
+	},	
+	{text: '... using a custom styler and overriding it in the second row', margin: [0, 20, 0, 8]},
+	{
+		style: 'tableOpacityExample',
+		table: {
+			body: [
+				['Sample value 1', 'Sample value 2', 'Sample value 3'],
+				[
+					{text: 'Sample value 1',fillOpacity:0.15},
+					{text: 'Sample value 2',fillOpacity:0.60},
+					{text: 'Sample value 3',fillOpacity:0.85},
+				],
+				['Sample value 1', 'Sample value 2', 'Sample value 3']
+			]
+		},
+	},
+	{text: '... with a function (opacity at 0 means fully transparent, i.e no color)', margin: [0, 20, 0, 8]},
+	{
+		style: 'tableExample',
+		table: {
+			body: [
+				['Sample value 1', 'Sample value 2', 'Sample value 3'],
+				['Sample value 1', 'Sample value 2', 'Sample value 3'],
+				['Sample value 1', 'Sample value 2', 'Sample value 3'],
+				['Sample value 1', 'Sample value 2', 'Sample value 3'],
+				['Sample value 1', 'Sample value 2', 'Sample value 3'],
+				['Sample value 1', 'Sample value 2', 'Sample value 3'],
+				['Sample value 1', 'Sample value 2', 'Sample value 3'],
+				['Sample value 1', 'Sample value 2', 'Sample value 3'],
+			]
+		},
+		layout: {
+			fillColor: 'blue',
+			fillOpacity: function (rowIndex, node, columnIndex) {
+				return (rowIndex/8+columnIndex/3);
 			}
 		}
 	},
@@ -534,6 +587,11 @@ styles: {
 	tableExample: {
 		margin: [0, 5, 0, 15]
 	},
+	tableOpacityExample: {
+		margin: [0, 5, 0, 15],
+		fillColor: 'blue',
+		fillOpacity: 0.3
+	},
 	tableHeader: {
 		bold: true,
 		fontSize: 13,

diff --git a/examples/pdfs/tables.pdf b/examples/pdfs/tables.pdf
diff --git a/examples/tables.js b/examples/tables.js
@@ -295,6 +295,59 @@ var docDefinition = {
 				}
 			}
 		},
+		{ text: 'handling fill color opacity...', margin: [0, 20, 0, 8] },
+		{ text: '... just hardcoding values in the second row', margin: [0, 20, 0, 8] },
+		{
+			style: 'tableExample',
+			table: {
+				body: [
+					['Sample value 1', 'Sample value 2', 'Sample value 3'],
+					[
+						{text: 'Sample value 1',fillOpacity:0.15,fillColor:'blue'},
+						{text: 'Sample value 2',fillOpacity:0.60,fillColor:'blue'},
+						{text: 'Sample value 3',fillOpacity:0.85,fillColor:'blue'},
+					],
+					['Sample value 1', 'Sample value 2', 'Sample value 3']
+				]
+			},
+		},	
+		{ text: '... using a custom styler and overriding it in the second row', margin: [0, 20, 0, 8] },
+		{
+			style: 'tableOpacityExample',
+			table: {
+				body: [
+					['Sample value 1', 'Sample value 2', 'Sample value 3'],
+					[
+						{text: 'Sample value 1',fillOpacity:0.15},
+						{text: 'Sample value 2',fillOpacity:0.60},
+						{text: 'Sample value 3',fillOpacity:0.85},
+					],
+					['Sample value 1', 'Sample value 2', 'Sample value 3']
+				]
+			},
+		},
+		{ text: '... with a function (opacity at 0 means fully transparent, i.e no color)', margin: [0, 20, 0, 8] },
+		{
+			style: 'tableExample',
+			table: {
+				body: [
+					['Sample value 1', 'Sample value 2', 'Sample value 3'],
+					['Sample value 1', 'Sample value 2', 'Sample value 3'],
+					['Sample value 1', 'Sample value 2', 'Sample value 3'],
+					['Sample value 1', 'Sample value 2', 'Sample value 3'],
+					['Sample value 1', 'Sample value 2', 'Sample value 3'],
+					['Sample value 1', 'Sample value 2', 'Sample value 3'],
+					['Sample value 1', 'Sample value 2', 'Sample value 3'],
+					['Sample value 1', 'Sample value 2', 'Sample value 3'],
+				]
+			},
+			layout: {
+				fillColor: 'blue',
+				fillOpacity: function (rowIndex, node, columnIndex) {
+					return (rowIndex/8+columnIndex/3);
+				}
+			}
+		},
 		{ text: 'and can be used dash border', margin: [0, 20, 0, 8] },
 		{
 			style: 'tableExample',
@@ -637,6 +690,11 @@ var docDefinition = {
 		tableExample: {
 			margin: [0, 5, 0, 15]
 		},
+		tableOpacityExample: {
+			margin: [0, 5, 0, 15],
+			fillColor: 'blue',
+			fillOpacity: 0.3
+		},
 		tableHeader: {
 			bold: true,
 			fontSize: 13,