title: Simple expandable table with Blazor
body: <p>I want to create a simple expandable table in Blazor WebAssembly. I added some HTML code like the following:</p>
  <pre><code>&lt;table class=&quot;table table-hover&quot;&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;#&lt;/th&gt;
        &lt;th&gt;User&lt;/th&gt;
        &lt;th&gt;Date&lt;/th&gt;
        &lt;th&gt;Status&lt;/th&gt;
        &lt;th&gt;Reason&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr data-widget=&quot;expandable-table&quot; aria-expanded=&quot;false&quot;&gt;
        &lt;td&gt;183&lt;/td&gt;
        &lt;td&gt;John Doe&lt;/td&gt;
        &lt;td&gt;11-7-2014&lt;/td&gt;
        &lt;td&gt;Approved&lt;/td&gt;
        &lt;td&gt;Lorem Ipsum is simply dummy text&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class=&quot;expandable-body&quot;&gt;
        &lt;td colspan=&quot;5&quot;&gt;
          &lt;p&gt;
            Lorem Ipsum is simply dummy text
          &lt;/p&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>The row with details is always collpased also if I click on it. Is there a simple way to implement it without using external component? If no, what component do you recommend?</p>
  <p>An example of what I mean with &quot;Expandable table&quot; is <a href="https://adminlte.io/themes/v3/pages/tables/simple.html" rel="nofollow noreferrer">here</a>.</p>