Search code examples
angulardatagridclarityvmware-clarity

Hide the caret column on expandable Datagrid with VMWare Clarity Design with Angular2+

I'm using the VMWare Clarity Datagrid component.

Description:

I have two datagrids and I managed to expand the right one (blue) when expanding one of the rows of the left datagrid (red).

My GOALS:

  1. Hide the caret column on the right datagrid and still be able to expand its rows. When I add the display: none; rule in the .datagrid .datagrid-expandable-caret class in the browser it works fine but in the .scss file it doesn't.
  2. Hide the scroll of the left datagrid (red) and still be able to scroll.
  3. Sync the scroll of both datagrids (maybe using third party code).

Here I made a plunker with the example in angular2+.

.right-div {
   float: left;
   height:315px;
   width: 500px;
   border: 4px solid cornflowerblue;

   .datagrid .datagrid-expandable-caret {
       padding: 2px 4px 3px;
       text-align: center;
       display: none;
   }
}

Thanks for every suggestion.

Solution

  • The reason it doesn't work when adding it to your own component's styles is that the .datagrid-expandable-caret element is in the datagrid's shadow DOM. See https://angular.io/guide/component-styles#view-encapsulation for more explanation.

    What that means is you have 2 solutions, which are equivalent:

    1. Have these styles in a global CSS stylesheet, so that they can apply to the "emulated" shadow DOM.
    2. Use encapsulation: ViewEncapsulation.None on your component to achieve the same result.

    Here is an updated version of your plunker that shows the second solution working: https://plnkr.co/edit/ss3y1P?p=preview