이미지 렌더러

// 그리드 칼럼 레이아웃 설정
const columnLayout = [{
	...
}, {
	dataField: "country",
	headerText: "Country",
	width: 120,
	renderer: {
		type: "ImageRenderer",
		imgHeight: 24, // 이미지 높이, 지정하지 않으면 rowHeight에 맞게 자동 조절되지만 빠른 렌더링을 위해 설정을 추천합니다.
		altField: null, // alt(title) 속성에 삽입될 필드명, 툴팁으로 출력됨. 만약 null 을 설정하면 툴팁 표시 안함.
		imgTableRef: { // 이미지 소스참조할 테이블 레퍼런스
			"Korea": "./assets/korea.png",
			"USA": "./assets/usa.png",
			"UK": "./assets/uk.png",
			"Japan": "./assets/japan.png",
			"China": "./assets/china.png",
			"France": "./assets/france.png",
			"Italy": "./assets/italy.png",
			"Singapore": "./assets/singapore.png",
			"Taiwan": "./assets/taiwan.png",
			"Ireland": "./assets/ireland.png",
			"default": "./assets/korea.png" // default
		}
	}
}, {
	dataField: "flag",
	headerText: "Flag",
	prefix: "./assets/",
	width: 120,
	renderer: {
		type: "ImageRenderer",
		imgHeight: 24, // 이미지 높이, 지정하지 않으면 rowHeight에 맞게 자동 조절되지만 빠른 렌더링을 위해 설정을 추천합니다.
		altField: "country" // alt(title) 속성에 삽입될 필드명, 툴팁으로 출력됨
	}
}, {
	dataField: "color",
	headerText: "Color",
	width: 120,
	renderer: {
		type: "ImageRenderer",
		imgHeight: 24, // 이미지 높이, 지정하지 않으면 rowHeight에 맞게 자동 조절되지만 빠른 렌더링을 위해 설정을 추천합니다.
		altField: "color", // alt(title) 속성에 삽입될 필드명, 툴팁으로 출력됨
		srcFunction: function (rowIndex, columnIndex, value, item) {
			switch (value) {
				case "Blue":
					return "./assets/blue_circle.png";
				case "Gray":
					return "./assets/gray_circle.png";
				case "Green":
					return "./assets/green_circle.png";
				case "Orange":
					return "./assets/orange2_circle.png";
				case "Pink":
					return "./assets/pink_circle.png";
				case "Violet":
					return "./assets/violet_circle.png";
				default:
					return null; // null 반환하면 이미지 표시 안함.
			}
		} // end of srcFunction
	}
}