I've been experimenting with a jQuery plugin I found at to create a stylish table with fixed headers, sorting options, and other interesting features. While the plugin is great, I also considered using jqGrid for its impressive capabilities. However, due to some complexities in our data source, integrating it with jqGrid may not be straightforward.
My supervisors have requested that I make the first column of the table fixed so that they can scroll horizontally while still keeping the first column visible. How can I customize this plugin to achieve this functionality?
I would really appreciate any assistance or suggestions on how to go about this task.
Thank you
UPDATE:
In an attempt to address this issue, I experimented with the following CSS code:
th:first-child
{
position : relative;
}
td:first-child
{
position : relative;
}
However, it seems that the solution may not be as simple as initially thought...
While this approach had some impact by fixing the first column on the left side, it hindered vertical scrolling and the styling of th remained problematic.
UPDATE 2:
I've started implementing another solution provided below, although I'm not entirely confident in my ability to modify this plugin. Here's what I've tried so far:
I will provide further updates on my progress...
But I encountered an error stating 'this.offset.top is null or not an object... blah.'
The following code snippet was added within the document.ready function:
var currentTop = 0;
var currentLeft = 0;
var currentWidth = 0;
var currentHeight = 0;
var currentContent = "";
var currentDiv = "";
var currentID = "";
$('td:first-child').each(function (index) {
currentTop = $(this).offset.top;
currentLeft = $(this).offset.left;
currentWidth = $(this).width;
currentHeight = $(this).height;
currentContent = $(this).html();
currentID = "fixed_column_cell" + index;
currentDiv = "<div class=\"fixed_column_cells\" id=\"" + currentID + "\">" + currentContent + "</div>";
$('body').append(currentDiv);
$('#' + currentID).offset({ top: currentTop, left: currentLeft });
$('#' + currentID).width(currentWidth);
$('#' + currentID).width(currentHeight);
});
$('fixed_column_cells').css('position', 'fixed');
Currently facing challenges