MODX tutorial: Custom renderers for MIGX columns

5th February 2013

If you're familiar with Chris' Twitter account, you'll know that we're big fans of MODX and recently have been using MIGX for quite a few of our projects. It gives us huge flexibility and has massively cut down our development time when it comes to custom manager pages (CMPs) in MODX. In a nutshell, you can build a fully functioning control panel for your extra without having to get involved with the multitude of Javascript files and PHP controllers that run it.

The main view is a grid - rows and columns of data from your custom database tables. MIGX comes with a number of renderers; ways of formatting your data to make it display in a user friendly format. For example renderImage will show a thumbnail of an image field and renderCrossTick will show a cross or a tick based on a 0 or 1 value.

There comes a point however when the standard renders don't quite cut it. This is where you can get creative. Have a look at this file:


This contains the standard renderers which you can use for inspiration. You can go ahead and edit this file, BUT if you update MIGX, it is likely to be overwritten. Luckily, you can add your own functions in a new file. In the same folder, create a file called where XXXX is the unique MIGX id you defined when you created the CMP. 

Simple! Once the renderer is available to MIGX you will be able to choose it when you're editing your column. If it's not there, you haven't set it up correctly. 

Here's a starter for you - this will format the date in a UK friendly format:

$renderer['this.renderUKDate'] = "
renderUKDate : function(val, md, rec, row, col, s) {
var date;
if (val && val != '') {
date = Date.parseDate(val, 'Y-m-d H:i:s');
return String.format('{0}', date.format('d-m-Y'));
} else {
return '';

Empowering causes with the means to directly impact lives

B Corporation Certified Escape the City 100 Winner We plant trees with Ecologi for every project we complete
Registered office address
86-90 Paul Street, London,EC2A 4NE


Hit up our positive impact newsletter to receive some good news in your inbox.

"*" indicates required fields

This field is for validation purposes and should be left unchanged.

© Copyright 2023 Studio Republic