diff --git a/packages/stark-ui/src/modules/table/components/column.component.ts b/packages/stark-ui/src/modules/table/components/column.component.ts
index 05076331a9..8ac8e74147 100644
--- a/packages/stark-ui/src/modules/table/components/column.component.ts
+++ b/packages/stark-ui/src/modules/table/components/column.component.ts
@@ -274,21 +274,19 @@ export class StarkTableColumnComponent extends AbstractStarkUiComponent implemen
 		let formattedValue = "";
 		const rawValue: any | undefined = this.getRawValue(row);
 
-		if (typeof rawValue !== "undefined") {
-			if (this.cellFormatter instanceof Function) {
-				formattedValue = this.cellFormatter(rawValue, row, this.name);
-			} else if (typeof rawValue === "number") {
-				return rawValue; // return already, no point in translating a number
-			} else {
-				formattedValue = rawValue.toString();
-			}
-		} else {
+		if (this.cellFormatter instanceof Function) {
+			formattedValue = this.cellFormatter(rawValue, row, this.name);
+		} else if (typeof rawValue === "undefined") {
 			return ""; // return already, no point in translating an empty string
+		} else if (typeof rawValue === "number") {
+			return rawValue; // return already, no point in translating a number
+		} else {
+			formattedValue = rawValue.toString();
 		}
 
-		return formattedValue;
 		// TODO: add translation feature
 		// return this.$translate.instant(formattedValue);
+		return formattedValue;
 	}
 
 	/**
diff --git a/packages/stark-ui/src/modules/table/components/table.component.spec.ts b/packages/stark-ui/src/modules/table/components/table.component.spec.ts
index d3f18305a6..575f6720e8 100644
--- a/packages/stark-ui/src/modules/table/components/table.component.spec.ts
+++ b/packages/stark-ui/src/modules/table/components/table.component.spec.ts
@@ -1269,6 +1269,47 @@ describe("TableComponent", () => {
 		});
 	});
 
+	describe("setCellFormatter", () => {
+		const dummyData: object[] = [
+			{ id: 1, description: "dummy 1", test: "test-1" },
+			{ id: 2, test: "test-2" },
+			{ id: 3, description: "dummy 3" }
+		];
+
+		beforeEach(() => {
+			hostComponent.columnProperties = [
+				{ name: "id", cellFormatter: (value: any): string => (value === 1 ? "one" : "") },
+				{ name: "description", cellFormatter: (value: any): string => typeof value === "undefined" ? "-null-" : value },
+				{ name: "test" }
+			];
+			hostComponent.dummyData = dummyData;
+
+			hostFixture.detectChanges(); // trigger data binding
+			component.ngAfterViewInit();
+		});
+		
+		it("should display the formatted value in the cell instead of the raw value", () => {
+			const rowIdElements = hostFixture.nativeElement.querySelectorAll("table tbody tr td.mat-column-id");
+			
+			expect(rowIdElements.length).toBe(3);
+			expect(rowIdElements[0].innerText).toEqual("one");
+		});
+		
+		it("should display the formatted value in the cell even if the raw value is undefined", () => {
+			const rowIdElements = hostFixture.nativeElement.querySelectorAll("table tbody tr td.mat-column-description");
+
+			expect(rowIdElements.length).toBe(3);
+			expect(rowIdElements[1].innerText).toEqual("-null-");
+		});
+		
+		it("should NOT display anything when the raw value is undefined and there is no 'cellFormatter' defined for the column", () => {
+			const rowIdElements = hostFixture.nativeElement.querySelectorAll("table tbody tr td.mat-column-test");
+
+			expect(rowIdElements.length).toBe(3);
+			expect(rowIdElements[2].innerText).toEqual("");
+		})
+	});
+	
 	describe("setStyling", () => {
 		const dummyData: object[] = [
 			{ id: 1, description: "dummy 1" },