Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Griddle columnMetaData not being used #845

Open
owen13 opened this issue Jan 2, 2019 · 0 comments
Open

Griddle columnMetaData not being used #845

owen13 opened this issue Jan 2, 2019 · 0 comments

Comments

@owen13
Copy link

owen13 commented Jan 2, 2019 •
edited
Loading

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
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@owen13