Salesforce Lightning Component showing usage if datatable component

DemoApp.app.xml

<aura:application extends="force:slds">
    <c:PersonDemo />
</aura:application>	

PersonDemo.cmp.xml

<aura:component>
    <aura:attribute name="personObj" type="Object" />
    <aura:attribute name="personList" type="Object[]" />
    <aura:attribute name="columns" type="Object" />
    <aura:handler name="init" value="{!this}" action="{!c.init}"/> 
    <div class="slds-grid slds-gutters slds-p-top_xx-large">
            <div class="slds-col">  </div>
            <div class="slds-col">
                    <div class="slds-box">
                        <lightning:input name="inFirstName" label="First Name" value="{!v.personObj.firstName}" />
                        <lightning:input name="inLastName" label="Last Name" value="{!v.personObj.lastName}" />
                        <lightning:input name="inAge" label="Age" value="{!v.personObj.age}" />
                        <lightning:input name="inEyeColor" label="Eye Color" value="{!v.personObj.eyeColor}" /> 
                        
                        <br />
                        <p>
                        <lightning:button  variant="brand" label="Add" title="Add Person" onclick="{! c.addPerson }" />
                        </p>
                    </div>
            </div>
            <div class="slds-col"> </div> 
    </div>
    <div class="slds-box">
            <lightning:datatable
            keyField="firstName"
            data="{! v.personList }"
            columns="{! v.columns }"
            hideCheckboxColumn="true"/>
  </div>      
</aura:component>	

PersonDemoController.js

({
    addPerson : function(component, event, helper) {
        helper.addPerson(component, event, helper);
    },
    init : function(component, event, helper) {
        helper.init(component, event, helper);
    },
})

PersonDemoHelper.js

({
    addPerson : function(component, event, helper) {
        var personData = component.get("v.personObj");
        var personList = component.get("v.personList");

        var person = {
            firstName : personData.firstName,
            lastName : personData.lastName,
            age : personData.age,
            eyeColor : personData.eyeColor
        };

        personList.push(person) ;
        component.set("v.personList",personList);
        component.set("v.personObj",{});

    },
    init : function(component, event, helper) {
        component.set("v.personObj",{});

        component.set("v.columns",[
            {label : 'First Name',fieldName : 'firstName', type : "text",sortable:"false"},
            {label : 'Last Name',fieldName : 'lastName', type : "text",sortable:"false"},
            {label : 'Age',fieldName : 'age', type : "text",sortable:"false"},
            {label : 'Eye Color',fieldName : 'eyeColor', type : "text",sortable:"false"}
        ]);

    }
})