get field mapping to actually work

packages/grafana-ui/src/components/Table/Table.tsx

@@ -15,6 +15,7 @@ import { sortTableData } from '../../utils/processTimeSeries';
 
 import { TableData, InterpolateFunction } from '@grafana/ui';
 import { TableCellBuilder, ColumnStyle, getCellBuilder, TableCellBuilderOptions } from './TableCellBuilder';
+import { stringToJsRegex } from '../../utils/index';
 
 interface ColumnInfo {
   index: number;
@@ -90,6 +91,8 @@ export class Table extends Component<Props, State> {
 
   initColumns(props: Props): ColumnInfo[] {
     const { styles, data } = props;
+    console.log('STYLES', styles);
+
     return data.columns.map((col, index) => {
       let title = col.text;
       let style: ColumnStyle | null = null; // ColumnStyle
@@ -97,7 +100,7 @@ export class Table extends Component<Props, State> {
       // Find the style based on the text
       for (let i = 0; i < styles.length; i++) {
         const s = styles[i];
-        const regex = 'XXX'; //kbn.stringToJsRegex(s.pattern);
+        const regex = stringToJsRegex(s.pattern);
         if (title.match(regex)) {
           style = s;
           if (s.alias) {
@@ -170,14 +173,22 @@ export class Table extends Component<Props, State> {
     const { rowIndex, columnIndex, key, parent } = props;
     const { showHeader } = this.props;
     const { data } = this.state;
+
     const column = this.columns[columnIndex];
     if (!column) {
-      return <div>XXX</div>; // NOT SURE HOW/WHY THIS HAPPENS!
+      // NOT SURE HOW/WHY THIS HAPPENS!
+      // Without it it will crash in storybook when you cycle up/down the # of columns
+      // this cell is never visible in the output?
+      return (
+        <div key={key} style={props.style}>
+          XXXXX
+        </div>
+      );
     }
 
     const realRowIndex = rowIndex - (showHeader ? 1 : 0);
     const isHeader = realRowIndex < 0;
-    const row = isHeader ? (data.columns as any[]) : data.rows[realRowIndex];
+    const row = isHeader ? data.columns : data.rows[realRowIndex];
     const value = row[columnIndex];
     const builder = isHeader ? this.headerBuilder : column.builder;
 

packages/grafana-ui/src/components/Table/TableCellBuilder.tsx

@@ -41,12 +41,9 @@ export const simpleCellBuilder: TableCellBuilder = (cell: TableCellBuilderOption
 //
 // ***************************************************************************
 
-// APP Imports!!!
-// import kbn from 'app/core/utils/kbn';
-
 // Made to match the existing (untyped) settings in the angular table
 export interface ColumnStyle {
-  pattern?: string;
+  pattern: string;
 
   alias?: string;
   colorMode?: 'cell' | 'value';
@@ -89,6 +86,8 @@ export function getCellBuilder(schema: Column, style: ColumnStyle | null, props:
   }
 
   if (style.type === 'date') {
+    console.log('MAKE DATE Column', schema, style);
+
     return new CellBuilderWithStyle(
       (v: any) => {
         if (v === undefined || v === null) {

packages/grafana-ui/src/utils/index.ts

@@ -2,4 +2,5 @@ export * from './processTimeSeries';
 export * from './valueFormats/valueFormats';
 export * from './colors';
 export * from './namedColorsPalette';
+export * from './stringUtils';
 export { getMappedValue } from './valueMappings';

packages/grafana-ui/src/utils/stringUtils.ts

@@ -0,0 +1,13 @@
+export function stringToJsRegex(str: string): RegExp {
+  if (str[0] !== '/') {
+    return new RegExp('^' + str + '$');
+  }
+
+  const match = str.match(new RegExp('^/(.*?)/(g?i?m?y?)$'));
+
+  if (!match) {
+    throw new Error(`'${str}' is not a valid regular expression.`);
+  }
+
+  return new RegExp(match[1], match[2]);
+}

public/app/core/utils/kbn.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { getValueFormat, getValueFormatterIndex, getValueFormats } from '@grafana/ui';
+import { getValueFormat, getValueFormatterIndex, getValueFormats, stringToJsRegex } from '@grafana/ui';
 
 const kbn: any = {};
 
@@ -229,17 +229,8 @@ kbn.slugifyForUrl = str => {
 };
 
 kbn.stringToJsRegex = str => {
-  if (str[0] !== '/') {
-    return new RegExp('^' + str + '$');
-  }
-
-  const match = str.match(new RegExp('^/(.*?)/(g?i?m?y?)$'));
-
-  if (!match) {
-    throw new Error(`'${str}' is not a valid regular expression.`);
-  }
-
-  return new RegExp(match[1], match[2]);
+  console.warn('Use grafana/ui stringToJsRegex');
+  return stringToJsRegex(str);
 };
 
 kbn.toFixed = (value, decimals) => {