Reply To: Vue Data Grid — getting “[object][Object]” in a column

[TomAcx]

Thanks for the quick response!

I think this is what you need?

(Side issue:  Note that many of my data fields have names like Teams--Agent-hiring-3-week when I would prefer Teams: Agent hiring 3 week but the examples don’t show how to handle colons and spaces in these names.  If there’s a way, I’d like to use it.)

<div>
<div>  mounted: function () {</div>
<div></div>
<div>    let partnerData = this.getPartnerData()</div>
<div>    window.Smart(</div>
<div>      “#grid”, class {</div>
<div>      get properties() {</div>
<div>        return {</div>
<div>          columns: [</div>
<div>            { label: ‘Company Name’, dataField: ‘Company–Name’, freeze: true },</div>
<div>            { label: ‘Partner Code’, dataField: ‘Company–Partner code’, columnGroup: ‘company’ },</div>
<div>            { label: ‘Quickbooks Vendor ID’, dataField: ‘Company–Quickbooks vendor ID’, columnGroup: ‘company’ },</div>
<div>            { label: ‘Website’, dataField: ‘Company–Website’, columnGroup: ‘company’ },</div>
<div>            { label: ‘Primary contact’, dataField: ‘Company–Primary-contact’, columnGroup: ‘company’ },</div>
<div>            { label: ‘Primary title’, dataField: ‘Company–Primary-contact-title’, columnGroup: ‘company’ },</div>
<div>            { label: ‘Primary email’, dataField: ‘Company–Primary-contact-email’, columnGroup: ‘company’ },</div>
<div>            { label: ‘Primary phone’, dataField: ‘Company–Primary-contact-phone’, columnGroup: ‘company’ },</div>
<div>            { label: ‘Smallest team’, dataField: ‘Teams–Smallest-team-size’, columnGroup: ‘teams’ },</div>
<div>            { label: ‘Average team’, dataField: ‘Teams–Average-team-size’, columnGroup: ‘teams’ },</div>
<div>            { label: ‘Largest team’, dataField: ‘Teams–Largest-team-size’, columnGroup: ‘teams’ },</div>
<div>            { label: ‘Can hire in 1 week’, dataField: ‘Teams–Agent-hiring-1-week’, columnGroup: ‘teams’ },</div>
<div>            { label: ‘Can hire in 2 weeks’, dataField: ‘Teams–Agent-hiring-2-week’, columnGroup: ‘teams’ },</div>
<div>            { label: ‘Can hire in 3 weeks’, dataField: ‘Teams–Agent-hiring-3-week’, columnGroup: ‘teams’ },</div>
<div>            { label: ‘Can hire in 1 month’, dataField: ‘Teams–Agent-hiring-1-month’, columnGroup: ‘teams’ },</div>
<div>            { label: ‘Full-time’, dataField: ‘Teams–Agents-percent-full-time’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div>            { label: ‘Part-time’, dataField: ‘Teams–Agents-percent-part-time’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div>            { label: ‘Remote’, dataField: ‘Teams–Agents-percent-remote’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div>            { label: ‘On-Site’, dataField: ‘Teams–Agents-percent-on-site’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div>            { label: ‘Shared’, dataField: ‘Teams–Agents-percent-shared’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div>            { label: ‘Dedicated’, dataField: ‘Teams–Agents-percent-dedicated’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div>            { label: ‘Offer Shared’, dataField: ‘Teams–Offer-shared-services’, columnGroup: ‘teams’ },</div>
<div>            { label: ‘Functions’, dataField: ‘Ops–Functions-performed’, columnGroup: ‘operations’ },</div>
<div>            { label: ‘Geographies’, dataField: ‘Ops–Geographies-served’, columnGroup: ‘operations’ },</div>
<div>            { label: ‘Skillsets’, dataField: ‘Ops–Skillsets-provided’, columnGroup: ‘operations’ },</div>
<div>            { label: ‘Channels’, dataField: ‘Ops–Channels-provided’, columnGroup: ‘operations’ },</div>
<div>            { label: ‘Hours of Oper.’, dataField: ‘Ops–Hours-of-operations’, columnGroup: ‘operations’ },</div>
<div>            { label: ‘Other Funcs.’, dataField: ‘Ops–Other-functions-performed’, columnGroup: ‘operations’ },</div>
<div>            { label: ’24/7 Oper.?’, dataField: ‘Ops–Support-24-7-operations’, columnGroup: ‘operations’ },</div>
<div>            { label: ‘Languages’, dataField: ‘Ops–Languages-served’, columnGroup: ‘operations’ },</div>
<div>            {</div>
<div>              label: ‘Lang+Proficiency’, dataField: ‘Ops–Languages-and-proficiency’, columnGroup: ‘operations’,</div>
<div>              // template: function(formatObject) {</div>
<div>              //     //console.log(“formatObject.value”, formatObject.value.length);</div>
<div>              //       //formatObject.template = <div>${formatObject.template}</div>;</div>
<div>              //     }</div>
<div>            },</div>
<div>          ],</div>
<div>          sorting: {</div>
<div>            enabled: true</div>
<div>          },</div>
<div>          filtering: {</div>
<div>            enabled: true</div>
<div>          },</div>
<div>          header: {</div>
<div>            visible: true</div>
<div>          },</div>
<div>          appearance: {</div>
<div>            alternationCount: 2,</div>
<div>            showRowHeader: true,</div>
<div>            showRowHeaderSelectIcon: true,</div>
<div>            showRowHeaderFocusIcon: true,</div>
<div>            allowHover: true,</div>
<div>          },</div>
<div>          behavior: {</div>
<div>            columnResizeMode: ‘growAndShrink’,</div>
<div>            allowColumnReorder: true</div>
<div>          },</div>
<div>          columnGroups: [</div>
<div>            { label: ‘Company’, align: ‘center’, name: ‘company’ },</div>
<div>            { label: ‘Agent Teams and Composition’, align: ‘center’, name: ‘teams’ },</div>
<div>            { label: ‘Operations’, align: ‘center’, name: ‘operations’ }</div>
<div>          ],</div>
</div>

<div>

<div>          dataSource: new window.Smart.DataAdapter(</div>

</div>

<div>
<div>            {</div>
<div>              dataSource: partnerData,</div>
<div>              dataFields: [</div>
<div>                ‘Company–Name: string’,</div>
<div>                ‘Company–Partner code: string’,</div>
<div>                ‘Company–Quickbooks vendor ID: int’,</div>
<div>                ‘Company–Website: string’,</div>
<div>                ‘Company–Primary-contact: string’,</div>
<div>                ‘Company–Primary-contact-title: string’,</div>
<div>                ‘Company–Primary-contact-email: string’,</div>
<div>                ‘Company–Primary-contact-phone: string’,</div>
<div>                ‘Teams–Smallest-team-size: number’,</div>
<div>                ‘Teams–Average-team-size: number’,</div>
<div>                ‘Teams–Largest-team-size: number’,</div>
<div>                ‘Teams–Agent-hiring-1-week: number’,</div>
<div>                ‘Teams–Agent-hiring-2-weeks: number’,</div>
<div>                ‘Teams–Agent-hiring-3-weeks: number’,</div>
<div>                ‘Teams–Agent-hiring-1-month: number’,</div>
<div>                ‘Teams–Agents-percent-full-time: number’,</div>
<div>                ‘Teams–Agents-percent-part-time: number’,</div>
<div>                ‘Teams–Agents-percent-remote: number’,</div>
<div>                ‘Teams–Agents-percent-on-site: number’,</div>
<div>                ‘Teams–Agents-percent-shared: number’,</div>
<div>                ‘Teams–Agents-percent-dedicated: number’,</div>
<div>                ‘Teams–Offer-shared-services: bool’,</div>
<div>                ‘Ops–Functions-performed: string’,</div>
<div>                ‘Ops–Geographies-served: string’,</div>
<div>                ‘Ops–Skillsets-provided: string’,</div>
<div>                ‘Ops–Channels-provided: string’,</div>
<div>                ‘Ops–Hours-of-operations: string’,</div>
<div>                ‘Ops–Other-functions-performed: string’,</div>
<div>                ‘Ops–Support-24-7-operations: string’,</div>
<div>                ‘Ops–Languages-served: string’,</div>
<div>                ‘Ops–Languages-and-proficiency: string’,</div>
<div>              ]</div>
<div></div>
<div>            })</div>
<div>        }</div>
<div>      }</div>
<div>    }</div>
<div>    );</div>
<div></div>
<div>      const grid = document.querySelector(“smart-grid”);</div>
<div>      const xlsxBtn = document.querySelector(“#xlsxBtn”);</div>
<div>      xlsxBtn.addEventListener(“click”, () => {</div>
<div>        grid.exportData(“xlsx”);</div>
<div>      });</div>
<div></div>
<div>  }</div>
</div>