Ag-Grid is a powerful data table library with tons of features. It requires some learning and doc reading, but I think it is worth it.
This post will share an Ag-Grid wrapper component that will resize columns sizes to fit its container's width automatically. If its container size changes, it will resize the columns to fit the new width.
The trick is straightforward, it watches its container's width, and
window.resize event and call
sizeColumnsToFit from AgGrid's API within an
The component props of this component extend
AgGridReactProps so we can use it the same way as we use the official
useDebouncehook from usehooks.com to reduce unnecessary calls to
sizeColumnsToFit. It is entirely optional.
useWindowSizehook subscribes to
window.resizeevent and update state
useContainerWidthhook report width size with
getBoundingClientRectAPI to report the element's width.
Finally, we have
AgGridAutoResizeToContainerusing the above hooks and
The working sample is on CodeSandbox: