diff --git a/CHANGELOG.md b/CHANGELOG.md
index d33a804..d22f25a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,4 @@
-## [0.7.8] - 2018-11-20
+## [0.7.9] - 2018-11-20
 
 ### Added
 - MultiValueFormatter
diff --git a/lib/ConfigUtils.js b/lib/ConfigUtils.js
index b9c179f..3d35a2b 100644
--- a/lib/ConfigUtils.js
+++ b/lib/ConfigUtils.js
@@ -1,5 +1,6 @@
 "use strict";
 exports.__esModule = true;
+var server_1 = require("react-dom/server");
 // .prettierignore    (to keep relevant props together)
 var NOOPS = function () { };
 // get callbacks from props (default: NOOP) & set them to Tabulator options
@@ -31,5 +32,9 @@ exports.propsToOptions = function (props) {
         var callbackName = names_1[_a];
         output[callbackName] = props[callbackName] || NOOPS;
     }
+    if (typeof props['footerElement'] === 'object') {
+        // convert from JSX to HTML string (tabulator's footerElement accepts string)
+        output['footerElement'] = server_1.renderToString(props['footerElement']);
+    }
     return output;
 };
diff --git a/lib/ReactTabulatorExample.js b/lib/ReactTabulatorExample.js
index ce514fa..f71939c 100644
--- a/lib/ReactTabulatorExample.js
+++ b/lib/ReactTabulatorExample.js
@@ -105,7 +105,7 @@ var default_1 = /** @class */ (function (_super) {
                 React.createElement("button", { onClick: this.clearData }, "Clear")),
             React.createElement(ReactTabulator_1["default"], { columns: columns, data: this.state.data }),
             React.createElement("h3", null, "Editable Table"),
-            React.createElement(ReactTabulator_1["default"], { columns: editableColumns, data: data, cellEdited: function (cell) { return console.log('cellEdited', cell); }, dataEdited: function (newData) { return console.log('dataEdited', newData); } }),
+            React.createElement(ReactTabulator_1["default"], { columns: editableColumns, data: data, cellEdited: function (cell) { return console.log('cellEdited', cell); }, dataEdited: function (newData) { return console.log('dataEdited', newData); }, footerElement: React.createElement("span", null, "Footer") }),
             React.createElement("p", null,
                 React.createElement("a", { href: "https://github.com/ngduc/react-tabulator", target: "_blank" }, "Back to: Github Repo: react-tabulator")),
             React.createElement("p", null,
diff --git a/lib/formatters/MultiValueFormatter.js b/lib/formatters/MultiValueFormatter.js
index a2ce26d..9eed6a8 100644
--- a/lib/formatters/MultiValueFormatter.js
+++ b/lib/formatters/MultiValueFormatter.js
@@ -17,7 +17,7 @@ function default_1(cell, formatterParams, onRendered) {
     if (style === 'PILL') {
         // TODO: use React.Fragment here to remove unnecessary div. (but will break React 15 example in Codesandbox)
         content = (React.createElement("div", null, arr.map(function (item) {
-            return typeof item === 'string' ? React.createElement("span", null, item) : React.createElement("span", null, item.name);
+            return typeof item === 'string' ? React.createElement("span", { key: item }, item) : React.createElement("span", { key: item.name }, item.name);
         })));
     }
     var el = createCellEl();
diff --git a/package.json b/package.json
index 6d1a87f..936625e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-tabulator",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "description": "React Tabulator component",
   "main": "lib/index.js",
   "module": "es/index.js",
diff --git a/src/ConfigUtils.tsx b/src/ConfigUtils.tsx
index 133ba60..b72db03 100644
--- a/src/ConfigUtils.tsx
+++ b/src/ConfigUtils.tsx
@@ -1,3 +1,5 @@
+import { renderToString } from 'react-dom/server';
+
 // .prettierignore    (to keep relevant props together)
 const NOOPS = () => {};
 
@@ -19,7 +21,7 @@ export interface IProps {
 	tooltipGenerationMode?: string, // when to generate tooltips - default: 'load'
 	initialSort?: boolean, // initial sorting criteria - default: false
 	initialFilter?: boolean, // initial filtering criteria - default: false
-	footerElement?: boolean, // hold footer element - default: false
+	footerElement?: any, // hold footer element - default: false
 	index?: string, // filed for row index - default: 'id'
 	keybindings?:[], // array for keybindings - default: []
 	clipboard?: boolean, // enable clipboard - default: false
@@ -138,5 +140,9 @@ export const propsToOptions = (props: any) => {
   for (const callbackName of names) {
     output[callbackName] = props[callbackName] || NOOPS
   }
+  if (typeof props['footerElement'] === 'object') {
+    // convert from JSX to HTML string (tabulator's footerElement accepts string)
+    output['footerElement'] = renderToString(props['footerElement'])
+  }
   return output
 }
\ No newline at end of file
diff --git a/src/ReactTabulatorExample.tsx b/src/ReactTabulatorExample.tsx
index bc7fd98..59158f5 100644
--- a/src/ReactTabulatorExample.tsx
+++ b/src/ReactTabulatorExample.tsx
@@ -109,6 +109,7 @@ export default class extends React.Component<IProps> {
           data={data}
           cellEdited={(cell: any) => console.log('cellEdited', cell)}
           dataEdited={(newData: any) => console.log('dataEdited', newData)}
+          footerElement={<span>Footer</span>}
         />
 
         <p>
diff --git a/src/formatters/MultiValueFormatter.tsx b/src/formatters/MultiValueFormatter.tsx
index ff9e00c..f915868 100644
--- a/src/formatters/MultiValueFormatter.tsx
+++ b/src/formatters/MultiValueFormatter.tsx
@@ -21,7 +21,7 @@ export default function(cell: any, formatterParams: any, onRendered: (fn: any) =
     content = (
       <div>
         {arr.map((item: any) => {
-          return typeof item === 'string' ? <span>{item}</span> : <span>{item.name}</span>;
+          return typeof item === 'string' ? <span key={item}>{item}</span> : <span key={item.name}>{item.name}</span>;
         })}
       </div>
     );