Comments (4)
I think I understood how to make the sticky header same size as the table cell. Set the box-sizing of 'td' in the actual table to be border-box, the sticky header sizing would be correct.
from svelte-simple-datatables.
It seemed setting the table box-sizing to border-box alone only helped when Datatable was initially rendered with non-empty data. If Datatable was initially rendered with empty data row and later on fed with new data, the sticky header size didn't get updated automatically. Based on my analysis the problem seemed to be :
(1) There was no mechanism in invoking the resize of the table when new data was fed. ResizeObserver was set on the parent element of Datatable, which may not change when new data is fed.
(2) I tried adding a ResizeObserver on table->th, and performed a datatable.resize in it, but when the code went through columns.redraw, it didn't pass in the argument required by the function to locate the the data row in the table. The function argument is the id of the Datatable. I added the argument, then the header seemed to be resized correctly.
I apologized if my analysis is wrong.
from svelte-simple-datatables.
Hello Pang,
I apologize for the delay in responding.
I don't know exactly what broke. I should have corrected the issue in 0.1.27.
It needed a short delay before to draw columns in the sticky header. The time the default table style is computed.
Did'nt test feeding data multiple time for now
from svelte-simple-datatables.
Hello Vincjo,
Yes, indeed the short delay is needed. My observation was that when the table was fed with new data, the table columns sizes could change to adjust to the new data width, with the current datatable.init() implementation, the resize observer is created for the table parent element, which in my use case the parent element has a fixed size, so it wouldn't trigger the observer resize
callback. I had to add resize observers for each of the table header elements in order to make it work.
My analysis could be wrong, or may be it's my use case that needs a different treatment, so if nobody else is having the same problem then it's probably not an issue.
rgds
Pang
from svelte-simple-datatables.
Related Issues (20)
- Initial datatable mount doesn't show x-axis scroll bar if table size larger than datatable container.
- Table version 3.29.7 filter & search function doesn't work. HOT 1
- Demo site is down HOT 8
- Width for individual columns HOT 1
- Width Issue
- 500 Error on SvelteKit: `Cannot read property 'length' of undefined` HOT 6
- Using data directly from a store HOT 2
- Initital sort HOT 2
- <thead> element for sorting columns is invalid HTML
- Quick questions
- Table rerender infinitely with non-zero padding for left and right HOT 1
- Redraw function doesn't work correct on window width reducing
- Disabling scrollY also disable columnFilters
- Filter function does not have access to global/outer scope HOT 1
- define which columns to search with search field (not column-filters)
- Extended the PaginationRowCountHTML.svelte to show pagesTotal etc
- Unable to apply styles to component
- Add Select/Option or any HTML Input below thead for filtering
- Save filters and reuse them 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 svelte-simple-datatables.