Switch responsive table on/off

Kalle504

Hi,

I have a few things I wolder if it is possible to do with this table:

1) I would like to use a button to switch responsive off/on. When on only the first column should be shown. My datatable will be dynamic so I can not put something in the html code because the table will sometimes be droped and created again.

2) When the table is responsive "on", it is possible to make the contents with less font?

3) When the table is responsive "on", it is possible expand all items as default?

I have lokked at this example, http://live.datatables.net/qinogeyu/74/edit, but I do not know how do adopt to my wishes

//Kalle

colin

Responsive doesn't have an option to enable or disable it after initialisation, I'm afraid. You can only determine it at initialisation. You could use stateSave perhaps, and re-initialise the table - as that would keep the paging, ordering and filters.

Colin

Kalle504

Hello Colin, thanks you for your time. I have done som work and here is what I have come up with:

https://jsfiddle.net/hstcpj4b/

The only thnk I would like to do more is to only display the first column then the table is in responsive mode. This table will be dynamic so I do not know how many columns that will be displayed in the table.

Do you know if there are any way to display only the first column with some javascripot code ? I can nor use Class Controls as the table will be dropped and created again with data (column and rows).

Kalle

Kalle504

Hello again,

Is it possible to reduce the row height? Remove lines? See picture

colin

If you're only showing a single column, then I'd ditch Responsive and just go with child rows - see example here. They look similar, but the screen size has no effect.

You can still do the same click to show/collapse all, but you would only define the single column in the table initialisation,

Colin

allan

Just to add what Colin said there - yes, you can reduce the height and remove the lines. That is done with CSS. I would suggest you right click and "Inspect" the elements to see what styling is applied at the moment and what styles / selectors you want to apply.

Allan

Kalle504

Hello Allan/Colin,

Thanks for your time!. I'm quite new to ccs so I do not know hw to do it. I would appreciate some help alot to change the height and remove the lines. I hope you got some time.

Kalle

Kalle504

Thanks Allan/Colin, I found it!

border-bottom: none !important;
padding: 0em 0 !important;

Kalle