Git Product home page Git Product logo

Comments (4)

pangweisan avatar pangweisan commented on July 16, 2024

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.

pangweisan avatar pangweisan commented on July 16, 2024

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.

vincjo avatar vincjo commented on July 16, 2024

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.

pangweisan avatar pangweisan commented on July 16, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.