My table from Google Sheets API has many columns and they do not have enough space inside the container on my website. How can I make the rows collapsable so that only 1 or 2 columns are visible and the rest can be seen only when you click on a plus sign for the collapse? Thanks. Something like this:
You could have the columns collapse by increasing the screen size of mobile and tablet devices set in the main wpDataTables settings.
This will show the + button for all screen sizes lower than what you set in the settings, so setting a very high number would be the best.
To modify the width of columns, you need to go to the Display tab above the table, disable "Scrollable" feature (if it is on), and enable "Limit table width". That will allow you to modify the width of each column in column settings.
To show string type values in separate rows you would have to create a multi-line string type column and add those values one under the other.
I did increase as you mentioned, but it does not change to plus sign. I checked on mobile and desktop. I changed to as high as 10000 but still no effect.
Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.
Please let me know where exactly this function is not working; we noticed that there is a CSS conflict with ElementsKit Lite plugin:
Hello
My table from Google Sheets API has many columns and they do not have enough space inside the container on my website. How can I make the rows collapsable so that only 1 or 2 columns are visible and the rest can be seen only when you click on a plus sign for the collapse? Thanks. Something like this:
https://ifooty.net/predictions
Hi Edwin,
thank you for reaching out to us
Is this for desktop as well?
You could have the columns collapse by increasing the screen size of mobile and tablet devices set in the main wpDataTables settings.
This will show the + button for all screen sizes lower than what you set in the settings, so setting a very high number would be the best.
To modify the width of columns, you need to go to the Display tab above the table, disable "Scrollable" feature (if it is on), and enable "Limit table width". That will allow you to modify the width of each column in column settings.
To show string type values in separate rows you would have to create a multi-line string type column and add those values one under the other.
Hello
I did increase as you mentioned, but it does not change to plus sign. I checked on mobile and desktop. I changed to as high as 10000 but still no effect.
Hi Edwin,
thank you for the kind reply!
Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.
Please let me know where exactly this function is not working; we noticed that there is a CSS conflict with ElementsKit Lite plugin:
please check my website https://footywow.com ... I have put high numbers for the width as you mentioned but still not collapsable...
Hi Edwin,
thank you for the link
I have forwarded it to our developer, and I will contact you back with his advice.