custom Column - how to get the index of the current column?

[leijuns]

I am using react-aria-components to wrap a Table component and I want to freeze the first two columns using position: sticky. I am implementing this functionality in my custom Column component. When freezing the second column, I need to set the left property to the width of the first column, so I need to get and save the widths of all the columns.

But here's the problem: when I try to get the width of the previous column, I need to know the index of the current column. However, I couldn't find any props related to the column index in my custom Column component. I also tried using TableStateContext to get the state, but the return value of useContext(TableStateContext) in my custom Column component is null.

I wonder if I am doing something wrong. Is there any way to get the current index in my custom Column component, or should I use a different approach to set the left property of the Column?

[reidbarber]

You should be able to just pass in an index prop into your custom column:

<MyColumn index={0}>Name</MyColumn>

https://codesandbox.io/s/pedantic-chandrasekhar-trc5f2?file=/src/App.js

I think you may be overthinking a solution. Let me know if that isn't enough to handle this use case though.

[leijuns]

What I am considering is that other developers still need to pass the index prop when using the MyColumn component. It would be more developer-friendly if the index can be handled within the MyColumn component, because there is already a determined index position when using the MyColumn component.