yidas / jquery-freeze-table Goto Github PK
View Code? Open in Web Editor NEWRWD Table with freezing head and columns for jQuery
Home Page: https://yidas.github.io/jquery-freeze-table/
License: MIT License
RWD Table with freezing head and columns for jQuery
Home Page: https://yidas.github.io/jquery-freeze-table/
License: MIT License
Hi,
I am using this js lib for the freeze table functionality. My table is editable at runtime, when the user keeps adding a new line in a cell, the corresponding cell in the freezed column, the width increases, but as soon as I scroll (up, down or right) the width of the freezed cell is restored to its original size, even though the one with the data is still having the modified width.
Due to this the data is not correctly visible and confuses the user.
I am unable to upload the actual table so have tried explaining the issue with another image, can someone please help.
First and last column fixed - how?
When I run your demo in Safari, and you scroll all the way to the right when the first column and header are frozen, the first column disappears. It reappears when you scroll back to the left. The problem doesn't appear in Chrome. Any idea why this is happening?
I'm using freeze table combine with bootstrap tabs, and the tabs one is smooth running, but the second tabs responding but the css and scroll all nothing happens, please help me
Has anyone encountered this issue? if so what was your approach to fix it.
Issue with RTL tables fixed column ... scroll and fixed columns not working ... it seems that there is some problem with scrollLeft and negative scrollbar value...
Is it somehow possible to display the shadow on the right as well (in case there is more content on the right)?
My problem is that sometimes it is not immediately visible that there is more content on the right to scroll to. That happens when the border of the view conincides with the border of a column. I love the shadow effect as a visual indication that there is more and would like to use it.
(BTW thanks for this awesome piece of software)
Is there any option to set top Offset value for freeze table. ?
Demo Example
$("#table-first").freezeTable({
'freezeOffset: 50,
});
Hi
I can't figure out how to make the plugin work with a sticky top navbar. If I set the navbar's div to position sticky the table head doesn´t stick. If I set the top navbar to position fixed the table head overrides the navbar and sticks on top.
Thank you for your great work and support
Happy New Year
Its didnt working on jQuery 3.1. But work good on jQuery 2.4
I am trynig to use this with Asp.Net GridView, but getting thrown into "The element must contain a table dom".
Checking to see if anybody has found a fix for this?
I am using jquery-freeze-table together with jquery-tablesorter https://mottie.github.io/tablesorter/docs/
jquery-freeze-table is in table-head-only mode, thead freezes fine but disables sorting
Any help is greatly appreciated
Thank you :)
`
<script src="/tablesorter-master/dist/js/jquery.tablesorter.min.js"></script> <script src="/tablesorter-master/dist/js/widgets/widget-filter.min.js"></script> <script src="/tablesorter-master/dist/js/widgets/widget-pager.min.js"></script> <script id="js"> $(function () { var $table = $('#table') .tablesorter({ // keeps columns width when child row is expanded widthFixed: true, // third click on the header will reset column to default - unsorted sortReset: true, // initialize filter and pager widgets widgets: ["filter", "pager"], widgetOptions: { // Pager // if true, child rows will be counted towards the pager set size pager_countChildRows: false, // output default: '{page}/{totalPages}' // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows} pager_output: '{startRow} - {endRow} de {totalRows} elementos', // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty // table row set to a height to compensate; default is false pager_fixedHeight: true, //Search filter // Set this option to false to hide input search in each column filter_columnFilters: false, filter_saveFilters: true, // Set this option to false to make the searches case sensitive filter_ignoreCase: true, // Reset search filter_reset: '.reset' } }); // Add this class to input search $.tablesorter.filter.bindSearch($table, $('.search')); }); </script> <script> $(function () { // hide child rows $('.tablesorter-childRow td').hide(); $(".tablesorter") .tablesorter({ cssChildRow: "tablesorter-childRow" }) // Toggle child row content (td), not hiding the row since we are using rowspan // Using delegate because the pager plugin rebuilds the table after each page change // "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL $('.tablesorter').delegate('.toggle-childRow', 'click', function () { // use "nextUntil" to toggle multiple child rows // toggle table cells instead of the row $(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle(); // in v2.5.12, the parent row now has the class tablesorter-hasChildRow // so you can use this code as well // $(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle-childRow(); return false; }); }); </script> <script> function toggleChevron(x) { x.classList.toggle("icon-close"); } </script> <script src="/jquery-freeze-table-master/dist/js/freeze-table.min.js"></script> <script> $(document).ready(function () { $(".table-head-only").freezeTable({ 'freezeColumn': false, }); }); </script>`Hi,
I init a freeze table with the follow:
var freeze_table_pecas_obra_edit = new FreezeTable("#freeze_table_pecas_obra_edit",
{
'scrollable': true,
'freezeHead': true,
'freezeColumn': true,
'scrollBar': false,
'namespace': 'freeze_table_pecas_obra_edit',
'columnWrapStyles' : {'border-right':'1px solid black'},
'headWrapStyles' : {'border-right':'1px solid black', 'border-bottom':'1px solid black'},
'backgroundColor' : '#DEDEDE',
'columnBorderWidth': 1
});
But it does not respect the border styles. Check this printscreen:
I think that I'm not doing anything wrong....
Hi,
Great plug in, it may be something i missing but i cant set a scroll on the height, if i do then the sticky head stops working.
i have a configurable record count table displayed on the screen, so if the user changes its to 100 records per screen they would be unable to find a record and scroll across due to the x scroll bar being right at the bottom.
tried overflow-y:scroll; max-height:500px;
its a shame as otherwise its a simple and great plug in.
I tried this and it freezes my columns like a charm, but I have one problem which makes the whole thing useless for me.
I have text inputs in my header to filter the table content. When I use the freeze column function on my table and perform a postback these text inputs get filled with: value + ',' + value
So when the text input was empty then the value becomes ','
When it for example was '123' then the value becomes '123,123' and so on.
How can I prevent this from happening?
Thanks in advance
Hi,
I have very long tables. I happennes that I want my table to have a max-height. That way the visitors don't have to scroll the whole table before looking at what follows in the page. They could just scroll outside the table to pass the table.
I tried to set a max-height:80vh on the table and it does nothing the style is ignored. The full table is shown.
I tried then to set a max-height:80vh on the container. The table head sticks to the screen instead of the container. The behavior is very buggy.
Am I missing something or is it the plugin that could be improved ?
Bye,
François
how to freeze last column?
I have a table that has two trs in thead.
I need to freeze both of those rows and the first column.
I'm finding that the clone-head-table-wrap version of the table has the header taking up less vertical space and the first column shifts upwards.
I've done some measuring. Considering the cell addresses are A1, A2 (a la excel), here's what I see:
On the original table - the one that is displaying the content,
A1 is 57x65 px
A2 is 57x81 px
On the clone-head-table-wrap, the cells are this measurement:
A1 is 94x33 (line-height 16.245px
A2 is 94x49
So with the drop from height of 65+81 down to 33+49, the rest of the first column is slid up so high that it is pretty much two cell heights off on the rest of the table.
I've gone through the inspection of cells A1 and A2 in both the original and the clone and the applicable settings all appear to be the same. But the height and width are not equal. Presumably, that's because the other columns in the cloned table are of different sizes and that's forcing the measurements of the visible frozen columns to be incorrect. I've tried to see if the measurements of the other columns of the table differ between the original and the clone but I'm unable to retrieve the hidden cell sizing.
I have a few media queries happening here to manage font size, but I wouldn't expect that to cause these issues.
Are there any ideas on this?
Is where any method to call update when user scrolled table by X? I have large table and now I call update every time when checkbox in fixed column changed and updation work very slow on my large table. My table has about 200 rows.
Maybe your plugin triggers some events when scrolling, or some other undocumented events?
PS. I think I finded triggering on 550 line of plugin, but I don't know how to use it.
I am developing a large dynamic table and your plugin is great for fixing rows and columns of any table. I really appreciate, but it's issuing with a plugin called dragtable. The issue is that when I drag a column from one place to another and then scroll down, it clones the previous header and when I again scroll to the top issue fixes up but on fixing the table header it's not working. Can you help me out this issue?
On page load table;
After moving some columns:
After scrolling:
Check out that after page scroll the header resets.
I think you have to clone the latest one top row but it's cloning the row which is loaded with the page-load event.
I have opened your plugin to check out what's going on in there, but I was unable to change because I am not so expert in JS.
Regards:
UsmanJavedAttari
Hi Guys,
I have an issue were we have sliding elements in the page that is causing the clone-column-table-wrap
to leave the table. I hope there is someone that can help me out here fixing this issue.
Thanks,
Patrick
I was seeing some odd results in terms of the fixed column being under-width. After a bit of trace-back, I found that the difference between my code and the examples was the examples were setting cellspacing to 0. The outerwidth() in the calculation does not account for this, since it is between cell elements
I modded the code, starting with https://github.com/yidas/jquery-freeze-table/blob/master/dist/js/freeze-table.js#L441 to add 2 to the addWidth and then 2 more after the loop; 2px being the default (https://www.w3schools.com/cssref/pr_border-spacing.asp).
But of course that is not a general solution (it needs to look at cell spacing then if undefined, border spacing). I hope to work up a proper patch to submit, but in case I don't, I wanted to file the issue (and on the off chance there was already an option I just missed!)
Hello, am david and i have an issue with the jquery freeze table. I have a form within a div that calls the freeze table method in jquery and in the div have a table.
My issue is that when i change input of type select in my form and submit the form the value of my input does not change. How can i handle this issue please? Thanks
This issue seems to only be caused by mouse wheel "jumpy" scrolling. When clicking the scrollbar slider, the frozen rows and columns stay "attached" to their tables.
FWIW, this is happening on a page with two tables with frozen header and first column.
First, thank you for great work !
I can freeze header perfectly, But it's not work well with inputs in tbody, cause it cloned tbody too, no matter what all I need is header freezing only.
Inside the cloned table, all the HTML id attributes are duplicated. This is creating issues in the automation tests and in WCAG standards.
hi
when add class table-hover bootstrap
not hover when freeze column
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.