Web Components Library

Tables

To do

  • table with dropdown select to switch columns on mobile
<div class="text-styling">

    <table>
        <thead>
            <tr>
                <th>Crop</th>
                <th>Minimum Temperature</th>
                <th>Ideal Temperature</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td valign="top">
                    <p>Canola</p>
                </td>
                <td valign="top">
                    <p>3 degrees C</p>
                </td>
                <td valign="top">
                    <p>5 degrees C</p>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <p>Wheat</p>
                </td>
                <td valign="top">
                    <p>4 degrees C</p>
                </td>
                <td valign="top">
                    <p>5 degrees C</p>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <p>Barley</p>
                </td>
                <td valign="top">
                    <p>4 degrees C</p>
                </td>
                <td valign="top">
                    <p>5 degrees C</p>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <p>Peas</p>
                </td>
                <td valign="top">
                    <p>4 degrees C</p>
                </td>
                <td valign="top">
                    <p>5 degrees C</p>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <p>Lentils</p>
                </td>
                <td valign="top">
                    <p>4 degrees C</p>
                </td>
                <td valign="top">
                    <p>5 degrees C</p>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <p>Beans</p>
                </td>
                <td valign="top">
                    <p>10 degrees C</p>
                </td>
                <td valign="top">
                    <p>10 degrees C</p>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <p>Sugar Beets</p>
                </td>
                <td valign="top">
                    <p>5 degrees C</p>
                </td>
                <td valign="top">
                    <p>5 degrees C</p>
                </td>
            </tr>
        </tbody>
    </table>

</div>
  • Content: 
    table {
  @apply table-auto mb-6 w-full;

  th,
  td {
    @apply px-4 py-2;
  }

  th {
    @apply text-left;
  }

  tbody {
    tr {
    }

    tr:nth-child(2n-1) {
      @apply bg-gray-200;
    }

    tr:nth-child(2n) {
      @apply bg-gray-100;
    }

    td {
      @apply border;
    }
  }

  p {
    @apply mb-0;
  }
}
  • URL: /components/raw/tables/tables.css
  • Filesystem Path: components/02-components/tables/tables.css
  • Size: 326 Bytes
  • Content: 
    // Wrapper function, not working...

function wrap(top, selector, bottom){
    var matches = document.querySelectorAll(selector);
    for (var i = 0; i < matches.length; i++){
      var modified = top + matches[i].outerHTML + bottom;
      matches[i].outerHTML = modified;
    }
  }
  
  // Wrap all tables in .text-styling with a div.overflow-x-scroll wrapper
  wrap("<div class='overflow-x-scroll pr-1'>", ".text-styling table", "</div>");
  • URL: /components/raw/tables/tables.js
  • Filesystem Path: components/02-components/tables/tables.js
  • Size: 441 Bytes 
<div class="text-styling">

    <table>
    <thead>
        <tr>
            <th>Crop</th>
            <th>Minimum Temperature</th>
            <th>Ideal Temperature</th>
            </tr></thead><tbody><tr>
                <td valign="top"><p>Canola</p></td>
                <td valign="top"><p>3 degrees C</p></td>
                <td valign="top"><p>5 degrees C</p></td>
            </tr><tr>
                <td valign="top"><p>Wheat</p></td>
                <td valign="top"><p>4 degrees C</p></td>
                <td valign="top"><p>5 degrees C</p></td>
            </tr><tr>
                <td valign="top"><p>Barley</p></td>
                <td valign="top"><p>4 degrees C</p></td>
                <td valign="top"><p>5 degrees C</p></td>
            </tr><tr>
                <td valign="top"><p>Peas</p></td>
                <td valign="top"><p>4 degrees C</p></td>
                <td valign="top"><p>5 degrees C</p></td>
            </tr><tr>
                <td valign="top"><p>Lentils</p></td>
                <td valign="top"><p>4 degrees C</p></td>
                <td valign="top"><p>5 degrees C</p></td>
            </tr><tr>
                <td valign="top"><p>Beans</p></td>
                <td valign="top"><p>10 degrees C</p></td>
                <td valign="top"><p>10 degrees C</p></td>
            </tr><tr>
                <td valign="top"><p>Sugar Beets</p></td>
                <td valign="top"><p>5 degrees C</p></td>
                <td valign="top"><p>5 degrees C</p></td>
            </tr>
        </tbody>
    </table>
    
</div>
 
/* No context defined. */