-1

I'm sure that the answer to this question is simple, I just can't seem to see it.

My data table is not rendering any data and I have no idea why. I have reviewed entirely too many examples online and Im sure that I have just become blind to the solution.

JS:

import { LightningElement, track, wire, api } from 'lwc';

const columns = [
    {label: 'string', fieldName: 'string', type: 'text'}
];

const testData = [
    {num: "1", string: "Test1"},
    {num: "2", string: "Test1"},
    {num: "3", string: "Test1"}
];

export default class testLwc extends LightningElement {

}

HTML

<template>
    <lightning-datatable key-field='id' data={testData} columns={columns} ></lightning-datatable>
</template>

Render:

render

|improve this question
  • 2
    why havent you declared your properties in your testLwc class? i highly doubt the template is aware of the existence of your data/columns if not declared in the exported classe's properties – glls Apr 29 at 4:11
  • @glls because I am not a javascript developer (I absolutely hate javascript but comments are not the place for my rant). Had Salesforce's compiler thrown some sort of error saying "columns does not exist" it would have saved hours of effort. – gNerb Apr 29 at 13:57
  • the Lightning Web Component reference library has very good docs and snippets which you can refer to =) – glls Apr 29 at 14:05
  • @glls Thanks, I actually posted another question looking for documentation this weekend because I spent hours googling and had an incredibly hard time finding anything useful. I did eventually find it though and it is what I was using yesterday when I posted this question. If you click the link and view the basic.js example you'll see that it uses consts which is the very thing you told me not to do in your first comment. (although, I do now notice that it also assigns the const to an inner variable). – gNerb Apr 29 at 14:34
  • yes, the constants are refered to within the the property in the exported class =), my first comment was merely a question as to why you had not refered to the variables within the exported class. – glls Apr 29 at 14:36
1

The variables need to be in your class in order to be visible to the template. This simple change should make the table behave normally:

import { LightningElement, track, wire, api } from 'lwc';

export default class testLwc extends LightningElement {
    columns = [
        {label: 'string', fieldName: 'string', type: 'text'}
    ];

    testData = [
        {num: "1", string: "Test1"},
        {num: "2", string: "Test1"},
        {num: "3", string: "Test1"}
    ];    
}

Obviously, in the most useful case, your variables would most likely use @track, @api, or @wire, but this should get you started.

|improve this answer
  • That was the first thing I tried. I get an error saying that constants cannot be defined in the class. In my real world example I attempted to resolve this error with something likeget columns() {return [...];} and it was not working. Changing it to columns = [...]; appears to be enough to get the columns to render. The data in my real world example still does not display even though my console.log shows that it is available and in the correct format. Im going to play around with it and if I need more help I'll ask a second question. – gNerb Apr 29 at 13:53
  • Removed const as it throws an error saying "const can only be used in .ts files". – gNerb Apr 29 at 13:54
1

You should declare the properties either private @track or public @api. so that any change in the value will rerender the component

<template>
    <lightning-datatable key-field='id' data={testData} columns={columns} ></lightning-datatable>
</template>

import { LightningElement, track, wire, api } from 'lwc';
export default class testLwc extends LightningElement {
    @api columns = [
    {label: 'string', fieldName: 'string', type: 'text'}
    ];

    @api testData = [
    {num: "1", string: "Test1"},
    {num: "2", string: "Test1"},
    {num: "3", string: "Test1"}
    ];

}
|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.