Griddle columnMetaData not being used

Griddle version

"griddle-react": "^1.13.1",

Expected Behavior

Display columns in order: kids, age, name Display column headings in uppercase

Actual Behavior

name, age, kids

Steps to reproduce

download GriddleDoesntReadColumnMetaData.zip https://1drv.ms/u/s!AtVJlbPuO_HMm9ZxllaGWLPl0YeBVQ npm install npm run build npx http-server localhost:8080

App.js

import React from "react";
import TestComponent from './TestComponent.js';

export default class App extends React.Component {
    constructor() {
        super();
        this.test = React.createRef();
        this.state = {
            baseUrl: '',
            data: [],
            filteredData: []
        }
    }

    componentDidMount() {
        setTimeout(() => {
        },10)
    }

    render() {
        return (
            <React.Fragment>
                <TestComponent />
            </React.Fragment>
        );
    }
}

// =================================================== index.html

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div id="app"></div>
    <script type='text/javascript' src='/dist/index.bundle.js'></script>
</body>
</html>

// =================================================== index.js

import React from 'react';
import { render } from 'react-dom'

import App from './App';

render(<App />, document.getElementById("app"));

// =================================================== package.json

{ "scripts": { "build": "webpack --config webpack.config.js", "watch": "npm-watch" }, "devDependencies": { "babel": "^6.23.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "webpack": "^4.27.1", "webpack-cli": "^3.1.2", "npm-watch": "^0.5.0" }, "dependencies": { "axios": "^0.18.0", "griddle-react": "^1.13.1", "highcharts": "^7.0.1", "highcharts-react-official": "^2.0.0", "react": "^16.6.3", "react-dom": "^16.6.3" } }

// =================================================== TestComponent.js

import React from "react";
import Griddle from "griddle-react";

const GriddleTest = () => {
    const fakeData = [
      { name: "Dave", age: 26, kids: 2 },
      { name: "Joe", age: 31, kids: 0 },
      { name: "Mary", age: 47, kids: 3 },
    ];

    const fakeMetaData = [
      { columnName: "age", order: 2, displayName: "AGE" },
      { columnName: "name", order: 3, displayName: "NAME" },
      { columnName: "kids", order: 1, displayName: "KIDS" },
    ];

    return (
        <Griddle data={fakeData} results={fakeData} columnMetadata={fakeMetaData} columns={["age", "name", "kids"]} />
    );
};

export default GriddleTest;

// =================================================== webpack.config.js

"use strict";

var path = require("path");

var config = {
    mode: "development",
    devtool: 'cheap-module-source-map',
    module: {
        rules: [
            {
                test: [/\.js$/, /\.jsx/],
                loader: "babel-loader",
                exclude: /node_modules/,
                query: {
                    presets: ["es2015", "react"]
                }
            }
        ]
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2,
                    minSize: 0
                }
            }
        },
        occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
    }
};

var appConfig = Object.assign({}, config, {
    name: "app",
    entry: {
        index: "./index"
    },
    output: {
        path: path.resolve('./dist'),
        filename: '[name].bundle.js'
    },
});

module.exports = [
    appConfig
]

GriddleGriddle / Griddle