diff --git a/client/src/lists/CUD.js b/client/src/lists/CUD.js
index 5837bad0..c2b1bfda 100644
--- a/client/src/lists/CUD.js
+++ b/client/src/lists/CUD.js
@@ -12,6 +12,7 @@ import { withErrorHandling } from '../lib/error-handling';
 import { DeleteModalDialog } from '../lib/modals';
 import { validateNamespace, NamespaceSelect } from '../lib/namespace';
 import { UnsubscriptionMode } from '../../../shared/lists';
+import styles from "../lib/styles.scss";
 
 @translate()
 @withForm
@@ -162,7 +163,7 @@ export default class CUD extends Component {
                     <InputField id="name" label={t('Name')}/>
 
                     {isEdit &&
-                        <StaticField id="cid" label="List ID" help={t('This is the list ID displayed to the subscribers')}>
+                        <StaticField id="cid" className={styles.formDisabled} label="List ID" help={t('This is the list ID displayed to the subscribers')}>
                             {this.getFormValue('cid')}
                         </StaticField>
                     }
diff --git a/client/src/lists/subscriptions/List.js b/client/src/lists/subscriptions/List.js
index 51377d8e..3d8e677c 100644
--- a/client/src/lists/subscriptions/List.js
+++ b/client/src/lists/subscriptions/List.js
@@ -14,7 +14,7 @@ import {
 } from '../../lib/form';
 import {Icon} from "../../lib/bootstrap-components";
 import axios from '../../lib/axios';
-import {getSubscriptionStatusLabels} from './helpers';
+import {getFieldTypes, getSubscriptionStatusLabels} from './helpers';
 
 @translate()
 @withForm
@@ -30,6 +30,7 @@ export default class List extends Component {
         this.state = {};
 
         this.subscriptionStatusLabels = getSubscriptionStatusLabels(t);
+        this.fieldTypes = getFieldTypes(t);
 
         this.initForm({
             onChange: {
@@ -90,10 +91,16 @@ export default class List extends Component {
         ];
 
         let colIdx = 5;
+
         for (const fld of list.listFields) {
+
+            const indexable = this.fieldTypes[fld.type].indexable;
+
             columns.push({
                 data: colIdx,
-                title: fld.name
+                title: fld.name,
+                sortable: indexable,
+                searchable: indexable
             });
 
             colIdx += 1;
diff --git a/client/src/lists/subscriptions/helpers.js b/client/src/lists/subscriptions/helpers.js
index d3e03841..68d41a96 100644
--- a/client/src/lists/subscriptions/helpers.js
+++ b/client/src/lists/subscriptions/helpers.js
@@ -20,156 +20,163 @@ export function getSubscriptionStatusLabels(t) {
 
 export function getFieldTypes(t) {
 
-    const fieldTypes = {};
+    const groupedFieldTypes = {};
 
     const stringFieldType = long => ({
-        form: field => long ? <TextArea key={getFieldKey(field)} id={getFieldKey(field)} label={field.name}/> : <InputField key={getFieldKey(field)} id={getFieldKey(field)} label={field.name}/>,
-        assignFormData: (field, data) => {},
-        initFormData: (field, data) => {
-            data[getFieldKey(field)] = '';
+        form: groupedField => long ? <TextArea key={getFieldKey(groupedField)} id={getFieldKey(groupedField)} label={groupedField.name}/> : <InputField key={getFieldKey(groupedField)} id={getFieldKey(groupedField)} label={groupedField.name}/>,
+        assignFormData: (groupedField, data) => {},
+        initFormData: (groupedField, data) => {
+            data[getFieldKey(groupedField)] = '';
         },
-        assignEntity: (field, data) => {},
-        validate: (field, state) => {}
+        assignEntity: (groupedField, data) => {},
+        validate: (groupedField, state) => {},
+        indexable: true
     });
 
     const numberFieldType = {
-        form: field => <InputField key={getFieldKey(field)} id={getFieldKey(field)} label={field.name}/>,
-        assignFormData: (field, data) => {
-            const value = data[getFieldKey(field)];
-            data[getFieldKey(field)] = value ? value.toString() : '';
+        form: groupedField => <InputField key={getFieldKey(groupedField)} id={getFieldKey(groupedField)} label={groupedField.name}/>,
+        assignFormData: (groupedField, data) => {
+            const value = data[getFieldKey(groupedField)];
+            data[getFieldKey(groupedField)] = value ? value.toString() : '';
         },
-        initFormData: (field, data) => {
-            data[getFieldKey(field)] = '';
+        initFormData: (groupedField, data) => {
+            data[getFieldKey(groupedField)] = '';
         },
-        assignEntity: (field, data) => {
-            data[getFieldKey(field)] = parseInt(data[getFieldKey(field)]);
+        assignEntity: (groupedField, data) => {
+            data[getFieldKey(groupedField)] = parseInt(data[getFieldKey(groupedField)]);
         },
-        validate: (field, state) => {
-            const value = state.getIn([getFieldKey(field), 'value']).trim();
+        validate: (groupedField, state) => {
+            const value = state.getIn([getFieldKey(groupedField), 'value']).trim();
             if (value !== '' && isNaN(value)) {
-                state.setIn([getFieldKey(field), 'error'], t('Value must be a number'));
+                state.setIn([getFieldKey(groupedField), 'error'], t('Value must be a number'));
             } else {
-                state.setIn([getFieldKey(field), 'error'], null);
+                state.setIn([getFieldKey(groupedField), 'error'], null);
             }
-        }
+        },
+        indexable: true
     };
 
     const dateFieldType = {
-        form: field => <DatePicker key={getFieldKey(field)} id={getFieldKey(field)} label={field.name} dateFormat={field.settings.dateFormat} />,
-        assignFormData: (field, data) => {
-            const value = data[getFieldKey(field)];
-            data[getFieldKey(field)] = value ? formatDate(field.settings.dateFormat, value) : '';
+        form: groupedField => <DatePicker key={getFieldKey(groupedField)} id={getFieldKey(groupedField)} label={groupedField.name} dateFormat={groupedField.settings.dateFormat} />,
+        assignFormData: (groupedField, data) => {
+            const value = data[getFieldKey(groupedField)];
+            data[getFieldKey(groupedField)] = value ? formatDate(groupedField.settings.dateFormat, value) : '';
         },
-        initFormData: (field, data) => {
-            data[getFieldKey(field)] = '';
+        initFormData: (groupedField, data) => {
+            data[getFieldKey(groupedField)] = '';
         },
-        assignEntity: (field, data) => {
-            const date = parseDate(field.settings.dateFormat, data[getFieldKey(field)]);
-            data[getFieldKey(field)] = date;
+        assignEntity: (groupedField, data) => {
+            const date = parseDate(groupedField.settings.dateFormat, data[getFieldKey(groupedField)]);
+            data[getFieldKey(groupedField)] = date;
         },
-        validate: (field, state) => {
-            const value = state.getIn([getFieldKey(field), 'value']);
-            const date = parseDate(field.settings.dateFormat, value);
+        validate: (groupedField, state) => {
+            const value = state.getIn([getFieldKey(groupedField), 'value']);
+            const date = parseDate(groupedField.settings.dateFormat, value);
             if (value !== '' && !date) {
-                state.setIn([getFieldKey(field), 'error'], t('Date is invalid'));
+                state.setIn([getFieldKey(groupedField), 'error'], t('Date is invalid'));
             } else {
-                state.setIn([getFieldKey(field), 'error'], null);
+                state.setIn([getFieldKey(groupedField), 'error'], null);
             }
-        }
+        },
+        indexable: true
     };
 
     const birthdayFieldType = {
-        form: field => <DatePicker key={getFieldKey(field)} id={getFieldKey(field)} label={field.name} dateFormat={field.settings.dateFormat} birthday />,
-        assignFormData: (field, data) => {
-            const value = data[getFieldKey(field)];
-            data[getFieldKey(field)] = value ? formatBirthday(field.settings.dateFormat, value) : '';
+        form: groupedField => <DatePicker key={getFieldKey(groupedField)} id={getFieldKey(groupedField)} label={groupedField.name} dateFormat={groupedField.settings.dateFormat} birthday />,
+        assignFormData: (groupedField, data) => {
+            const value = data[getFieldKey(groupedField)];
+            data[getFieldKey(groupedField)] = value ? formatBirthday(groupedField.settings.dateFormat, value) : '';
         },
-        initFormData: (field, data) => {
-            data[getFieldKey(field)] = '';
+        initFormData: (groupedField, data) => {
+            data[getFieldKey(groupedField)] = '';
         },
-        assignEntity: (field, data) => {
-            const date = parseBirthday(field.settings.dateFormat, data[getFieldKey(field)]);
-            data[getFieldKey(field)] = date;
+        assignEntity: (groupedField, data) => {
+            const date = parseBirthday(groupedField.settings.dateFormat, data[getFieldKey(groupedField)]);
+            data[getFieldKey(groupedField)] = date;
         },
-        validate: (field, state) => {
-            const value = state.getIn([getFieldKey(field), 'value']);
-            const date = parseBirthday(field.settings.dateFormat, value);
+        validate: (groupedField, state) => {
+            const value = state.getIn([getFieldKey(groupedField), 'value']);
+            const date = parseBirthday(groupedField.settings.dateFormat, value);
             if (value !== '' && !date) {
-                state.setIn([getFieldKey(field), 'error'], t('Date is invalid'));
+                state.setIn([getFieldKey(groupedField), 'error'], t('Date is invalid'));
             } else {
-                state.setIn([getFieldKey(field), 'error'], null);
+                state.setIn([getFieldKey(groupedField), 'error'], null);
             }
-        }
+        },
+        indexable: true
     };
 
     const jsonFieldType = {
-        form: field => <ACEEditor key={getFieldKey(field)} id={getFieldKey(field)} label={field.name} mode="json" height="300px"/>,
-        assignFormData: (field, data) => {},
-        initFormData: (field, data) => {
-            data[getFieldKey(field)] = '';
+        form: groupedField => <ACEEditor key={getFieldKey(groupedField)} id={getFieldKey(groupedField)} label={groupedField.name} mode="json" height="300px"/>,
+        assignFormData: (groupedField, data) => {},
+        initFormData: (groupedField, data) => {
+            data[getFieldKey(groupedField)] = '';
         },
-        assignEntity: (field, data) => {},
-        validate: (field, state) => {}
+        assignEntity: (groupedField, data) => {},
+        validate: (groupedField, state) => {},
+        indexable: false
     };
 
     const enumSingleFieldType = componentType => ({
-        form: field => React.createElement(componentType, { key: getFieldKey(field), id: getFieldKey(field), label: field.name, options: field.settings.options }, null),
-        assignFormData: (field, data) => {
-            if (data[getFieldKey(field)] === null) {
-                if (field.default_value) {
-                    data[getFieldKey(field)] = field.default_value;
-                } else if (field.settings.options.length > 0) {
-                    data[getFieldKey(field)] = field.settings.options[0].key;
+        form: groupedField => React.createElement(componentType, { key: getFieldKey(groupedField), id: getFieldKey(groupedField), label: groupedField.name, options: groupedField.settings.options }, null),
+        assignFormData: (groupedField, data) => {
+            if (data[getFieldKey(groupedField)] === null) {
+                if (groupedField.default_value) {
+                    data[getFieldKey(groupedField)] = groupedField.default_value;
+                } else if (groupedField.settings.options.length > 0) {
+                    data[getFieldKey(groupedField)] = groupedField.settings.options[0].key;
                 } else {
-                    data[getFieldKey(field)] = '';
+                    data[getFieldKey(groupedField)] = '';
                 }
             }
         },
-        initFormData: (field, data) => {
-            if (field.default_value) {
-                data[getFieldKey(field)] = field.default_value;
-            } else if (field.settings.options.length > 0) {
-                data[getFieldKey(field)] = field.settings.options[0].key;
+        initFormData: (groupedField, data) => {
+            if (groupedField.default_value) {
+                data[getFieldKey(groupedField)] = groupedField.default_value;
+            } else if (groupedField.settings.options.length > 0) {
+                data[getFieldKey(groupedField)] = groupedField.settings.options[0].key;
             } else {
-                data[getFieldKey(field)] = '';
+                data[getFieldKey(groupedField)] = '';
             }
         },
-        assignEntity: (field, data) => {
+        assignEntity: (groupedField, data) => {
         },
-        validate: (field, state) => {}
+        validate: (groupedField, state) => {},
+        indexable: false
     });
 
     const enumMultipleFieldType = componentType => ({
-        form: field => React.createElement(componentType, { key: getFieldKey(field), id: getFieldKey(field), label: field.name, options: field.settings.options }, null),
-        assignFormData: (field, data) => {
-            if (data[getFieldKey(field)] === null) {
-                data[getFieldKey(field)] = [];
+        form: groupedField => React.createElement(componentType, { key: getFieldKey(groupedField), id: getFieldKey(groupedField), label: groupedField.name, options: groupedField.settings.options }, null),
+        assignFormData: (groupedField, data) => {
+            if (data[getFieldKey(groupedField)] === null) {
+                data[getFieldKey(groupedField)] = [];
             }
         },
-        initFormData: (field, data) => {
-            data[getFieldKey(field)] = [];
+        initFormData: (groupedField, data) => {
+            data[getFieldKey(groupedField)] = [];
         },
-        assignEntity: (field, data) => {},
-        validate: (field, state) => {}
+        assignEntity: (groupedField, data) => {},
+        validate: (groupedField, state) => {},
+        indexable: false
     });
 
 
-    fieldTypes.text = stringFieldType(false);
-    fieldTypes.website = stringFieldType(false);
-    fieldTypes.longtext = stringFieldType(true);
-    fieldTypes.gpg = stringFieldType(true);
-    fieldTypes.number = numberFieldType;
-    fieldTypes.date = dateFieldType;
-    fieldTypes.birthday = birthdayFieldType;
-    fieldTypes.json = jsonFieldType;
-    fieldTypes['dropdown-enum'] = enumSingleFieldType(Dropdown);
-    fieldTypes['radio-enum'] = enumSingleFieldType(RadioGroup);
+    groupedFieldTypes.text = stringFieldType(false);
+    groupedFieldTypes.website = stringFieldType(false);
+    groupedFieldTypes.longtext = stringFieldType(true);
+    groupedFieldTypes.gpg = stringFieldType(true);
+    groupedFieldTypes.number = numberFieldType;
+    groupedFieldTypes.date = dateFieldType;
+    groupedFieldTypes.birthday = birthdayFieldType;
+    groupedFieldTypes.json = jsonFieldType;
+    groupedFieldTypes['dropdown-enum'] = enumSingleFieldType(Dropdown);
+    groupedFieldTypes['radio-enum'] = enumSingleFieldType(RadioGroup);
 
-    // Here we rely on the fact the model/fields and model/subscriptions preprocess the field info and subscription
+    // Here we rely on the fact the model/groupedFields and model/subscriptions preprocess the groupedField info and subscription
     // such that the grouped entries behave the same as the enum entries
-    fieldTypes['checkbox-grouped'] = enumMultipleFieldType(CheckBoxGroup);
-    fieldTypes['radio-grouped'] = enumSingleFieldType(RadioGroup);
-    fieldTypes['dropdown-grouped'] = enumSingleFieldType(Dropdown);
+    groupedFieldTypes['checkbox-grouped'] = enumMultipleFieldType(CheckBoxGroup);
+    groupedFieldTypes['radio-grouped'] = enumSingleFieldType(RadioGroup);
+    groupedFieldTypes['dropdown-grouped'] = enumSingleFieldType(Dropdown);
 
-    return fieldTypes;
+    return groupedFieldTypes;
 }
\ No newline at end of file
diff --git a/lib/dt-helpers.js b/lib/dt-helpers.js
index a39d5dc9..ea4ead2b 100644
--- a/lib/dt-helpers.js
+++ b/lib/dt-helpers.js
@@ -67,7 +67,7 @@ async function ajaxListTx(tx, params, queryFun, columns, options) {
             query.limit(limit);
         }
 
-        query.select(columnsSelect);
+        query.select([...columnsSelect, ...options.extraColumns || [] ]);
 
         for (const order of params.order) {
             if (options.orderByBuilder) {
@@ -157,7 +157,8 @@ async function ajaxListWithPermissionsTx(tx, context, fetchSpecs, params, queryF
                 }
             },
 
-            orderByBuilder: options.orderByBuilder
+            orderByBuilder: options.orderByBuilder,
+            extraColumns: options.extraColumns
         }
     );
 }
diff --git a/models/fields.js b/models/fields.js
index b446f48c..115143f9 100644
--- a/models/fields.js
+++ b/models/fields.js
@@ -149,7 +149,7 @@ async function getById(context, listId, id) {
 }
 
 async function listTx(tx, listId) {
-    return await tx('custom_fields').where({list: listId}).select(['id', 'name', 'type', 'key', 'column', 'order_list', 'settings', 'group', 'order_subscribe', 'order_manage']).orderBy(knex.raw('-order_list'), 'desc').orderBy('id', 'asc');
+    return await tx('custom_fields').where({list: listId}).select(['id', 'name', 'type', 'key', 'column', 'settings', 'group', 'default_value', 'order_list', 'order_subscribe', 'order_manage']).orderBy(knex.raw('-order_list'), 'desc').orderBy('id', 'asc');
 }
 
 async function list(context, listId) {
@@ -160,7 +160,7 @@ async function list(context, listId) {
 }
 
 async function listGroupedTx(tx, listId) {
-    const flds = await tx('custom_fields').where({list: listId}).select(['id', 'name', 'type', 'column', 'settings', 'group', 'default_value']).orderBy(knex.raw('-order_list'), 'desc').orderBy('id', 'asc');
+    const flds = await listTx(tx, listId);
 
     const fldsById = {};
     for (const fld of flds) {
@@ -199,7 +199,7 @@ async function listGrouped(context, listId) {
 }
 
 async function listByOrderListTx(tx, listId, extraColumns = []) {
-    return await tx('custom_fields').where({list: listId}).whereNotNull('order_list').select(['name', ...extraColumns]).orderBy('order_list', 'asc');
+    return await tx('custom_fields').where({list: listId}).whereNotNull('order_list').select(['name', 'type', ...extraColumns]).orderBy('order_list', 'asc');
 }
 
 async function listDTAjax(context, listId, params) {
diff --git a/models/subscriptions.js b/models/subscriptions.js
index c9b275ff..fb0b8e97 100644
--- a/models/subscriptions.js
+++ b/models/subscriptions.js
@@ -11,9 +11,68 @@ const { SubscriptionStatus, getFieldKey } = require('../shared/lists');
 const segments = require('./segments');
 const { enforce, filterObject } = require('../lib/helpers');
 const moment = require('moment');
+const { formatDate, formatBirthday } = require('../shared/date');
 
 const allowedKeysBase = new Set(['email', 'tz', 'is_test', 'status']);
 
+const fieldTypes = {};
+
+const Cardinality = {
+    SINGLE: 0,
+    MULTIPLE: 1
+};
+
+function getOptionsMap(groupedField) {
+    const result = {};
+    for (const opt of groupedField.settings.options) {
+        result[opt.key] = opt.label;
+    }
+
+    return result;
+}
+
+fieldTypes.text = fieldTypes.website = fieldTypes.longtext = fieldTypes.gpg = fieldTypes.number = {
+    afterJSON: (groupedField, entity) => {},
+    listRender: (groupedField, value) => value
+};
+
+fieldTypes.json = {
+    afterJSON: (groupedField, entity) => {},
+    listRender: (groupedField, value) => value
+};
+
+fieldTypes['checkbox-grouped'] = {
+    afterJSON: (groupedField, entity) => {},
+    listRender: (groupedField, value) => {
+        const optMap = getOptionsMap(groupedField);
+        return value.map(x => optMap[x]).join(', ');
+    }
+};
+
+fieldTypes['radio-enum'] = fieldTypes['dropdown-enum'] = fieldTypes['radio-grouped'] = fieldTypes['dropdown-grouped'] = {
+    afterJSON: (groupedField, entity) => {},
+    listRender: (groupedField, value) => {
+        const optMap = getOptionsMap(groupedField);
+        return optMap[value];
+    }
+};
+
+fieldTypes.date = {
+    afterJSON: (groupedField, entity) => {
+        entity[getFieldKey(groupedField)] = moment(entity[getFieldKey(groupedField)]).toDate();
+    },
+    listRender: (groupedField, value) => formatDate(groupedField.settings.dateFormat, value)
+};
+
+fieldTypes.birthday = {
+    afterJSON: (groupedField, entity) => {
+        entity[getFieldKey(groupedField)] = moment(entity[getFieldKey(groupedField)]).toDate();
+    },
+    listRender: (groupedField, value) => formatBirthday(groupedField.settings.dateFormat, value)
+};
+
+
+
 function getTableName(listId) {
     return `subscription__${listId}`;
 }
@@ -149,7 +208,57 @@ async function listDTAjax(context, listId, segmentId, params) {
     return await knex.transaction(async tx => {
         await shares.enforceEntityPermissionTx(tx, context, 'list', listId, 'viewSubscriptions');
 
-        const flds = await fields.listByOrderListTx(tx, listId, ['column']);
+        // All the data transformation below is to reuse ajaxListTx and groupSubscription methods so as to keep the code DRY
+        // We first construct the columns to contain all which is supposed to be show and extraColumns which contain
+        // everything else that constitutes the subscription.
+        // Then in ajaxList's mapFunc, we construct the entity from the fields ajaxList retrieved and pass it to groupSubscription
+        // to group the fields. Then we copy relevant values form grouped subscription to ajaxList's data which then get
+        // returned to the client. During the copy, we also render the values.
+
+        const groupedFieldsMap = await getGroupedFieldsMap(tx, listId);
+        const listFlds = await fields.listByOrderListTx(tx, listId, ['column', 'id']);
+
+        const columns = ['id', 'cid', 'email', 'status', 'created'];
+        const extraColumns = [];
+        let listFldIdx = columns.length;
+        const idxMap = {};
+
+        for (const listFld of listFlds) {
+            const fldKey = getFieldKey(listFld);
+            const fld = groupedFieldsMap[fldKey];
+
+            if (fld.column) {
+                columns.push(fld.column);
+            } else {
+                columns.push({
+                    name: fldKey,
+                    raw: 0
+                })
+            }
+
+            idxMap[fldKey] = listFldIdx;
+            listFldIdx += 1;
+        }
+
+        for (const fldKey in groupedFieldsMap) {
+            const fld = groupedFieldsMap[fldKey];
+
+            if (fld.column) {
+                if (!(fldKey in idxMap)) {
+                    extraColumns.push(fld.column);
+                    idxMap[fldKey] = listFldIdx;
+                    listFldIdx += 1;
+                }
+
+            } else {
+                for (const optionColumn in fld.groupedOptions) {
+                    extraColumns.push(optionColumn);
+                    idxMap[optionColumn] = listFldIdx;
+                    listFldIdx += 1;
+                }
+            }
+        }
+
         const addSegmentQuery = segmentId ? await segments.getQueryGeneratorTx(tx, listId, segmentId) : () => {};
 
         return await dtHelpers.ajaxListTx(
@@ -162,8 +271,28 @@ async function listDTAjax(context, listId, segmentId, params) {
                 });
                 return query;
             },
-            ['id', 'cid', 'email', 'status', 'created', ...flds.map(fld => fld.column)]
-            // FIXME - adapt data in custom columns to render them properly
+            columns,
+            {
+                mapFun: data => {
+                    const entity = {};
+                    for (const fldKey in idxMap) {
+                        // This is a bit of hacking. We rely on the fact that if a field has a column, then the column is the field key.
+                        // Then it has the group id with value 0. groupSubscription will be able to process the fields that have a column
+                        // and it will assign values to the fields that don't have a value (i.e. those that currently have the group id and value 0).
+                        entity[fldKey] = data[idxMap[fldKey]];
+                    }
+
+                    groupSubscription(groupedFieldsMap, entity);
+
+                    for (const listFld of listFlds) {
+                        const fldKey = getFieldKey(listFld);
+                        const fld = groupedFieldsMap[fldKey];
+                        data[idxMap[fldKey]] = fieldTypes[fld.type].listRender(fld, entity[fldKey]);
+                    }
+                },
+
+                extraColumns
+            }
         );
     });
 }
@@ -223,9 +352,8 @@ async function _validateAndPreprocess(tx, listId, groupedFieldsMap, entity, isCr
 
     for (const key in groupedFieldsMap) {
         const fld = groupedFieldsMap[key];
-        if (fld.type === 'date' || fld.type === 'birthday') {
-            entity[getFieldKey(fld)] = moment(entity[getFieldKey(fld)]).toDate();
-        }
+
+        fieldTypes[fld.type].afterJSON(fld, entity);
     }
 }