Allow html in formatter

aivy0011 · Aug 16, 2017 · 4f0c1fe · 4f0c1fe
1 parent 01c938c
commit 4f0c1fe
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/__tests__/components/table-component/TableComponent.test.js b/__tests__/components/table-component/TableComponent.test.js
@@ -57,7 +57,7 @@ describe('TableComponent', () => {
         await createVm({
             methods: {
                 formatter(value, properties) {
-                    return `Formatted: ${value}`;
+                    return `Formatted: <strong>${value}</strong>`;
                 },
             },
         });

diff --git a/__tests__/components/table-component/__snapshots__/TableComponent.test.js.snap b/__tests__/components/table-component/__snapshots__/TableComponent.test.js.snap
@@ -33,12 +33,18 @@ exports[`TableComponent accepts a function to format values 1`] = `
         <tbody>
           <tr>
             <td>
-              Formatted: John
+              Formatted:
+              <strong>
+                John
+              </strong>
             </td>
           </tr>
           <tr>
             <td>
-              Formatted: Paul
+              Formatted:
+              <strong>
+                Paul
+              </strong>
             </td>
           </tr>
         </tbody>

diff --git a/src/components/TableCell.js b/src/components/TableCell.js
@@ -4,10 +4,19 @@ export default {
     props: ['column', 'row'],
 
     render(createElement, { props }) {
-        const contents = props.column.template
-            ? props.column.template(props.row.data)
-            : props.column.formatter(props.row.getValue(props.column.show));
+        const data = {};
 
-        return createElement('td', props.column.cellClass ? { class: props.column.cellClass } : {}, contents);
+        if (props.column.cellClass) {
+            data.class = props.column.cellClass;
+        }
+
+        if (props.column.template) {
+            return createElement('td', data, props.column.template(props.row.data));
+        }
+
+        data.domProps = {};
+        data.domProps.innerHTML = props.column.formatter(props.row.getValue(props.column.show));
+
+        return createElement('td', data);
     },
 };