Collapsed view of columns

nitinb82

Hi,
Is there a way for me to show a collapsed view of first few columns of a DataTable?
So, by default, I want to show the first five columns and when the user clicks on something like "full view" (a small button somewhere appropriate on the page), all the remaining columns appear.
If the above is not possible, is there any other workaround it to achieve the same thing?
Thanks!

kthorngren

The column visibility button from the Buttons Extension may work for you. Here are some examples:
https://datatables.net/extensions/buttons/examples/column_visibility/index.html

Kevin

nitinb82

Thanks, Kevin, grouping columns will do exactly what I want to achieve. However, I am having trouble making it work. Here is my Javascript. There are about 50 columns in my table out of which "small view" will only show the first 2. Does the presence of two dom have any effect? Can you please tell me what is wrong with the following script? I am a beginner at DataTables.
Thanks!

                $(document).ready(function() {
                      $('#samples').DataTable({
                       "columnDefs": [{"width": "10%", "targets":1}],
                       "order": [[ 7, "desc" ]],
                       "bJQueryUI": true,
                       "sPaginationType": "full_numbers",
                       "bDestroy": true,
                       "bSort": true,
                       "bFilter": true,
                       "responsive": true,
                       "dom": 'B<"clear">lfrtip',
                       "buttons": ['csv', 'excel']
                       "dom": 'Bfrtip',
                       "buttons": [
                           {
                               extend: 'colvisGroup',
                               text: 'Small',
                               show: [ 1, 2 ]
                           },
                           {
                               extend: 'colvisGroup',
                               text: 'Show all',
                               show: ':hidden'
                           }
                       ]
                    });
                     
                } );

kthorngren

However, I am having trouble making it work

What is not working?

Does the presence of two dom have any effect?

In general with Datatables initialization the second config option will overwrite the first. Having two 'dom' options should affect column visibility.

Kevin

nitinb82

Thanks, Kevin, I figured it out. Somehow having two dom was interfering. I removed the first one and it worked out.
One more question though: when I hide some of the columns, the remaining columns just expand to take the newly created space. Is there a way for the columns to shift left instead of expanding so that more columns are visible in the same window size?
Thanks again!

nitinb82

I thought that responsive: true, will do the trick but it does not. The columns still expand to take the space of the hidden columns.
Thanks for your help, Kevin!

kthorngren

If you like the responsive type behavior you could use the Child Row Details to display the desired hidden columns:
https://datatables.net/examples/api/row_details.html

You would code the format function to display only the hidden columns you want to display. The columns().visible() might be the API to use to determine the hidden columns.

Kevin