But only with exportOptions { columns: [':visible'], rows: [':visible']} in the code instead of exportOptions: { rows: [':visible']}, which you seem to have given in the example, as it still copies hidden columns to the clipboard.
I've also implemented a rough fix for the hidden thead that takes up space
This is awesome, and so simple in the scheme of things. Is there an easy way to control which view is shown on page load? i.e. have the table load in card view?
The example is very useful! How can make the card view in center position? Besides, how can set the card view as default mode when the page is loaded? Thanks!
Hi everyone, thank you for this topic it's so helpful !!
However, I am stuck on one thing:
How can I get the amount of columns to adapt window's width ?
It sounds simple but unless I refresh the page, my table width doesn't adapt.
Just like here: https://ghsfha.org/datatables_cards_button.html
@kthorngren
Thanks for the prompt reply. I tried but it doesn't work, I tried adding this 100% width to every possible div and to the table but it just doesn't want to react to window resizing.
Would any of those prevent the inline style from working?
Added style="width:100%" to the table tag and it resizes with the web page. However there is a point where the web page width won't display all the columns so the table overflows. You can use scrollX or the Responsive extension for this.
Thank you @kthorngren !!
The above example wasn't actually my code, just a similar example, but you made me notice that I was using a previous version of css/js datatables files.
I updated them and now it works fine
Hi All,
Thanks to all for your great tips.. I was able to create my "simple recipe" page where I keep all my recipes
I wanted to keep the paging so I changed the datable setup like this, in case anyone may be interested, also moved the search field to the left as I find it more convenient.
Hi everyone,
congratulations on a great job of presenting data in card view. It really works great!
I will add some code to improve the project as well.
How can make the card view in center position?
Just add into the buttons action function this code $("tbody").toggleClass("row").toggleClass("justify-content-center");
Replies
@gyrocode yes that css rule does work, thank you.
But only with
exportOptions { columns: [':visible'], rows: [':visible']}
in the code instead ofexportOptions: { rows: [':visible']}
, which you seem to have given in the example, as it still copies hidden columns to the clipboard.I've also implemented a rough fix for the hidden thead that takes up space
example: https://jsfiddle.net/suwznyaf/
This is awesome, and so simple in the scheme of things. Is there an easy way to control which view is shown on page load? i.e. have the table load in card view?
Looks like you will need to add the calls
cards
to thetable
tag. TherowCallback
converts to card mode if thetable
has the classcards
.Kevin
The example is very useful! How can make the card view in center position? Besides, how can set the card view as default mode when the page is loaded? Thanks!
Remove the
float: left
from this CSS:Add the class
cards
to thetable
tag.Kevin
Hi everyone, thank you for this topic it's so helpful !!
However, I am stuck on one thing:
How can I get the amount of columns to adapt window's width ?
It sounds simple but unless I refresh the page, my table width doesn't adapt.
Just like here:
https://ghsfha.org/datatables_cards_button.html
But in this example, it works:
https://web.archive.org/web/20170605170544/azguys.com/datatables/index.html
What am I missing?
Thanks you!
@gegeon The
table
looks like this:Try adding
style="width:100%"
as shown in this example.Kevin
@kthorngren
Thanks for the prompt reply. I tried but it doesn't work, I tried adding this 100% width to every possible div and to the table but it just doesn't want to react to window resizing.
Would any of those prevent the inline style from working?
@gegeon Your example wasn't updated so I moved your code here:
http://live.datatables.net/kesehabo/1/edit
Added
style="width:100%"
to thetable
tag and it resizes with the web page. However there is a point where the web page width won't display all the columns so the table overflows. You can usescrollX
or the Responsive extension for this.Kevin
Thank you @kthorngren !!
The above example wasn't actually my code, just a similar example, but you made me notice that I was using a previous version of css/js datatables files.
I updated them and now it works fine
Hi All,
Thanks to all for your great tips.. I was able to create my "simple recipe" page where I keep all my recipes
I wanted to keep the paging so I changed the datable setup like this, in case anyone may be interested, also moved the search field to the left as I find it more convenient.
Hi,
very new to CSS/styling. How can I make this the default view?
@DA84, just includes the cards class in your table from the start.
Hi everyone,
congratulations on a great job of presenting data in card view. It really works great!
I will add some code to improve the project as well.
How can make the card view in center position?
Just add into the buttons action function this code
$("tbody").toggleClass("row").toggleClass("justify-content-center");
If you have added class
cards
intable
to make card view the default mode, you have also to add manually the above classes totbody
https://live.datatables.net/mirazamo/1/edit
Enjoy, thanks!
Clever solution with the Bootstrap classes - like it!
Allan