Set the initial width of gridstack element

Question

I am using gridstack.js library in my react app. The aim is to create a dashboard that can be personalized using a list of widgets. I am currently starting with only one widget which will always be there but the problem is I can't get it to span across the entire grid-stack container on initial load

I am initialising the grid as follows

const grid = GridStack.init({
            column: 3,
            draggable: { handle: '.drag-target' }
            // float: true
        });

and then for my html I have

<SC.RemoteComponentContainer>
                    <div className='grid-stack'>
                        <div className='grid-stack-item border-dark' data-gs-width='3'>
                            <div className='grid-stack-item-content'>
                                <SC.DraggableIcon className='drag-target' />
                                <div> ...required content... </div>
                            </div>
                        </div>
                    </div> 
</SC.RemoteComponentContainer>

When the page renders initially, the grid-stack-item div only spans across one column instead of 3. Does anyone know how to make it span across the entire gridstack container?

I don't want to initialise gridstack with 1 column only as I want the user to be able to resize this widget and I noticed that if I initialise the widget with only 1 column then the grid stack item does span across the entire gridstack container but it is not resizeable.

Any help would be appreciated. I have looked up a lot of previous issues but they have to do with initialising the item when it is dragged and dropped but my case is different from that

Answer 1

Found the issue,

Need to use gs-w='3' instead of data-gs-width='3'