`show-sort` option in Table (from docs) looks odd #445

acstll · 2021-07-13T12:23:47Z

When trying to implement the <scale-table show-sort> element, the “example” code in the docs looks a little odd in the browser (the filtered column header starts flickering when hovering over them with the mouse)

(via supportpal)

The text was updated successfully, but these errors were encountered:

nowseemee · 2021-07-22T10:24:17Z

Hello,

thanks for the question - I had a closer look, tried to reproduce this but I was unsuccessful.

I'll paste below what I put together for testing. I am happy to investigate further when we receive more details/code which reproduces the bug.

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
    />
    <title>Stencil Component Starter</title>

    <script type="module" src="/build/scale-components.esm.js"></script>
    <link rel="stylesheet" href="/build/scale-components.css" />
  </head>

  <body>
    <h3>Table</h3>

    <script>
      const getNextSort = (sort) => {
        if (!sort || ['none', 'other'].includes(sort)) {
          return 'descending';
        }
        if (sort === 'descending') {
          return 'ascending';
        }
        return 'none';
      };

      function sortTable(th) {
        const currentSort = th.getAttribute('aria-sort');
        const nextSort = getNextSort(currentSort);
        const tableHeaders = Array.from(document.getElementsByTagName('TH'));
        const columnIndex = tableHeaders.findIndex((x) => x === th);

        // clean up previous aria-sort value
        tableHeaders.forEach((tableHeader) => {
          tableHeader.setAttribute('aria-sort', 'none');
        });

        // set actual sort
        th.setAttribute('aria-sort', nextSort);

        // Taken from:
        // https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table
        var table, rows, switching, i, x, y, shouldSwitch;
        table = document.getElementById('sortable-table');
        switching = true;
        /*Make a loop that will continue until
  no switching has been done:*/
        while (switching) {
          //start by saying: no switching is done:
          switching = false;
          rows = table.rows;
          /*Loop through all table rows (except the
        first, which contains table headers):*/
          for (i = 1; i < rows.length - 1; i++) {
            //start by saying there should be no switching:
            shouldSwitch = false;

            /*Get the two elements you want to compare,
              one from current row and one from the next:*/
            x = rows[i].getElementsByTagName('TD')[columnIndex];
            y = rows[i + 1].getElementsByTagName('TD')[columnIndex];

            if (
              !['ascending', 'descending'].includes(nextSort) ||
              x.parentElement.parentElement.tagName === 'TFOOT' ||
              y.parentElement.parentElement.tagName === 'TFOOT'
            ) {
              break;
            }

            //check if the two rows should switch place:
            if (
              (nextSort === 'descending' ? y : x).innerHTML.toLowerCase() >
              (nextSort === 'descending' ? x : y).innerHTML.toLowerCase()
            ) {
              //if so, mark as a switch and break the loop:
              shouldSwitch = true;
              break;
            }
          }
          if (shouldSwitch) {
            /*If a switch has been marked, make the switch
              and mark that a switch has been done:*/
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
          }
        }
      }
      function handleKeyDown(e, th) {
        if (['Space', 'Enter'].includes(e.code)) {
          sortTable(th);
        }
      }
    </script>

    <scale-table size="default" show-sort="true">
      <table id="sortable-table">
        <thead>
          <tr>
            <th
              aria-sort="descending"
              onclick="sortTable(this)"
              onkeydown="handleKeyDown(event, this)"
              tabindex="0"
            >
              Title
            </th>
            <th aria-disabled="true">Tags</th>
            <th
              onclick="sortTable(this)"
              onkeydown="handleKeyDown(event, this)"
              tabindex="0"
            >
              Stats
            </th>
            <th
              onclick="sortTable(this)"
              onkeydown="handleKeyDown(event, this)"
              style="text-align: right"
              tabindex="0"
            >
              Time
            </th>
            <th
              onclick="sortTable(this)"
              onkeydown="handleKeyDown(event, this)"
              style="text-align: right"
              tabindex="0"
            >
              Euros
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Jane</td>
            <td>
              <scale-tag size="small" style="margin-right: 8px"
                >Other</scale-tag
              >
              <scale-tag size="small" style="margin-right: 8px">N/A</scale-tag>
              <scale-tag size="small">Demo</scale-tag>
            </td>
            <td>
              <div style="display: inline-flex; align-items: center">
                <span style="margin-right: 8px">9.356</span>
                <scale-progress-bar
                  variant="info"
                  style="max-width: 120px"
                  stroke-width="6"
                  percentage="90"
                />
              </div>
            </td>
            <td style="text-align: right; font-weight: 100">00:00:20</td>
            <td style="text-align: right; font-weight: 100">100.245,10</td>
          </tr>
          <tr>
            <td>Jack</td>
            <td>
              <scale-tag size="small" style="margin-right: 8px"
                >Other</scale-tag
              >
              <scale-tag size="small" style="margin-right: 8px">N/A</scale-tag>
              <scale-tag size="small">Demo</scale-tag>
            </td>
            <td>
              <div style="display: inline-flex; align-items: center">
                <span style="margin-right: 8px">3.356</span>
                <scale-progress-bar
                  variant="info"
                  style="max-width: 120px"
                  stroke-width="6"
                  percentage="90"
                />
              </div>
            </td>
            <td style="text-align: right; font-weight: 100">00:00:30</td>
            <td style="text-align: right; font-weight: 100">100.345,10</td>
          </tr>
          <tr>
            <td>John</td>
            <td>
              <scale-tag size="small" style="margin-right: 8px"
                >Other</scale-tag
              >
              <scale-tag size="small" style="margin-right: 8px">N/A</scale-tag>
              <scale-tag size="small">Demo</scale-tag>
            </td>
            <td>
              <div style="display: inline-flex; align-items: center">
                <span style="margin-right: 8px">6.356</span>
                <scale-progress-bar
                  variant="info"
                  style="max-width: 120px"
                  stroke-width="6"
                  percentage="90"
                />
              </div>
            </td>
            <td style="text-align: right; font-weight: 100">00:00:40</td>
            <td style="text-align: right; font-weight: 100">100.445,10</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>Total</td>
            <td />
            <td />
            <td style="text-align: right">00:00:20</td>
            <td style="text-align: right">100.245,10</td>
          </tr>
        </tfoot>
      </table>
    </scale-table>
  </body>
</html>

FelixLutze · 2021-07-26T15:54:40Z

Hello I was the one who reported the issue to Brand and Design.
I am still expiriencing the same issue with <scale-table>.
Thank you.

I provided a few more details about how I Implemented SCALE:

1. My project is built in Laravel, and I am using “vue js” for the Frontend part.

2. I installed SCALE with npm:

npm install @telekom/scale-components
npm install @telekom/scale-components-vue

I have installed the following versions of SCALE: scale-components-3.0.0-beta.16, scale-components-vue-3.0.0-beta.16

3. I added the following code to resources/js/app.js (vue js):

import Vue from 'vue';
import {
    applyPolyfills,
    defineCustomElements,
} from '@telekom/scale-components/loader';
import '@telekom/scale-components/dist/scale-components/scale-components.css';

Vue.config.productionTip = false;
Vue.config.ignoredElements = [/scale-\w*/];

applyPolyfills().then(() => {
    defineCustomElements(window);
});

require('./bootstrap');

# My Component:
Vue.component('test-scale', require('./components/testScale.vue').default);

window.onload = function () {
    const app = new Vue({
        el: '#app',
    });
}

4. Content of the resources/js/components/testScale.vue(registered vue component):

<template>
    <div>
        <scale-table show-sort>
            <table>
                <caption>
                    Table title
                </caption>
                <thead>
                <tr>
                    <!-- aria-sort can be descending or ascending -->
                    <th
                        tabindex="0"
                        aria-sort="descending"
                        @keyup="handleKeyUp(event, 'title')"
                        @click="sortTable('title')"
                        id="title"
                    >
                        Title
                    </th>
                    <!-- aria-disabled="true" disables sorting -->
                    <th aria-disabled="true">Tags</th>
                    <th
                        tabindex="0"
                        @keyup="handleKeyUp(event, 'stats')"
                        @click="sortTable('stats')"
                        id="stats"
                    >
                        Stats
                    </th>
                    <th
                        tabindex="0"
                        @keyup="handleKeyUp(event, 'time')"
                        @click="sortTable('time')"
                        id="time"
                    >
                        Time
                    </th>
                    <th
                        tabindex="0"
                        @keyup="handleKeyUp(event, 'euros')"
                        @click="sortTable('euros')"
                        id="euros"
                    >
                        Euros
                    </th>
                </tr>
                </thead>
                <tbody>
                ...
                </tbody>
                <tfoot>
                <tr>
                    <td>Total</td>
                    <td></td>
                    <td></td>
                    <td>00:00:20</td>
                    <td>100.245,10</td>
                </tr>
                </tfoot>
            </table>
        </scale-table>

    </div>
</template>

<script>
export default {
    name: "test-scale",
    methods: {
        handleKeyUp: function (event, id) {
            /* ... */
        },
        sortTable: function (id) {
            /* ... */
        },
    }
}
</script>

5. I linked all dependecies to the document:

<!doctype html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{env('APP_NAME')}}</title>
    {{-- VUE JS --}}
    <script src="{{ url(mix('js/app.js')) }}"></script>
    <!-- Styles -->
    <link href="{{ url(mix('css/app.css')) }}" rel="stylesheet" />
</head>

<body>
    <main id="app">
        <test-scale></test-scale>
    </main>
</body>
</html>

6. Compile JavaScript:
npm run dev
7. Starting Laravel development server:
php artisan serve
8. Experience the reported issue.

Contents of resources/js/bootstrap.js

window._ = require('lodash');

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

nowseemee · 2021-07-27T09:03:47Z

hi @FelixLutze, thanks for the detailed explanation. Can you post the content of your css/app.css file, please?

FelixLutze · 2021-07-27T15:54:07Z

Hi @nowseemee, thanks for your response and the advice to check the css/app.css file.
I found a solution:

I checked resources/sass/app.scss where the CSS components are getting imported in Laravel:

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

After I removed @import '~bootstrap/scss/bootstrap'; the <scale-table> elements works as expected
I was wondering what module/component of bootstrap is causing this issue, so I checked out node_modules/bootstrap/scss/bootstrap.scss:

/*!
 * Bootstrap v4.6.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "utilities";
@import "print";

After I removed @import "tables";, everything seems to work again.
So I ended up importing all bootstrap modules except the one I previously removed to resources/sass/app.scss:

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/images';
@import '~bootstrap/scss/code';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/dropdown';
@import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/input-group';
@import '~bootstrap/scss/custom-forms';
@import '~bootstrap/scss/card';
@import '~bootstrap/scss/progress';
@import '~bootstrap/scss/media';
@import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/tooltip';
@import '~bootstrap/scss/popover';
@import '~bootstrap/scss/carousel';
@import '~bootstrap/scss/spinners';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/print';

The problem is fixed now.

By the way, wouldn't it make more sense also to import import '@telekom/scale-components/dist/scale-components/scale-components.css'; to resources/sass/app.scss?

Thanks.

acstll · 2021-07-27T16:09:59Z

By the way, wouldn't it make more sense also to import import '@telekom/scale-components/dist/scale-components/scale-components.css'; to resources/sass/app.scss?

In my opinion, yes!

Glad to hear you were able to fix it.

nowseemee · 2021-07-28T09:35:31Z

Happy to hear that the problem is resolved! I'd like to +1 what Arturo said - makes a lot of sense to import the scale styles in app.scss.

acstll added the bug Something isn't working label Jul 13, 2021

acstll assigned nowseemee Jul 13, 2021

nowseemee closed this as completed Jul 28, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`show-sort` option in Table (from docs) looks odd #445

`show-sort` option in Table (from docs) looks odd #445

acstll commented Jul 13, 2021

nowseemee commented Jul 22, 2021

FelixLutze commented Jul 26, 2021

nowseemee commented Jul 27, 2021

FelixLutze commented Jul 27, 2021

acstll commented Jul 27, 2021

nowseemee commented Jul 28, 2021

show-sort option in Table (from docs) looks odd #445

show-sort option in Table (from docs) looks odd #445

Comments

acstll commented Jul 13, 2021

nowseemee commented Jul 22, 2021

FelixLutze commented Jul 26, 2021

I provided a few more details about how I Implemented SCALE:

Contents of resources/js/bootstrap.js

nowseemee commented Jul 27, 2021

FelixLutze commented Jul 27, 2021

acstll commented Jul 27, 2021

nowseemee commented Jul 28, 2021

`show-sort` option in Table (from docs) looks odd #445

`show-sort` option in Table (from docs) looks odd #445