How do I add a new column and / or rename an existing one?

[stefroussos]

Hello,

I'm trying to build something similar to the data grid that's used in the Glideapps production app and I'm unable to implement adding new columns and renaming existing columns.

I'm storing the column data via useState, but any time I make changes the app keeps crashing. This is the error TypeError: Cannot read properties of undefined (reading 'includes'). The onColumnMoved feature works perfectly well.

I'm using next: 12.1.1

[jassmith]

Without seeing your code it is hard to see what could be going wrong. To me this looks like you have messed up the dependencies of one of your hooks but that is honestly just a wild guess here. In particular what appears to be happening is a GridCell with kind GridCellKind.Text is being created but the displayData is set to undefined. A properly formatted TextCell should never have undefined data or displayData

[stefroussos]

Thanks for your response Jason,
I've made a copy of my demo code on CodeSandbox. The issue is probably with the onAddCol on line 146.

[jassmith]

This issue is that your sortableColumns gets updated but your initialColumns does not. You end up trying to find a column in your initialColumns which does not exist, and thus the resulting column index passed to getContent is -1. This then causes the data to lookup and you end up passing undefined to your textcell, causing the bug.

[jassmith]

By the way the @glideapps/glide-data-grid-source package contains a prebuilt hook called useMoveableColumn which you might want to use instead, or grab and modify.

[stefroussos]

Thanks a lot for you help Jason!