API - How can I update the column titles post-initialization?

API - How can I update the column titles post-initialization?

bitterdanielbitterdaniel Posts: 2Questions: 1Answers: 0
edited May 2020 in Free community support

This is less "my code isn't working" and more "I can't find this feature in the api", so I haven't included test cases. If someone feels they're relevant, I can update with any helpful things.

Question:
How can I initialize a DataTable with columns and data, and then change the column titles? I'm able to programatically change the table data via rows.add(data), but I'm not finding an API equivalent for column titles:

        this.$el.dataTable().api().clear();
        this.$el.dataTable().api().rows.add(data);
        this.$el.dataTable().api().draw();

Context:
I'm building a website in React where my column and data arrays are held in state and passed to a child via props.
I have 2 buttons on the page: one to show a table of file names & their UUIDs, and another to show query results from a REST request.
Clicking either button will trigger a re-render with either the file info or query results passed to my DataTable.
I'm able to console.log and see the expected data sets reaching the DataTable.
I'm not clear on how to use the DataTable API to update the column titles.

I'm able to see
<thead><tr><th aria-label="File Name: activate to sort column ascending">File name</th><tr><thead>
and
<tr><th aria-label="File Name: activate to sort column ascending">File name</th><tr>
via these API calls:
this.$el.dataTable().api().table().header(),
this.$el.dataTable().api().column(0).header()

and could likely do a manual update with DOM manipulations. But I feel that's hacky and not how it should be done.

I could destroy and reinitialize, but I think that's a very expensive way to achieve my result.

Have I missed something in the API?

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    Although this is an old thread I think the answer still stands:
    https://datatables.net/forums/discussion/27038/how-change-dynamically-title-of-column

    Kevin

  • bitterdanielbitterdaniel Posts: 2Questions: 1Answers: 0

    Thank you for the quick reply! I was able to update the titles this way, but I feel it's incomplete. The displayed text is updated as expected, but each header has an accessibility attribute that isn't updated:
    aria-label="File Name: activate to sort column ascending"

    I could update it manually in a similar manner, but this feels really hacky and unintended. Is there something in the API that will do all this for me?

    Code for reference / future people:

    const api = this.$el.dataTable().api()
    const tableColumnPositions = api.columns()[0]
    tableColumnPositions.forEach(index => {
        $(api.column(index).header()).text(columns[index].title)
    })
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    Is there something in the API that will do all this for me?

    Unfortunately there is not an API to update the header titles and/or aria-label. All the API's are documented here.

    Kevin

This discussion has been closed.