Comments (4)
Hi @zatopek-firstis it is default behavior of html table.
the reason of that is that you have 4 columns with 200px width (800px in total), but table width is 1100px - what is bigger than all columns width. in this case table is doing column width change to fill the all free space, as a result when you change the width of one column it recalculates free space and changes the width of other columns.
Solution is to have columns width what fills all table width space in total
https://stackblitz.com/edit/table-column-resizing-ts-dbhs9s?file=Demo.tsx
from ka-table.
Yes, you are right it is default behavior of table, but with set width of table and set width of columns it is only solved for initial state and with overresizing it "breaks". Our customers are unfortunately like that and it needs to be solved, so I guess I will be forced to do so.
In your demo, you just solved it for your amount of columns and width, but luckily I have huge monitor so I can show you how it behaves in my enviroment:
Like I said, the problem is that it programaticly changes the width of only one column:
The solution (and in my opinion the correct one), would be to change the width of both left and right column next to resizing point up to one of them has minimal width and then stop it.
Heres example what I have in mind:
https://demos.devexpress.com/MVCxGridViewDemos/Columns/ColumnResizing
Of course if you really do not want to do it and keep your behavior the same, which is understandable, let me know and me or one of my colleagues will have a look at it in our wrapper. If you would be interested in solution afterwards and maybe want to implement it, I think we will be open for it.
from ka-table.
@zatopek-firstis I will not customize the native behavior of html table for that case. As a solution you can have one buffer column without width and it will change it size while others will keep their fixed sizes https://stackblitz.com/edit/table-column-resizing-ts-xg5dms?file=Demo.tsx
from ka-table.
@zatopek-firstis btw there is another way to keep columns width: just remove min width from table https://stackblitz.com/edit/table-column-resizing-ts-kjhdaw?file=style.scss
this way table will have width based on columns width
from ka-table.
Related Issues (20)
- Header Filter Popup Mispositioned with Horizontal Scrolling Table HOT 1
- Bulk select HOT 1
- support placeholder HOT 2
- Is rows ordering persistent? HOT 1
- Column in ITableProps does not contain the property 'editor' HOT 1
- Using the SelectionHeader example from the docs cause crash when 'dispatch' function is passed into the table component. HOT 1
- Filter operators isEmpty and isNotEmpty are Non-functional HOT 2
- Make table cell clickable HOT 1
- How to group by an object cell HOT 9
- Actual filtered data HOT 1
- sort prop in ka-table not supporting server-side sorting HOT 3
- Reordering group of colomns HOT 2
- Problem with virtual scrolling, many columns and not so many data HOT 2
- Jest deprecations on mock functions produced with jest.fn() HOT 1
- are async validations possible? HOT 2
- Add previous state in onDispatch action HOT 10
- Unable to select all the cell content with mouse double click in firefox HOT 4
- Add a search bar inside of the "Header Filter" HOT 8
- Dynamically calculate page number of a row when grouping is implemented HOT 2
- Feature Request: When virtualScroll is enabled, have Summary row always be visible HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ka-table.