Copy environment

Table 

<div class="table  ">
    <table class="table__table tablesaw" data-tablesaw-sortable>
        <tbody class="table__body">
            <tr class="table__row">
                <th class="table__item" scope="row">Platvormi kõrgus</th>
                <td class="table__item">8,00m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Töötamiskõrgus</th>
                <td class="table__item">10,00m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Tõstevõime</th>
                <td class="table__item">350 kg</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Platvormi pikkus / koospikendusega</th>
                <td class="table__item">2,31m / 3,23m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Platvormi laius</th>
                <td class="table__item">0,81m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Laadimistoide</th>
                <td class="table__item">230V</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Aku</th>
                <td class="table__item">24V – 225Ah (C20)</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Vedu</th>
                <td class="table__item">2WD</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Mittemäärivad rehvid</th>
                <td class="table__item">Jah</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Tugijalad</th>
                <td class="table__item">Ei</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Transpordi pikkus</th>
                <td class="table__item">2,31m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Transpordi laius</th>
                <td class="table__item">0,81m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Transpordi kõrgus</th>
                <td class="table__item">1,32m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Pikkus</th>
                <td class="table__item">3,14m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Laius</th>
                <td class="table__item">0,81m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Kaal</th>
                <td class="table__item">2 190kg</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Juhend</th>
                <td class="table__item"><span class="text-truncate"><a href="#">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr LV.pdf</a></span></td>
            </tr>
        </tbody>
    </table>
</div>
 
<div class="table {{ class }} {{ modifier }}">
    <table class="table__table tablesaw" data-tablesaw-sortable>
        {% if data.headers %}
            <thead class="table__head">
                <tr class="table__row">
                    {% for header in data.headers %}
                        <th class="table__header" scope="col"{% if header.sortable %} data-tablesaw-sortable-col{% endif %}>
                            <span class="table__title text-small">{{ header.title }}</span>
                        </th>
                    {% endfor %}
                </tr>
            </thead>
        {% endif %}
        {% if data.rows %}
            <tbody class="table__body">
                {% for row in data.rows %}
                    <tr class="table__row">
                        {% for cell in row.cells %}
                            {% set element = cell.header ? 'th' : 'td' %}
                            <{{ element }} class="table__item"{% if cell.header %} scope="row"{% endif %}>{{cell.content}}</{{ element }}>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        {% endif %}
    </table>
</div>

{
  "language": "en-US",
  "data": {
    "rows": [
      {
        "cells": [
          {
            "header": true,
            "content": "Platvormi kõrgus"
          },
          {
            "content": "8,00m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Töötamiskõrgus"
          },
          {
            "content": "10,00m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Tõstevõime"
          },
          {
            "content": "350 kg"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Platvormi pikkus / koospikendusega"
          },
          {
            "content": "2,31m / 3,23m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Platvormi laius"
          },
          {
            "content": "0,81m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Laadimistoide"
          },
          {
            "content": "230V"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Aku"
          },
          {
            "content": "24V – 225Ah (C20)"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Vedu"
          },
          {
            "content": "2WD"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Mittemäärivad rehvid"
          },
          {
            "content": "Jah"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Tugijalad"
          },
          {
            "content": "Ei"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Transpordi pikkus"
          },
          {
            "content": "2,31m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Transpordi laius"
          },
          {
            "content": "0,81m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Transpordi kõrgus"
          },
          {
            "content": "1,32m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Pikkus"
          },
          {
            "content": "3,14m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Laius"
          },
          {
            "content": "0,81m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Kaal"
          },
          {
            "content": "2 190kg"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Juhend"
          },
          {
            "content": "<span class=\"text-truncate\"><a href=\"#\">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr LV.pdf</a></span>"
          }
        ]
      }
    ]
  }
}
  • Content: 
    .table {
    width: 100%;
    text-align: left;
}

.table__table {
    width: 100%;
}

.table__item {
    padding: 12px;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;

    @at-root {
        th#{&} {
            background-color: $L-table-header-background;
        }

        tr:nth-child(odd) td#{&} {
            background-color: $L-table-cell-dark-background;
        }

        tr:nth-child(even) td#{&} {
            background-color: $L-table-cell-light-background;
        }
    }
}

.table__row {
    border-top: 1px solid $L-table-border-color;

    &:last-child {
        border-bottom: 1px solid $L-table-border-color;
    }

    .table--no-borders & {
        border: none;
    }
}

.table__title {
    padding: 8px 12px;
    font-weight: $font-weight-medium;
    letter-spacing: $letter-spacing-50;
    text-transform: none;
}

// Tablesaw styling:

.tablesaw-sortable-btn {
    .table & {
        padding: 0;
        background: none;
        color: inherit;
        appearance: none;
        cursor: pointer;
        text-decoration: none;
        border: none;
        outline: none;
        text-transform: uppercase;
        letter-spacing: inherit;
        margin: 0;
        line-height: 2;
        position: relative;
    }

    .table .tablesaw-sortable & {
        &:before,
        &:after {
            display: inline-block;
            right: 0;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            content: '';
        }

        &:before {
            margin-top: 8px;
            position: absolute;
            border-bottom: 5px solid $L-border-medium;
        }

        &:after {
            margin-bottom: 2px;
            vertical-align: text-bottom;
            border-top: 5px solid $L-border-medium;
        }
    }

    .table .tablesaw-sortable-descending & {
        &:before {
            border-bottom-color: $brand-primary;
        }
    }

    .table .tablesaw-sortable-ascending & {
        &:after {
            border-top-color: $brand-primary;
        }
    }
}

.tablesaw-cell-label {
    .table & {
        display: none;
    }
}
  • URL: /components/raw/table/table.scss
  • Filesystem Path: src/patterns/components/table/table.scss
  • Size: 2.2 KB
  • Content: 
    import 'tablesaw/dist/tablesaw.jquery.js';
import 'tablesaw/dist/tablesaw-init.js';

import './table.scss';
  • URL: /components/raw/table/table.ts
  • Filesystem Path: src/patterns/components/table/table.ts
  • Size: 108 Bytes

Sortable 

<div class="table  ">
    <table class="table__table tablesaw" data-tablesaw-sortable>
        <thead class="table__head">
            <tr class="table__row">
                <th class="table__header" scope="col" data-tablesaw-sortable-col>
                    <span class="table__title text-small">Parameeter</span>
                </th>
                <th class="table__header" scope="col" data-tablesaw-sortable-col>
                    <span class="table__title text-small">Väärtus</span>
                </th>
            </tr>
        </thead>
        <tbody class="table__body">
            <tr class="table__row">
                <th class="table__item" scope="row">Platvormi kõrgus</th>
                <td class="table__item">8,00m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Töötamiskõrgus</th>
                <td class="table__item">10,00m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Tõstevõime</th>
                <td class="table__item">350 kg</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Platvormi pikkus / koospikendusega</th>
                <td class="table__item">2,31m / 3,23m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Platvormi laius</th>
                <td class="table__item">0,81m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Laadimistoide</th>
                <td class="table__item">230V</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Aku</th>
                <td class="table__item">24V – 225Ah (C20)</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Vedu</th>
                <td class="table__item">2WD</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Mittemäärivad rehvid</th>
                <td class="table__item">Jah</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Tugijalad</th>
                <td class="table__item">Ei</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Transpordi pikkus</th>
                <td class="table__item">2,31m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Transpordi laius</th>
                <td class="table__item">0,81m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Transpordi kõrgus</th>
                <td class="table__item">1,32m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Pikkus</th>
                <td class="table__item">3,14m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Laius</th>
                <td class="table__item">0,81m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Kaal</th>
                <td class="table__item">2 190kg</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Juhend</th>
                <td class="table__item"><span class="text-truncate"><a href="#">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr LV.pdf</a></span></td>
            </tr>
        </tbody>
    </table>
</div>
 
<div class="table {{ class }} {{ modifier }}">
    <table class="table__table tablesaw" data-tablesaw-sortable>
        {% if data.headers %}
            <thead class="table__head">
                <tr class="table__row">
                    {% for header in data.headers %}
                        <th class="table__header" scope="col"{% if header.sortable %} data-tablesaw-sortable-col{% endif %}>
                            <span class="table__title text-small">{{ header.title }}</span>
                        </th>
                    {% endfor %}
                </tr>
            </thead>
        {% endif %}
        {% if data.rows %}
            <tbody class="table__body">
                {% for row in data.rows %}
                    <tr class="table__row">
                        {% for cell in row.cells %}
                            {% set element = cell.header ? 'th' : 'td' %}
                            <{{ element }} class="table__item"{% if cell.header %} scope="row"{% endif %}>{{cell.content}}</{{ element }}>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        {% endif %}
    </table>
</div>

{
  "language": "en-US",
  "data": {
    "rows": [
      {
        "cells": [
          {
            "header": true,
            "content": "Platvormi kõrgus"
          },
          {
            "content": "8,00m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Töötamiskõrgus"
          },
          {
            "content": "10,00m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Tõstevõime"
          },
          {
            "content": "350 kg"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Platvormi pikkus / koospikendusega"
          },
          {
            "content": "2,31m / 3,23m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Platvormi laius"
          },
          {
            "content": "0,81m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Laadimistoide"
          },
          {
            "content": "230V"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Aku"
          },
          {
            "content": "24V – 225Ah (C20)"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Vedu"
          },
          {
            "content": "2WD"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Mittemäärivad rehvid"
          },
          {
            "content": "Jah"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Tugijalad"
          },
          {
            "content": "Ei"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Transpordi pikkus"
          },
          {
            "content": "2,31m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Transpordi laius"
          },
          {
            "content": "0,81m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Transpordi kõrgus"
          },
          {
            "content": "1,32m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Pikkus"
          },
          {
            "content": "3,14m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Laius"
          },
          {
            "content": "0,81m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Kaal"
          },
          {
            "content": "2 190kg"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Juhend"
          },
          {
            "content": "<span class=\"text-truncate\"><a href=\"#\">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr LV.pdf</a></span>"
          }
        ]
      }
    ],
    "headers": [
      {
        "title": "Parameeter",
        "sortable": true
      },
      {
        "title": "Väärtus",
        "sortable": true
      }
    ]
  }
}
  • Content: 
    .table {
    width: 100%;
    text-align: left;
}

.table__table {
    width: 100%;
}

.table__item {
    padding: 12px;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;

    @at-root {
        th#{&} {
            background-color: $L-table-header-background;
        }

        tr:nth-child(odd) td#{&} {
            background-color: $L-table-cell-dark-background;
        }

        tr:nth-child(even) td#{&} {
            background-color: $L-table-cell-light-background;
        }
    }
}

.table__row {
    border-top: 1px solid $L-table-border-color;

    &:last-child {
        border-bottom: 1px solid $L-table-border-color;
    }

    .table--no-borders & {
        border: none;
    }
}

.table__title {
    padding: 8px 12px;
    font-weight: $font-weight-medium;
    letter-spacing: $letter-spacing-50;
    text-transform: none;
}

// Tablesaw styling:

.tablesaw-sortable-btn {
    .table & {
        padding: 0;
        background: none;
        color: inherit;
        appearance: none;
        cursor: pointer;
        text-decoration: none;
        border: none;
        outline: none;
        text-transform: uppercase;
        letter-spacing: inherit;
        margin: 0;
        line-height: 2;
        position: relative;
    }

    .table .tablesaw-sortable & {
        &:before,
        &:after {
            display: inline-block;
            right: 0;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            content: '';
        }

        &:before {
            margin-top: 8px;
            position: absolute;
            border-bottom: 5px solid $L-border-medium;
        }

        &:after {
            margin-bottom: 2px;
            vertical-align: text-bottom;
            border-top: 5px solid $L-border-medium;
        }
    }

    .table .tablesaw-sortable-descending & {
        &:before {
            border-bottom-color: $brand-primary;
        }
    }

    .table .tablesaw-sortable-ascending & {
        &:after {
            border-top-color: $brand-primary;
        }
    }
}

.tablesaw-cell-label {
    .table & {
        display: none;
    }
}
  • URL: /components/raw/table/table.scss
  • Filesystem Path: src/patterns/components/table/table.scss
  • Size: 2.2 KB
  • Content: 
    import 'tablesaw/dist/tablesaw.jquery.js';
import 'tablesaw/dist/tablesaw-init.js';

import './table.scss';
  • URL: /components/raw/table/table.ts
  • Filesystem Path: src/patterns/components/table/table.ts
  • Size: 108 Bytes
  • Handle: @table--sortable
  • Filesystem Path: src/patterns/components/table/table.twig

No Borders 

<div class="table  table--no-borders">
    <table class="table__table tablesaw" data-tablesaw-sortable>
        <tbody class="table__body">
            <tr class="table__row">
                <th class="table__item" scope="row">Platvormi kõrgus</th>
                <td class="table__item">8,00m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Töötamiskõrgus</th>
                <td class="table__item">10,00m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Tõstevõime</th>
                <td class="table__item">350 kg</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Platvormi pikkus / koospikendusega</th>
                <td class="table__item">2,31m / 3,23m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Platvormi laius</th>
                <td class="table__item">0,81m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Laadimistoide</th>
                <td class="table__item">230V</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Aku</th>
                <td class="table__item">24V – 225Ah (C20)</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Vedu</th>
                <td class="table__item">2WD</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Mittemäärivad rehvid</th>
                <td class="table__item">Jah</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Tugijalad</th>
                <td class="table__item">Ei</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Transpordi pikkus</th>
                <td class="table__item">2,31m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Transpordi laius</th>
                <td class="table__item">0,81m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Transpordi kõrgus</th>
                <td class="table__item">1,32m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Pikkus</th>
                <td class="table__item">3,14m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Laius</th>
                <td class="table__item">0,81m</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Kaal</th>
                <td class="table__item">2 190kg</td>
            </tr>
            <tr class="table__row">
                <th class="table__item" scope="row">Juhend</th>
                <td class="table__item"><span class="text-truncate"><a href="#">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr LV.pdf</a></span></td>
            </tr>
        </tbody>
    </table>
</div>
 
<div class="table {{ class }} {{ modifier }}">
    <table class="table__table tablesaw" data-tablesaw-sortable>
        {% if data.headers %}
            <thead class="table__head">
                <tr class="table__row">
                    {% for header in data.headers %}
                        <th class="table__header" scope="col"{% if header.sortable %} data-tablesaw-sortable-col{% endif %}>
                            <span class="table__title text-small">{{ header.title }}</span>
                        </th>
                    {% endfor %}
                </tr>
            </thead>
        {% endif %}
        {% if data.rows %}
            <tbody class="table__body">
                {% for row in data.rows %}
                    <tr class="table__row">
                        {% for cell in row.cells %}
                            {% set element = cell.header ? 'th' : 'td' %}
                            <{{ element }} class="table__item"{% if cell.header %} scope="row"{% endif %}>{{cell.content}}</{{ element }}>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        {% endif %}
    </table>
</div>

{
  "language": "en-US",
  "data": {
    "rows": [
      {
        "cells": [
          {
            "header": true,
            "content": "Platvormi kõrgus"
          },
          {
            "content": "8,00m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Töötamiskõrgus"
          },
          {
            "content": "10,00m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Tõstevõime"
          },
          {
            "content": "350 kg"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Platvormi pikkus / koospikendusega"
          },
          {
            "content": "2,31m / 3,23m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Platvormi laius"
          },
          {
            "content": "0,81m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Laadimistoide"
          },
          {
            "content": "230V"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Aku"
          },
          {
            "content": "24V – 225Ah (C20)"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Vedu"
          },
          {
            "content": "2WD"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Mittemäärivad rehvid"
          },
          {
            "content": "Jah"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Tugijalad"
          },
          {
            "content": "Ei"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Transpordi pikkus"
          },
          {
            "content": "2,31m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Transpordi laius"
          },
          {
            "content": "0,81m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Transpordi kõrgus"
          },
          {
            "content": "1,32m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Pikkus"
          },
          {
            "content": "3,14m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Laius"
          },
          {
            "content": "0,81m"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Kaal"
          },
          {
            "content": "2 190kg"
          }
        ]
      },
      {
        "cells": [
          {
            "header": true,
            "content": "Juhend"
          },
          {
            "content": "<span class=\"text-truncate\"><a href=\"#\">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr LV.pdf</a></span>"
          }
        ]
      }
    ]
  },
  "modifier": "table--no-borders"
}
  • Content: 
    .table {
    width: 100%;
    text-align: left;
}

.table__table {
    width: 100%;
}

.table__item {
    padding: 12px;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;

    @at-root {
        th#{&} {
            background-color: $L-table-header-background;
        }

        tr:nth-child(odd) td#{&} {
            background-color: $L-table-cell-dark-background;
        }

        tr:nth-child(even) td#{&} {
            background-color: $L-table-cell-light-background;
        }
    }
}

.table__row {
    border-top: 1px solid $L-table-border-color;

    &:last-child {
        border-bottom: 1px solid $L-table-border-color;
    }

    .table--no-borders & {
        border: none;
    }
}

.table__title {
    padding: 8px 12px;
    font-weight: $font-weight-medium;
    letter-spacing: $letter-spacing-50;
    text-transform: none;
}

// Tablesaw styling:

.tablesaw-sortable-btn {
    .table & {
        padding: 0;
        background: none;
        color: inherit;
        appearance: none;
        cursor: pointer;
        text-decoration: none;
        border: none;
        outline: none;
        text-transform: uppercase;
        letter-spacing: inherit;
        margin: 0;
        line-height: 2;
        position: relative;
    }

    .table .tablesaw-sortable & {
        &:before,
        &:after {
            display: inline-block;
            right: 0;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            content: '';
        }

        &:before {
            margin-top: 8px;
            position: absolute;
            border-bottom: 5px solid $L-border-medium;
        }

        &:after {
            margin-bottom: 2px;
            vertical-align: text-bottom;
            border-top: 5px solid $L-border-medium;
        }
    }

    .table .tablesaw-sortable-descending & {
        &:before {
            border-bottom-color: $brand-primary;
        }
    }

    .table .tablesaw-sortable-ascending & {
        &:after {
            border-top-color: $brand-primary;
        }
    }
}

.tablesaw-cell-label {
    .table & {
        display: none;
    }
}
  • URL: /components/raw/table/table.scss
  • Filesystem Path: src/patterns/components/table/table.scss
  • Size: 2.2 KB
  • Content: 
    import 'tablesaw/dist/tablesaw.jquery.js';
import 'tablesaw/dist/tablesaw-init.js';

import './table.scss';
  • URL: /components/raw/table/table.ts
  • Filesystem Path: src/patterns/components/table/table.ts
  • Size: 108 Bytes
  • Handle: @table--no-borders
  • Filesystem Path: src/patterns/components/table/table.twig