Title/field headings

[ahmedtoolapp]

• [x] I have looked through the documentation to try to see if this feature already exists.
• [x] I have looked at the demos to see if one of them does what I want, but none of them did.

Is your feature request related to a problem? Please describe.

My request is related to a behavioral bug, I cannot display labels at the top of my table (headings) which are different from the names of the fields in my rows, My data comes from API, there are compound field names like firstName or birthDate What to do if I want to display custom labels or show then in different language without using a translation process.

Describe the solution you'd like Like other plugins accept more options for headings like headings : [ { field : "string", title : "string", class : "css classes" //.... }, { field : "string2", title : "string2", class : "css classes 2" //.... } ]

Describe alternatives you've considered I use a key value dictionary object to replace the base array const titles = fields.map(field => TITLES[field]); const obj = { headings: titles, data: [] } ...

Additional context None

[Daniel123454321]

I second that. I havent found an easy way to use different column names when fetching the data from a remote source. The name of the th-cell must always be the name of the field in the json result set.

It would be great If anyone would have a simple solution for that.

[johanneswilm]

You should be able to provide both a text that is displayed and a data field for each header cell, like this:

const datatable = new DataTable("#demo-table", {
    data: {
        headings: [{text: 'Year of birth', data: 'birthyear'}, {text: 'Eye color', data: 'eyecolor'}],
        data: [
            ['1984', 'brown'],
            ['2002', 'blue]
        ]
    }
}

But I am not sure what the idea is with having it there. You don't address columns with the field name, so what are you trying to achieve? Please provide a minimal example to explain yourself.

[Daniel123454321]

A simple example: I would like to have the text "date created" (with a space in between) as column header - or maybe an icon or html formatting. However, I load the data via an API request/json file. The data ("date created") is not loaded/displayed in the table.

Here is an code example (with setting the headers).

{
    "id": 1,
    "date": "2024-01-01",
},
{
    "id": 2,
    "date": "2024-01-02",
}

            dataTable.data.data = [];
            // does not work - th get's renamed but no data is loaded
            dataTable.data.headings = [
                {text: 'id', data: 'id'},
                {text: 'date created', data: 'date'},
            ];

            dataTable.insert(json);
            dataTable.draw();

So the only solution right now is to use 'date_created' as the table header

<table>
<thead>
   <tr>
    <th>id</th>
        <th>date_created</th>
</tr>
</thead>
</table>

{
    "id": 1,
    "date_created": "2024-01-01",
},
{
    "id": 2,
    "date_created": "2024-01-02",
},

            dataTable.data.data = [];
            dataTable.insert(json);
            dataTable.draw();

[johanneswilm]

@Daniel123454321 I see. Yes, that makes sense. I added a fix to make it work and added an example to show how to load both initial and additonal json data after load for this case. I hope that helps.

[Daniel123454321]

Great, thank you very much!