feat: footerElement

CHANGELOG.md

@@ -1,4 +1,4 @@
-## [0.7.8] - 2018-11-20
+## [0.7.9] - 2018-11-20
 
 ### Added
 - MultiValueFormatter

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;
 };

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,

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();

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",

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
 }

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>

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>
     );