ng2-encrm-components/src/app/element-list/elements/table-preview/table-preview.component.html

angular 2 components

<div class="col-xs-12">
  <h1 id="table">Table</h1>
  <table class="table table-striped table-hover">
    <thead>
    <tr>
      <th>
        <label class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input">
          <span class="custom-control-indicator"></span>
        </label>
      </th>
      <th>NAZWA ODDZIAŁU</th>
      <th>ULICA</th>
      <th>KOD</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">
        <label class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input">
          <span class="custom-control-indicator"></span>
        </label>
      </th>
      <td>Eniro Sp. z o.o. <strong>CENTRALA</strong></td>
      <td>ul. Raciborska 12/50</td>
      <td>90-670 Warszawa</td>
    </tr>
    <tr>
      <th scope="row">
        <label class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input">
          <span class="custom-control-indicator"></span>
        </label>
      </th>
      <td>Eniro Sp. z o.o.</td>
      <td>ul. Raciborska 12/50</td>
      <td>90-670 Warszawa</td>
    </tr>
    <tr>
      <th scope="row">
        <label class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input">
          <span class="custom-control-indicator"></span>
        </label>
      </th>
      <td>Jakaś bardzo długa nazwa firmy Sp. z o.o.</td>
      <td>ul. Raciborska 12/50</td>
      <td>90-670 Warszawa</td>
    </tr>
    </tbody>
  </table>
  <br>
  <tabset>
    <tab heading="HTML">
            <pre><code highlight class="html">&lt;table class=&quot;table table-striped table-hover&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;
        &lt;label class=&quot;custom-control custom-checkbox&quot;&gt;
          &lt;input type=&quot;checkbox&quot; class=&quot;custom-control-input&quot;&gt;
          &lt;span class=&quot;custom-control-indicator&quot;&gt;&lt;/span&gt;
        &lt;/label&gt;
      &lt;/th&gt;
      &lt;th&gt;NAZWA ODDZIA&#x141;U&lt;/th&gt;
      &lt;th&gt;ULICA&lt;/th&gt;
      &lt;th&gt;KOD&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;row&quot;&gt;
        &lt;label class=&quot;custom-control custom-checkbox&quot;&gt;
          &lt;input type=&quot;checkbox&quot; class=&quot;custom-control-input&quot;&gt;
          &lt;span class=&quot;custom-control-indicator&quot;&gt;&lt;/span&gt;
        &lt;/label&gt;
      &lt;/th&gt;
      &lt;td&gt;Eniro Sp. z o.o. &lt;strong&gt;CENTRALA&lt;/strong&gt;&lt;/td&gt;
      &lt;td&gt;ul. Raciborska 12/50&lt;/td&gt;
      &lt;td&gt;90-670 Warszawa&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;row&quot;&gt;
        &lt;label class=&quot;custom-control custom-checkbox&quot;&gt;
          &lt;input type=&quot;checkbox&quot; class=&quot;custom-control-input&quot;&gt;
          &lt;span class=&quot;custom-control-indicator&quot;&gt;&lt;/span&gt;
        &lt;/label&gt;
      &lt;/th&gt;
      &lt;td&gt;Eniro Sp. z o.o.&lt;/td&gt;
      &lt;td&gt;ul. Raciborska 12/50&lt;/td&gt;
      &lt;td&gt;90-670 Warszawa&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;row&quot;&gt;
        &lt;label class=&quot;custom-control custom-checkbox&quot;&gt;
          &lt;input type=&quot;checkbox&quot; class=&quot;custom-control-input&quot;&gt;
          &lt;span class=&quot;custom-control-indicator&quot;&gt;&lt;/span&gt;
        &lt;/label&gt;
      &lt;/th&gt;
      &lt;td&gt;Jaka&#x15b; bardzo d&#x142;uga nazwa firmy Sp. z o.o.&lt;/td&gt;
      &lt;td&gt;ul. Raciborska 12/50&lt;/td&gt;
      &lt;td&gt;90-670 Warszawa&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
    </tab>
    <tab heading="TypeScript">
      <pre><code highlight class="typescript">none</code></pre>
    </tab>
  </tabset>
</div>