<section class="Prose u-layout-prose">
    <h2 id="description">repellat excepturi autem</h2>
    <p>Hic ea et illo sit consequatur maiores ut tenetur. Tenetur consectetur et voluptatem recusandae. Delectus exercitationem suscipit dolore quidem. Inventore neque inventore possimus deserunt. Saepe quos aliquid ad id nam. Architecto facilis minus debitis
        et voluptatem aut.</p>

    <table class="Table Table--withBorder Table--compact u-text-r-xxs" aria-describedby="description">
        <thead>
            <tr class="u-border-bottom-xs">
                <th>Tab. 1</th>
                <th>Tab. 2</th>
                <th>Tab. 3</th>
                <th>Tab. 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tab. 1</td>
                <td>Tab. 2</td>
                <td>Tab. 3</td>
                <td>Tab. 4</td>
            </tr>
            <tr>
                <td>Tab. 1</td>
                <td>Tab. 2</td>
                <td>Tab. 3</td>
                <td>Tab. 4</td>
            </tr>
            <tr>
                <td>Tab. 1</td>
                <td>Tab. 2</td>
                <td>Tab. 3</td>
                <td>Tab. 4</td>
            </tr>
            <tr>
                <td>Tab. 1</td>
                <td>Tab. 2</td>
                <td>Tab. 3</td>
                <td>Tab. 4</td>
            </tr>
        </tbody>
    </table>

</section>
  • Content:
    /** @define Table; */
    
    /*
     *	Fork of suitcss-component-table:
     *
     * 		https://github.com/trunkclub/suitcss-components-table
     * 		Copyright (c) 2014 Trunk Club
     *
     *  alas, not included in npm registry.
     *
     */
    
    /** @define Table; weak; */
    
    :root {
      --Table-border-color: #d6dce3;
      --Table-cell-pad-h: 0.5em;
      --Table-cell-pad-v: 1em;
      --Table-hover-color: #e5f1fa;
      --Table-stripe-color: #f6f7f9;
    }
    
    .Table {
      border: 0;
      border-collapse: collapse;
      max-width: 100%;
      width: 100%;
    }
    
    /*
     *  [1] Don't extend utility class to make it overridable
     */
    
    .Table td,
    .Table th {
      @extend .u-padding-r-all;
    
      text-align: left; /* 1 */
    }
    
    .Table--fixed {
      table-layout: fixed;
    }
    
    /* Hover row modifiers
       ========================================================================== */
    
    .Table--hover > tbody > tr:hover > th,
    .Table--hover > tbody > tr:hover > td {
      background-color: var(--Table-hover-color);
    }
    
    /* Striped row modifiers
       ========================================================================== */
    
    /**
     * Remove top borders on all cells.
     */
    
    .Table--striped th,
    .Table--striped td {
      border-top: 0;
    }
    
    .Table--striped tbody tr:nth-child(odd) {
      background-color: var(--Table-stripe-color);
    }
    
    /* Border modifiers
       ========================================================================== */
    
    /**
     * Add border around table
     */
    
    .Table--withBorder tr {
      border-bottom: 1px var(--Table-border-color) solid;
    }
    
    .Table--withBorder th {
      border-top: 1px var(--Table-border-color) solid;
    }
    
    .Table--withBorder thead tr:first-child th,
    .Table--withBorder thead tr:first-child td {
      border-top: 0;
    }
    
    /* Compact layout modifier
       ========================================================================== */
    
    /**
     * Reduce vertical padding to match horizontal
     */
    
    .Table--compact td,
    .Table--compact th {
      padding: var(--Table-cell-pad-h);
    }
    
  • URL: /components/raw/table/index.css
  • Filesystem Path: src/components/table/index.css
  • Size: 1.9 KB
  • Content:
    import $ from 'jquery'
    
    const opts = {
      responsiveTableSelector: '.js-TableResponsive'
    }
    
    $(document).ready(() => {
      if ($(opts.responsiveTableSelector).length > 0) {
        require(['tablesaw/dist/tablesaw.jquery.js', 'tablesaw/dist/tablesaw.css'], () => {
          $(document).trigger('enhance.tablesaw')
        })
      }
    })
    
  • URL: /components/raw/table/index.js
  • Filesystem Path: src/components/table/index.js
  • Size: 317 Bytes

There are no notes for this item.