I am currently using Datatables to showcase a large dataset with over a thousand rows in a table format. To enable users to search for specific information within each column, I have implemented the feature of individual column search. The initial setup of the table involves the following code:
var table = $('#example').DataTable( {
"scrollX": true,
"scrollY": "400px",
"paging": false
});
However, upon performing a search within a column, I noticed that the second left column gets overshadowed by the first fixed column. This issue arises due to the resizing of columns after each search query. Previously, the first column accommodated longer usernames, but post-search, its width got reduced.
I attempted to resolve this matter by adding a right margin to the first column, unfortunately, it did not yield the desired outcome.
If you have any suggestions or solutions on how to tackle this problem effectively, kindly share your thoughts.
To better illustrate the issue, please refer to the provided jsfiddle demonstration accessible here. Simply search for "J" under 'career' to witness the discrepancy firsthand.