Add the code to initialize a Grid component which will connect to Firestore and read data from it. In the end of the tag in your page body, add this jQuery closure and code:

// initialize the ShieldUI Grid widget
jQuery(function($) {
    $("#grid").shieldGrid({
        dataSource: {
            remote: {
                read: function(params, success, error) {
                    // read the items in the users Firestore collection
                    // https://firebase.google.com/docs/firestore/quickstart#read_data
                    db.collection("users").get().then(function(querySnapshot) {
                        var items = [];

                        // collect all data items returned from the database
                        querySnapshot.forEach(function(doc) {
                            var data = doc.data();
                            data.id = doc.id;
                            items.push(data);
                        });

                        // pass the data to the Grid by calling the success callback
                        success(items);
                    });
                },
                modify: {
                    create: function(items, success, error) {
                        // TODO
                    },
                    update: function(items, success, error) {
                        // TODO

                    },
                    remove: function(items, success, error) {
                        // TODO
                    }
                },
                schema: {
                    fields: {
                        id: { path: "id", type: String },
                        firstName: { path: "firstName", type: String },
                        middleName: { path: "middleName", type: String },
                        lastName: { path: "lastName", type: String },
                        company: { path: "company", type: String },
                        department: { path: "department", type: String }
                    }
                }
            },
            sorting: true,
            rowHover: false,
            editing: {
                enabled: true,
                type: "row"
            },
            columns: [
                { field: "firstName", title: "First Name" },
                { field: "middleName", title: "Middle Name" },
                { field: "lastName", title: "Last Name" },
                { field: "company", title: "Company" },
                { field: "department", title: "Department" },
                {
                    width: 160,
                    title: " ",
                    buttons: [
                        { commandName: "edit", caption: "Edit" },
                        { commandName: "delete", caption: "Delete" }
                    ]
                }
            ],
            toolbar: [
                {
                    buttons: [
                        { commandName: "insert", caption: "Add User" }
                    ],
                    position: "top"
                }
            ]
        }
    });
});

Make sure you do not miss any closing parenthesis/braces and keep the nesting of the JavaScript properties intact. Refreshing the page (with Ctrl + F5) at this point should result in something like this:

Adding an entry to the users collection in the Firebase console and refreshing the page, should refresh the table and cause all new entries to be shown.

Now let’s add the code that will allow creating new entries. The Shield UI Grid widget will do all the rendering of inputs, optional validation and etc, and will finally pass the data to the handler function specified in the dataSource.remote.modify.create property. The only thing you need to do is take the newly added objects and pass them to your data source – in this case, a remote Firebase data store. Add the following code in the body of the create callback:

// only one item is created in non-batch mode, so get it
var newItem = items[0].data;

// construct a new entry to add to Firebase, containing only non-empty keys
var entry = {};
$.each(["firstName", "middleName", "lastName", "company", "department"], function(i, key) {
    if (newItem[key]) {
        entry[key] = newItem[key];
    }
});

// add the entry to the users Firebase collection
// https://firebase.google.com/docs/firestore/quickstart#add_data
db.collection("users").add(entry)
    .then(function(docRef) {
        // save the newly created document's id to the Grid item
        newItem.id = docRef.id;
        success();
    })
    .catch(error);

The above code will take the data of the first (and only) newly created item, filter all non-empty properties (making sure no empty keys are sent to Firestore) and will add it as a new document to the users collection. Right after the new document is added, the Firebase API will execute the callback in the then() function (see JavaScript promise objects for more details about this pattern), in which we save the returned id back to the item object (so we can reference it later when updating/deleting it).

Try to test the create functionality by clicking the Add User button on top of the Grid and see if the new document will appear in the Firebase Console.

III. Additional Features

In order to practice the acquired knowledge, you can try to implement the following tasks:

Task 1. Implement the delete functionality by adding the code in the dataSource.remote.modify.remove callback. The id of the item being deleted can be accessed through items[0].data.id, and the call you will need to make to Firebase is described here.

Task 2. Implement the update functionality by completing the dataSource.remote.modify.update callback. The information about the updated object can be accessed via items[0].data and before sending it to Firestore, you need to exclude empty keys (check the implementation of the create method above). To update an existing Firestore document, use this API.