Fix issue with data table render

Author: Corey Robertson

x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx

@@ -6,23 +6,30 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
-import { Datatable } from '../../public/components/datatable';
-import { Return as Arguments } from '../functions/common/table';
+import { Datatable as DatatableComponent } from '../../public/components/datatable';
 import { RendererStrings } from '../../i18n';
-import { RendererFactory } from '../../types';
+import { RendererFactory, Style, Datatable } from '../../types';
 
 const { dropdownFilter: strings } = RendererStrings;
 
-export const table: RendererFactory<Arguments> = () => ({
+interface TableArguments {
+  font?: Style;
+  paginate: boolean;
+  perPage: number;
+  showHeader: boolean;
+  datatable: Datatable;
+}
+
+export const table: RendererFactory<TableArguments> = () => ({
   name: 'table',
   displayName: strings.getDisplayName(),
   help: strings.getHelpDescription(),
   reuseDomNode: true,
   render(domNode, config, handlers) {
-    const { datatable, paginate, perPage, font, showHeader } = config;
+    const { datatable, paginate, perPage, font = { spec: {} }, showHeader } = config;
     ReactDOM.render(
       <div style={{ ...(font.spec as React.CSSProperties), height: '100%' }}>
-        <Datatable
+        <DatatableComponent
           datatable={datatable}
           perPage={perPage}
           paginate={paginate}