DataTables / DataTables/DataTablesSrc
Table does not resize correctly in `display: grid` context
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 801
- Forks
- 440
- PR merge metrics
- No merged PRs in 30d
Description
Hello there, we stumbled upon an interesting datatables bug.
When there is a table in a container with display: grid, the table can only grow but never shrink when the container/window is resized. This happens when the scrollY option is set. If I change the containers display property to simply block it works as expected meaning the tables grows and shrinks.
I created a codepen with an easy toggle for the display property:
https://codepen.io/timw-ppi/pen/WbrjgBy
The use case is the following: We need to place two tables next to each other (with buttons in between) and the tables should have the same size. display: grid is perfect for this. We tried display: flex but that causes ResizeObserver errors in datatables. We will try to find a different workaround for now.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodePen reproduction and compare resizing with the container set to display: grid versus block while scrollY is enabled. Trace the table sizing behavior during container or window shrinkage, and confirm the fix by reproducing growth and shrinkage in the grid layout without ResizeObserver errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100