MRT Columns not showing in toggle hidding

[NolanAntonn]

Hello everyone,

I'm reaching out for some assistance with Material React Table (MRT) in a React/MobX environment. I've been struggling with an issue for several days and haven't found a solution.

The Problem:
When I dynamically define my columns through an API call in a MobX store and initialize MRT with these columns, they do not appear in the toggle list for showing/hiding columns.

Simplified Code for Context:
To define my columns and data, I use the following:

And the columns are defined as:

const columns = useMemo(
() => answersStore.headers || [],
[answersStore.headers]
);

The data is defined as:

const data = useMemo(() => answersStore.data || [], [answersStore.data]);

In the MobX store, headers are transformed to columns like this:

transformHeadersToColumns(headers) {
return headers.map((header) => {
let column = {
accessorKey: header.idCanvas,
id: header.idCanvas,
key: header.idCanvas,
header: header.label,
userId: header.idCanvas,
type: header.type || '',
enableHiding: true,
enableClickToCopy: true,
}

return column

});
}

const response = await collectFormAnswersData(this.url_code);
runInAction(() => {
this.data = response.results.rows;
this.totalRows = response.count;
this.headers = this.transformHeadersToColumns(response.results.headers);
});

The Issue:
Despite this setup, the columns are not visible in the list of columns to show/hide. It's perplexing, and I'm unsure what I'm missing or doing incorrectly.

Has anyone faced a similar issue or could provide some insight into what might be going wrong? Any help or guidance would be greatly appreciated.

Thank you in advance!

[veeresh-27]

You can refer to this example ttps://www.material-react-table.com/docs/examples/dynamic-columns.

Alternatively, consider implementing a straightforward approach: check if the data length is greater than 0 before rendering the grid. This ensures that the grid is only rendered when there is substantial data to display.