Hiding columns with bootstrap using angular ui.grid

Question

I need to use ui-grid in angular js and I was doing a little test to hide the columns based on bootstrap classes. For exampl consider having a table with 100 columns but on mobile you want to show only 3 of them.

This is a plunker

http://plnkr.co/edit/9TGp1vPZeOfKLjzezgUv?p=preview

I'm using:

cellClass:"hidden-sm",headerCellClass:"hidden-sm"

as you see the column is not shown but the grid is still taking all the space.

Any help?

Rob Sedgwick Rob Sedgwick · Accepted Answer · 2017-02-16T12:18:55

ui grid just doesn't seem to support resizing using css. You have to use its own methods to set visibility.

    function setColumnVisibility() {
        if (($(window).width()) <= 768) {
            $scope.gridOptions.columnDefs[1].visible = false;
            $scope.gridOptions.columnDefs[2].visible = false;
            $scope.gridOptions.columnDefs[4].visible = false;
        }

        if (($(window).width()) <= 992) {
            $scope.gridOptions.columnDefs[5].visible = false;
            $scope.gridOptions.columnDefs[7].visible = false;
        }
    }

    setColumnVisibility();

    $(window).resize(function() {
        setColumnVisibility();
    });

Hiding columns with bootstrap using angular ui.grid

2 Answers