<div class="m-table jq_table">
	<table class="m-table__table">
		<thead class="m-table__head">
			<tr class="m-table__row">
				<th class="m-table__heading m-table__column">Company</th>
				<th class="m-table__heading m-table__column">Contact</th>
				<th class="m-table__heading m-table__column">Country</th>
			</tr>
		</thead>
		<tbody class="m-table__body">
			<tr class="m-table__row">
				<td class="m-table__column">Alfreds Futterkiste</td>
				<td class="m-table__column">Maria Anders</td>
				<td class="m-table__column">Germany</td>
			</tr>
			<tr class="m-table__row">
				<td class="m-table__column">Centro comercial Moctezuma</td>
				<td class="m-table__column">Francisco Chang</td>
				<td class="m-table__column">Mexico</td>
			</tr>
			<tr class="m-table__row">
				<td class="m-table__column">Ernst Handel</td>
				<td class="m-table__column">Roland Mendel</td>
				<td class="m-table__column">Austria</td>
			</tr>
			<tr class="m-table__row">
				<td class="m-table__column">Island Trading</td>
				<td class="m-table__column">Helen Bennett</td>
				<td class="m-table__column">UK</td>
			</tr>
			<tr class="m-table__row">
				<td class="m-table__column">Laughing Bacchus Winecellars</td>
				<td class="m-table__column">Yoshi Tannamuri</td>
				<td class="m-table__column">Canada</td>
			</tr>
			<tr class="m-table__row">
				<td class="m-table__column">Magazzini Alimentari Riuniti</td>
				<td class="m-table__column">Giovanni Rovelli</td>
				<td class="m-table__column">Italy</td>
			</tr>
		</tbody>
	</table>
</div>

.m-table {

    $self: &;
    $scroll-bar-color: color('gray-dark-extra');
    $scroll-bar-height: 1px;
    $scroll-caption-height: 38px;

    border-left: 1px solid color('gray');
    margin-bottom: space(2);
    margin-top: space(2);
    overflow-x: auto;

    &:first-child {

        margin-top: 0;

    }

    &:last-child {

        margin-bottom: 0;

    }

    &::-webkit-scrollbar { // sass-lint:disable-line no-vendor-prefixes

        background: color('gray-light');
        height: $scroll-bar-height;

    }

    &::-webkit-scrollbar-thumb { // sass-lint:disable-line no-vendor-prefixes

        background: $scroll-bar-color;

    }

    &.on {

        border-image: linear-gradient(to top, transparentize(color('gray'), 1) ($scroll-caption-height + 2), color('gray') ($scroll-caption-height + 2));
        border-image-slice: 1;

        #{$self}__scroll {

            @include font-size(mini);
            align-items: center;
            color: color('gray-dark');
            display: flex;
            height: $scroll-caption-height;
            justify-content: center;
            left: 0;
            line-height: line-height(large);
            position: sticky;
            padding: 10px 0;
            top: 0;

            &:before {

                background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='20'%3E%3Cpath fill='%23cecece' d='M1.5.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm4 0a1.5 1.5 0 000 3H8V11.72l-1.719-1.185-.076-.035a2.437 2.437 0 00-2.783.523L2.074 12.44l5.012 6.147.035.035a3.002 3.002 0 002.121.879H16c1.645 0 3-1.355 3-3V9.693c0-.97-.713-1.813-1.67-1.972h-.002L11 6.666V2A1.5 1.5 0 009.5.5h-4zM10 8.527l7 1.168V16.5c0 .565-.435 1-1 1H9.242a.995.995 0 01-.695-.287L4.738 12.54l.131-.137a.416.416 0 01.473-.088L10 15.53V8.527z'/%3E%3C/svg%3E") no-repeat center;
                background-size: 19px 20px;
                content: '';
                display: inline-block;
                height: 20px;
                margin: -3px 10px 0 0;
                vertical-align: middle;
                width: 19px;

            }

        }

    }

    &__scroll {

        display: none;

    }

    &__append {

        background: color('white');
        border: 1px solid color('gray');
        border-left: 0;
        border-top: 0;
        left: 0;
        padding: 25px 10px;
        position: sticky;
        text-align: center;
        top: 0;

    }

    & #{$self} {

        &__table {
            border-left: 0;
            margin: 0;
            min-width: 600px;
        }

        &__column {
            border-bottom: 1px solid color('gray');
            border-right: 1px solid color('gray');
        }
    }
}

import $ from 'jquery';

$(() => {
	var windowWidth = $(window).width();

	$('.jq_table').each(function() {
		var $el = {
			table: $(this),
			selects: $('.jq_table_select', this)
		};

		var i18n = typeof table_i18n !== 'undefined' ? table_i18n : { scroll: 'Drag to side to scroll table' }; // eslint-disable-line

		$(this)
			.append('<div class="m-table__scroll">' + i18n.scroll + '</div>');

		setTableOverflow($(this));

		$el.selects.on('change', function() {
			if ($(this).attr('id') === 'select-all') {
				$el.selects.not(this).prop('checked', this.checked);
			} else {
				$el.selects.filter('#select-all').prop('checked',
					($el.selects
					.not('#select-all')
					.filter(':checked').length === $el.selects.not('#select-all').length)
				);
			}
		});
	});

	$(window).on('resize', () => {
		windowWidth = $(window).width();

		$('.jq_table').each(function() {
			setTableOverflow($(this));
		});
	});

	function setTableOverflow($table) {
		$table.width('auto');

		var tableWidth = $table[0].offsetWidth;
		var scrollWidth = $table[0].scrollWidth;

		if (tableWidth < scrollWidth) {
			$table.addClass('on');
			if (windowWidth <= 991) {
				$table.width(windowWidth - $table.offset().left + 1);
			}
		} else {
			$table.removeClass('on');
		}
	}
});