How to add an append/add column button after the last column?

[jorenrui]

Hello, I was wondering if there is a way to add a "add column" button after the last column or will it be implemented in the future? Like how "row append" works.

Currently, the only way I add new columns is by having something like this:

And using the rightElement to add a "sticky" add column like this:

I was trying to create something like this in Airtable:

Currently, another solution that I think of is just adding a column that draws a custom header cell with a plus icon (or plus header icon with no label). Then add a onHeaderClicked for it.

Anyways, I really appreciate the data grid you're building. Love how fast and smooth it is!

[jassmith]

Let me try my hand at making the airtable style approach.

[jassmith]

I have added an example here: 0767cc1

Note that this commit includes a breaking change which is not needed for the effect to work, it just adds more flexibility for me in the future to make these right element items more flexible. In the current API you merely need to make sure at least 1 column has grow: 1 set and that rightElementSticky is false. Then you can implement the button using the correct theme values (I just hardcoded the correct values because demo code).

At the end you get something that looks like this:

[jassmith]

Making this a default feature could be nice, I guess I never really thought about that. I dont want to bloat the package but I suspect this is a pretty common use case. It could probably be done as a third party hook package.

[jorenrui]

Okiee. Thank you, I appreciate this! 😁