Comments (3)
Are you trying to set the column width after the plugin runs? If so, is there a reason for that or can you do it before it runs?
If you did it before it runs, the best way to do it is to comment out the plugin code, make your table look correct and then add the plugin code back in.
If you need to set column widths after the plugin has been enabled, you can do it like this:
function setFloatTheadColumnWidth($table, columnIndex, widthPx) {
$table // $table should be a jQuery object reference to your original table.
.floatThead("getRowGroups") // ask floatThead for children elements of the original table.
.find("tr>:nth-child("+columnIndex+")") // Find all elements in table that are nth-child of any tr element.
.width(widthPx) // Set width of all selected elements.
.end() // Returns the last selected element, which is $table. I saw you have python repos, so you should understand why everything should be done in one line :)
.trigger('reflow'); // Trigger a reflow event, which is a custom event floatThead listens to to make it recompute its layout.
}
// Then call it AFTER you init the plugin, call this method somewhere
setFloatTheadColumnWidth($('table.kpi-table'), /* columnIndex= */ 3, /* widthPx= */ 200);
Hope that helps. Good luck with your KPIs :P
from floatthead.
Haha, thanks :D I will need luck as this frontend stuff challenges my sanity a little bit too much... :D
I'm really grateful for your plugin though, it's like a sane island among the sea of insane tools. I don't know who the hell manages CSS but I'm of the impression they must be artists, not engineers :D
I'm actually trying to set the column width before the plugin runs, or more precisely, I would prefer the solution with the best performance and I assume doing it in html/css would be the faster way. For now all data is given from the django backend and is not changed dynamically after. To my astonishment I just noticed that what I'm doing also doesn't work when I disable your plugin, so I'm very sorry, there must be something wrong with my code. It was just so unbelievable that all those width: 200px !important;
didn't work that I thought it must have been some interaction with your plugin :o
I found the solution. min-width: 150px;
and max-width: 200px;
used on <td>
cells work. width: 200px;
doesn't...
It's things like this that will make me bald one day... :D
P.S. Thanks also for the JS solution, maybe I will need it in the future :)
from floatthead.
While this is thread is already closed, I want to add a comment.
Having troubles with a table where is hide (and show) some columns on users demand (hitting a button).
The (new) table (with hidden columns) is not recalculating the new with (before 12 columns, after hiding only 4).
The recalculation does work if all columns are displayed.
I tried a slightly changed function you provide above.
The code parts:
$('.filter-display').on('click', function() {
$('.extended').toggle(400);
setFloatTheadColumnWidth($table, 1, '25%');
})
and the function itself:
function setFloatTheadColumnWidth($table, columnIndex, widthPx) {
$table
.floatThead('getRowGroups')
.find('tr').children()
.width(widthPx)
.end()
.trigger('reflow');
}
The width (here 25%) is based on the number of columns [mine has 4 after hiding the others] (adjust as you need), the table cells are calculated correctly.
Maybe that helps someone having same situation like me.
@mkoryak maybe you have once the time to fix the code doing such automatically.
If you need more, just let me know.
thx.
from floatthead.
Related Issues (20)
- Quickstart guide HOT 2
- Bootstrap tooltips displaying in wrong position HOT 12
- Fix the first column (on the left) and the header of the table (on top) HOT 3
- TypeScript Definitions HOT 6
- Floating thead hides its origin on overscroll? HOT 5
- Request: add extra class to the top floated element when its active HOT 3
- Strategy for handling sticky position from top when that position isn't constant HOT 11
- Compatibility with table sorting plugins ? HOT 2
- Wrong setHeaderHeight behaviour HOT 9
- Header never prints using jquery.floatThead HOT 2
- Browser search doesn't scroll to position of result HOT 2
- [enhancement] keep input focus during reflow
- Not working
- TypeScript 4.3.5 error with version 2.2.2 HOT 7
- In your official documentation, please explain you MUST use a JQuery selector, not regular JavaScript HOT 5
- TypeScript 4.3.5 error with version 2.2.3 HOT 2
- Table is not recalulated correctly after hiding/showing some columns HOT 6
- top position according to responsive vs. scroll HOT 4
- Rendering issue when multiple <table> are contained in a `overflow: auto;` div HOT 7
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 floatthead.