CODEWITHSUNDEEP
javascriptjquerydatatables
user2988257
user2988257

Reputation: 961

DataTables Colvis Responsive

Looking how to combine datatables colvis extension and responsive. Search that in past versions it was impossible. Wondering if there's a progress or if somebody found a way to make them work together. What i'm looking to do: keep responsive ability of the table (to shrink and extend on different window sizes) and to be able to select what columns will be visible. For now i can make desired column to be hidden, but when changing window size all columns became visible and responsive overrides the colvis settings.

Upvotes: 1

Views: 2973

Answers (2)

R J
R J

Reputation: 515

 public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "table";
            output.Attributes.Add("id", Id);
            output.Attributes.Add("class", "table table-hover table-responsive-md");
            output.Attributes.Add("width", "100%");

            var props = GetItemProperties();
            var include = GetIncludeProperties();

            TableHeadBuilder(output, props, include);
        }

Use output.Attributes.Add("width", "100%"); in the table view html. No need to use responsive in side the script. The above example shows for using TagHelper.

Upvotes: 0

jezrael
jezrael

Reputation: 863791

I found solutions for implementing Buttons extension with Column visibility and Responsive extension. You have to use Buttons extension, because Colvis is retired.

First solution is add both extension together, it works. Link.
Only you need set width of table to 100%. 

<table id="example" class="display" cellspacing="0" width="100%">

$('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'colvis'
    ],
    responsive: true
} );

Next solution: Link
You have to add responsive classes to tag table and in JavaScript call only Buttons colvis extension.

<table id="example" class="display responsive nowrap" width="100%">

$(document).ready( function () {
  var table = $('#example').DataTable({
    dom: 'Bfrtpi',
    buttons: [
        'colvis',
        'colvisRestore'
    ],
    columns: [
      null,
      {visible: false}
    ]
  });
});

Testing is easy - After click to button Column visibility try change width of output div (or your browser window) and columns are hiding or showing by width of window.

Upvotes: 0

Related Questions