Sticky header and freezing first column#151

Hi I would like to be able to have a sticky header when scrolling and being able to freeze first column as I have a lot of data and it is easier for customers to see what is going on. I am migrating from another table plugin and my users are already complaining that this featuer is not available as they are used to it.

Thanks!

+100 to this. I’m also looking for sticky table header/first row and first column feature. We really really really need this and your other competitor provide this feature.

I really like this plugin and I don’t want to switch to any different plugin only becuase we have no this important feature. :(

Please conside adding this feature asap. :)

1000+ for this, freezing 1st colum is a must for Gaming industry Ranking tables

Dear developers I am currently in a position where without freezing the first column option for me the Table is nearly useless, Same as Funktion One comment above, Gaming industry Leaderboards impossibile without freezing the first column.

Fixing first column should come by default

This is a crucial feature for many table applications. This plugin allows for large tables, but you can’t lock in the header or first column as a reference for the user, making it a problem if the columns aren’t readily distinguishable visually.

It has come up many times on your ticket forums but the reply is always for you to share some custom JS code from a user. I can’t get this code to do anything for me and your employees have answered other people that they can’t troubleshoot custom solutions. People have been asking for this in tickets for at least 5 years and I see several upvoted threads about this in this features forum. Are there any plans to implement this?

https://tmsplugins.ticksy.com/search/?q=fixed+header
2017: https://tmsplugins.ticksy.com//ticket/1299081/

I agree this should be a built in option for a paid product. As an ok work around you can make it work with wpdatatables custom CSS option.

Step 1. Go to the settings of the column you want to be sticky/freeze. In the Display tab go to CSS class(es) and call this what ever you want. For example my_column and hit save changes. Note the table ID in the shortcode near the top.

Step 2. Click on the NEW! Customise tab at the top, and then click custom CSS.

Step 3. Paste the following code changing to your table id and column name (set in step 1).

.wpDataTables .wpDataTableID-1 tbody tr .my_column position: sticky;
position: -webkit-sticky;
left: 0;
z-index: 1;
}

.wpDataTables .wpDataTableID-1 thead tr .my_column position: sticky;
position: -webkit-sticky;
left: 0;
z-index: 1;
}

Include ‘position: sticky;’ in the above code it wont let me paste it in for some reason…

I done the same thing with some thing change with code “{“. It worked perfectly.
Step 1. Go to the settings of the column you want to be sticky/freeze. In the Display tab go to CSS class(es) and call this what ever you want. For example my_column and hit save changes. Note the table ID in the shortcode near the top.

Step 2. Click on the NEW! Customise tab at the top, and then click custom CSS.

Step 3. Paste the following code changing to your table id and column name (set in step 1).

.wpDataTables .wpDataTableID-1 tbody tr { .my_column position: sticky;
position: -webkit-sticky;
left: 0;
z-index: 1;
}

.wpDataTables .wpDataTableID-1 thead tr { .my_column position: sticky;
position: -webkit-sticky;
left: 0;
z-index: 1;
}

Thanks! How can I freeze the top row now (header row)?

Hi Northstar Badcharts,

as soon as we release this feature, you’ll have all the instructions in the documentation.

Thanks a lot!! I will test new release as soon as possible!! 😍