[BUG] Column Name not showing when using Array of Object Descriptors

[Tropicalrambler]

Actual Behavior

When creating a datatable in a page on ERPNext, one can specify the column names with the following declaration:

    const options = {
    columns: ['Name', 'Position', 'Country']
}

This works fine.

However, if you wish to use the Array of Object Descriptors method:

const options = {
    columns: [
        {
            name: 'Desired Name',
            id: 'name',
            editable: false,
            resizable: false,
            sortable: false,
            focusable: false,
            dropdown: false,
            width: 32,
            format: (value) => {
                return value.bold();
            }
        },
        ...
    ]
}

The Name does not show up. Nothing is in the column header. No errors on the console show either. Tried with other browsers, and no joy. It must be a bug.

Expected Behavior

Columns defined using Array of Object Descriptors, should show the name simply without any problems.

Source

[agritheory]

@Tropicalrambler Alain, don't nest it. It's expecting either a list or an object, not a list of objects.

    columns:  {
            name: 'Desired Name',
            id: 'name',
            editable: false,
            resizable: false,
            sortable: false,
            focusable: false,
            dropdown: false,
            width: 32
            }
 

[Tropicalrambler]

Thanks Tyler, silly us! We experimented a bit with Mario and we found the following format resolved the issue:

Number 1 We continued passing a list to a "columns" object.

// Create an options object with the columns and data
const options = {
                columns: [column1, column2, column3, column4, column5, column6, column7, column8, column9],
                // data content is defined previously, and not our issue here...
                data: data_content
            }
            // And we create our data table 
            const data_datatable = new DataTable(container, options);

Number 2 However, our declaration for each column object changed to this and worked.
Instead of name, we used "content"

const column8 = {
        content: "Price",
        id: 'price',
        editable: true,
        resizable: true,
        sortable: false,
        focusable: true,
        dropdown: false,
        width: 121
    }