table-columns.json

[
    {
        "metadataKey": {
            "type": "Person",
            "fieldName": "firstName",
            "displayName": "First Name"
        }
    },
    {
        "metadataKey": {
            "type": "Person",
            "fieldName": "middleName",
            "displayName": "Middle Name"
        }
    },
    {
        "metadataKey": {
            "type": "Person",
            "fieldName": "lastName",
            "displayName": "Last Name"
        }
    },
    {
        "metadataKey": {
            "type": "Person",
            "fieldName": "age",
            "displayName": "Age"
        }
    },
    {
        "metadataKey": {
            "type": "Person",
            "fieldName": "gender",
            "displayName": "Gender"
        }
    }

]

table-rows.json

[

    {
        "id": "1",
        "properties": [
            {
                "type": "Person",
                "fieldName": "firstName",
                "value": "Jason"
            },
            {
                "type": "Person",
                "fieldName": "middleName",
                "value": "J"
            },
            {
                "type": "Person",
                "fieldName": "lastName",
                "value": "Right"
            },
            {
                "type": "Person",
                "fieldName": "age",
                "value": "35"
            },
            {
                "type": "Person",
                "fieldName": "gender",
                "value": "Male"
            }
        ]
    },
    {
        "id": "2",
        "properties": [
            {
                "type": "Person",
                "fieldName": "firstName",
                "value": "John"
            },
            {
                "type": "Person",
                "fieldName": "middleName",
                "value": "L"
            },
            {
                "type": "Person",
                "fieldName": "lastName",
                "value": "Smith"
            },
            {
                "type": "Person",
                "fieldName": "age",
                "value": "20"
            },
            {
                "type": "Person",
                "fieldName": "gender",
                "value": "Male"
            }
        ]
    },
    {
        "id": "3",
        "properties": [
            {
                "type": "Person",
                "fieldName": "firstName",
                "value": "Jane"
            },
            {
                "type": "Person",
                "fieldName": "middleName",
                "value": "H"
            },
            {
                "type": "Person",
                "fieldName": "lastName",
                "value": "Doe"
            },
            {
                "type": "Person",
                "fieldName": "age",
                "value": "55"
            },
            {
                "type": "Person",
                "fieldName": "gender",
                "value": "Female"
            }
        ]
    },
    {
        "id": "4",
        "properties": [
            {
                "type": "Person",
                "fieldName": "firstName",
                "value": "Kent"
            },
            {
                "type": "Person",
                "fieldName": "middleName",
                "value": "J"
            },
            {
                "type": "Person",
                "fieldName": "lastName",
                "value": "Fiddle"
            },
            {
                "type": "Person",
                "fieldName": "age",
                "value": "45"
            },
            {
                "type": "Person",
                "fieldName": "gender",
                "value": "Male"
            }
        ]
    },
    {
        "id": "5",
        "properties": [
            {
                "type": "Person",
                "fieldName": "firstName",
                "value": "Kelly"
            },
            {
                "type": "Person",
                "fieldName": "middleName",
                "value": "R"
            },
            {
                "type": "Person",
                "fieldName": "lastName",
                "value": "Nice"
            },
            {
                "type": "Person",
                "fieldName": "age",
                "value": "22"
            },
            {
                "type": "Person",
                "fieldName": "gender",
                "value": "Female"
            }
        ]
    },
    {
        "id": "6",
        "properties": [
            {
                "type": "Person",
                "fieldName": "firstName",
                "value": "Fred"
            },
            {
                "type": "Person",
                "fieldName": "middleName",
                "value": "J"
            },
            {
                "type": "Person",
                "fieldName": "lastName",
                "value": "Smith"
            },
            {
                "type": "Person",
                "fieldName": "age",
                "value": "35"
            },
            {
                "type": "Person",
                "fieldName": "gender",
                "value": "Male"
            }
        ]
    }
]

vaadin-demo.html

<!doctype html>
<html>

<head>

    <!-- required -->
    <script src="../../../webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="../../../polymer/polymer.html">


    <link rel="import" href="../../../iron-flex-layout/classes/iron-flex-layout.html">
    <link rel="import" href="../../../paper-toolbar/paper-toolbar.html">
    <link rel="import" href="../../../paper-button/paper-button.html">

    <link rel="import" href="vaadin-grid-dialog.html">


    <title>Vaadin grid Demo</title>
</head>

<body unresolved>
    <template id="template" is="dom-bind">
        <div class="layout vertical">
            <paper-toolbar>
                <paper-button id="showVaadinGridButton" toolbar>SHOW GRID</paper-button>
            </paper-toolbar>
            <vaadin-grid-dialog id="grid">
            </vaadin-grid-dialog>
        </div>
    </template>
    <script>
        var template = document.querySelector("#template");

        template.addEventListener("dom-change", function () {

            var grid = document.querySelector("#grid");

            var showButton = document.querySelector("#showVaadinGridButton");
            showButton.addEventListener("click", function (e) {
                grid.show();
            });

        });
    </script>

</body>

</html>

vaadin-grid-dialog.html

<link rel="import" href="../../../polymer/polymer.html">

<!--polymer elements-->
<link rel="import" href="../../../iron-ajax/iron-ajax.html">
<link rel="import" href="../../../paper-dialog/paper-dialog.html">

<!--vaadin element-->
<link rel="import" href="../../../vaadin-grid/vaadin-grid.html">
<link rel="import" href="../../../neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../../../neon-animation/animations/fade-out-animation.html">


<!--
Example of Vaadin Grid in paper-dialog, dynamically creating headers

-->
<dom-module id="vaadin-grid-dialog">
    <style>
        #gridDialog {
            width: 800px;
            height: 600px;
        }
        
        #grid {
            width: 100%;
            height: 100%;
        }
    </style>
    <template>
        <!-- 
                The paper-dialog with default entry-animation works with vaadin grid, as in line below
    
                <paper-dialog id="gridDialog" exit-animation="fade-out-animation">

                however if you specify the entry-animation to be scale-up as in the current example the row sizes
                are calculated correctly but the TDs within the row are not and become bunched
        -->
        <paper-dialog id="gridDialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation">

            <vaadin-grid id="grid" class="fillall">
                <table id="table" class="fillall">
                    <thead id="columnHeaders">
                    </thead>
                    <tbody id="gridRows">
                    </tbody>
                </table>
            </vaadin-grid>
        </paper-dialog>
        <iron-ajax id="columnsAjax" url="table-columns.json" handle-as="json" on-response="_handleColumnsResponse"></iron-ajax>
        <iron-ajax id="rowsAjax" url="table-rows.json" handle-as="json" on-response="_handleRowsResponse"></iron-ajax>
    </template>

    <script>
        Polymer({
            is: 'vaadin-grid-dialog',

            /********************************
             * Listeners
             ********************************/
            listeners: {
                'gridDialog.neon-animation-finish': '_handleDialogAnimationFinish'
            },

            /********************************
             * Behaviors
             ********************************/
            //define behaviors here
            behaviors: [],

            /********************************
             * Properties
             ********************************/
            properties: {

                columns: {
                    type: Array,
                    value: function () {
                        return null;
                    }
                },

                rows: {
                    type: Array,
                    value: function () {
                        return null;
                    }
                },

                data: {
                    type: Array,
                    value: function () {
                        return [];
                    }
                }
            },

            /********************************
             * Public API Methods
             ********************************/

            show: function () {
                this.$.gridDialog.open();
            },

            /********************************
             * Private Helper Methods
             ********************************/

            _buildTableModel: function (columns) {

                this.columns = columns;

                //add hidden id column
                this.$.grid.addColumn({
                    headerContent: "id",
                    name: "id",
                });
                this.$.grid.columns[0].hidden = true;

                for (var i = 0; i < columns.length; i++) {
                    var columnDef = columns[i];

                    //add field column
                    this.$.grid.addColumn({
                        headerContent: columnDef.metadataKey.displayName,
                        name: columnDef.metadataKey.fieldName,
                        sortable: true
                    });

                }
            },

            _loadTableData: function (rows) {
                this._clear();

                if (rows != null && rows.length > 0) {
                    for (var i = 0; i < rows.length; i++) {
                        var row = rows[i];
                        var rowData = new Array();
                        rowData.push(row.id);
                        for (var j = 0; j < row.properties.length; j++) {
                            rowData.push(row.properties[j].value);
                        }

                        this.data.push(rowData);
                    }

                    this.$.grid.items = this.data;

                } else {
                    //no data to show
                }
            },

            _clear: function () {
                this.data = [];
            },

            _getColumns: function () {
                this.$.columnsAjax.generateRequest();
            },

            _getRows: function (data) {
                this.$.rowsAjax.generateRequest();
            },

            _handleColumnsResponse: function (e) {
                var columns = e.detail.response;
                this._buildTableModel(columns);
                this._getRows();
            },

            _handleRowsResponse: function (e) {
                var rows = e.detail.response;
                this._loadTableData(rows);
            },

            _handleDialogAnimationFinish: function () {
                if (this.$.gridDialog.opened) {
                    if (this.columns == null) {
                        this._getColumns();
                    } else {
                        this._getRows();
                    }
                }
            }

        });
    </script>
</dom-module>