Render Functions

For general infos, see the datatables.net documentation. https://datatables.net/manual/data/renderers

Example Renderer Function

function (data, type, row) {
	return data;
}

We use predefinded types for our datatable configurations as follows:

Build in Types:

• Number
• Text
• Date
• Adress
• Time
• Phone
• RichText
• E-Mail
• File
• DateTime
• Boolean
• Currency

NUMBER – ID1

Renderfunction for Numbers

TEXT – ID2

Renderfunction for text

DATE – ID3

Renderfunction for E-Mail Addresses

ADDRESS – ID4

Renderfunction for Fields

TIME – ID5

Renderfunction for Time

PHONE – ID6

Renderfunction for Phone Numbers

RTE – ID7

Renderfunction for RichText

EMAIL – ID8

Renderfunction for E-Mail Addresses

FILE – ID9

Renderfunction for Files

DATETIME – ID10

Renderfunction for DateTime

BOOLEAN – ID11

Renderfunction for Boolean Values. 

Value 0
Value 1

EMAIL – ID12

Renderfunction for currency euro

But you can easyl build your own render function and add it in the DataTable Field Settings.

Example Function to Render a Field with the JavaScript Number Format for Euro

function (data, type, row) {
	if (type == 'sort') {
		return data;
	}
	if (data) {
		const formatter = new Intl.NumberFormat('de-DE', {
	        style: 'currency',
	         currency: 'EUR'
	         })
		 return formatter.format(data);
	}
return data;
}

Hide a button when a specific field has a value

Example Hide Button if Row Column (end) is not null

 
function (data, type, row) {
	if(row.end !== null) {
		return "";
	}
	return data;
}

Example DateString

function (data, type, row) {
    if (type == 'sort') {
        return data;
    }
    if (data) {
        // Format: 20240313133754Z
        const datePattern = /^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})Z$/;
        const match = data.match(datePattern);
 
        if (match) {
            const [_, year, month, day, hours, minutes, seconds] = match;
            const date = new Date(Date.UTC(year, month - 1, day, hours, minutes, seconds));
 
            // Format as German locale date
            return date.toLocaleString('de-DE', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                timeZone: 'UTC'
            });
        }
    }
    return data;
}

Example FormatDate

Converts a MySQL date (e.g., 2025-01-01) into a German short date format with weekday (e.g., Di, 28.11).

function (data, type, row) {
    if (type == 'sort') {
        return data;
    }
    if (data) {
        const date = new Date(data.replace(' ', 'T')); 
 
        return date.toLocaleDateString('de-DE', {
            weekday: 'short',
            day: '2-digit',  
            month: '2-digit'  
        });
    }
    return data;
}

Example Render Icons

function (data, type, row) {
        // To make ordering working on this column
	if (type == "sort") {
                return data;
        }
        if (data == '1') {
		return "<i class='fas fa-eye' style='color: green' />";
	}
        else if (data == '2') {
		return "<i class='fas fa-chevron-circle-down' style='color: orange' />";
	}
	return "<i class='fa fa-times' style='color: red' />";
}
 

Example Render Badges

function (data, type, row) {
	if (type == "sort") {
               return data;
        }
        if (data == null) {
               return data;
        }
        let badgeClass = "success"; 
        let values = data.split(',');
	if (! values[1]) {
		maxCnt = "-";
	}
	else {
		if ( ( values[0] /  values[1]) > 1.0) {
			badgeClass = "danger";
		}
                else if ( ( values[0] /  values[1]) > 0.8) {
			badgeClass = "warning";
                }
	}
	return "<span class='badge badge-" + badgeClass + "'>" +  values[0] + "/" +  values[1] + "</span>";
}
 

Example Render Custom DateTime

dd.mm.yyyy hh:mm

function (data, type, row) {
    if (type == 'sort') {
        return data; 
    }
    if (data) {
        const date = new Date(data.replace(' ', 'T'));  
        return date.toLocaleDateString('de-DE', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
        }) + ' ' + date.toLocaleTimeString('de-DE', {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false,  
        });
    }
    return data;  
}