title: Change the style of a GWT CellTable dynamically, to visually mark it as disabled
body: <p>I'm looking for a way to dynamically change the style of a GWT CellTable at runtime.  I want to make the table look "disabled" by graying the color scheme, to match up with other input fields that are disabled.  Right now, I can prevent people from using the table, but they don't get any visual hint.</p>
  
  <p>I have a resource bundle to set the style of the table, like described <a href="https://code.google.com/p/google-web-toolkit/issues/detail?id=6144" rel="nofollow noreferrer">here</a> and <a href="https://stackoverflow.com/questions/7369356/celltables-and-css-gwt">here</a>:</p>
  
  <pre><code>public interface DataTableStyle extends CellTable.Resources {
      @Override
      @Source({ CellTable.Style.DEFAULT_CSS, "DataTable.css" })
      CellTable.Style cellTableStyle();
  }
  </code></pre>
  
  <p>That's passed into the constructor, and has been working fine for a while now:</p>
  
  <pre><code>public DataTable(int pageSize) {
      super(pageSize, getStyle());
  }
  
  protected static DataTableStyle getStyle() {
      return GWT.create(DataTableStyle.class);
  }
  </code></pre>
  
  <p>What I can't figure out is how to dynamically adjust the style of the table at runtime.  I'm not sure whether it's not possible, or whether I'm just missing something.</p>
  
  <p>I'm pretty sure that I can't change the style resources attached to the cell table once they're set.  Since I can't do that, it seems like I should be able to use either <code>addStyleDependentName()</code> or <code>addStyleName()</code> in combination with additional CSS styles, but I can't figure out the right combination of changes.</p>
  
  <p>To test, I tried to override my existing definition of <code>.cellTableHeader</code>.  I know that I'm targeting the right style, because if I change <code>background: #000000</code> to <code>background: magenta</code> in the original style, it works.</p>
  
  <pre><code>.cellTableHeader {
      background: #000000;
      color: #ffffff;
      text-shadow: none;
  }
  </code></pre>
  
  <p>One example I worked off of is <a href="https://groups.google.com/forum/#!topic/google-web-toolkit/Q1rwV4vDgy0" rel="nofollow noreferrer">here</a>.  That page suggests using CSS like this:</p>
  
  <pre><code>.cellTableHeader.cellTable-disabled {
      background: magenta; /* just to make it obvious */
  }
  </code></pre>
  
  <p>Then, in my code:</p>
  
  <pre><code>userTable.addStyleDependentName("disabled")
  </code></pre>
  
  <p>By itself, the <code>.cellTableHeader.cellTable-disabled</code> style results in a runtime error: </p>
  
  <pre><code>The following unobfuscated classes were present in a strict CssResource:
  cellTable-disabled
  Fix by adding String accessor method(s) to the CssResource interface for obfuscated classes, or using an @external declaration for unobfuscated classes. 
  </code></pre>
  
  <p>The <a href="https://stackoverflow.com/questions/1701651/gwt-2-cssresource-how-to">recommended</a> workarounds are either to use <code>@external</code> on the style or annotate <code>@NotStrict</code> on the resource bundle.  Both of those get me past the runtime error, but the style doesn't take effect.  I've also tried various other things:</p>
  
  <pre><code>.cellTableHeader.disabled {
      background: magenta; /* just to make it obvious */
  }
  </code></pre>
  
  <p>or </p>
  
  <pre><code>.cellTableHeader .disabled {
      background: magenta; /* just to make it obvious */
  }
  </code></pre>
  
  <p>or</p>
  
  <pre><code>.cellTableHeader disabled {
      background: magenta; /* just to make it obvious */
  }
  </code></pre>
  
  <p>but at this point I'm really just grasping at straws.  </p>