Адаптивная таблица FlexTable

Два варианта создания адаптивной таблицы:

Для чего нужен плагин FlexTable

Плагин создает из обычной таблицы, которая не помещается в ширину экрана, адаптивную таблицу с фиксированной шапкой и несколькими первыми столбцами.

Горизонтальная прокрутка основного контента в сочетании с фиксацией первых столбцов и заголовка позволяет удобно просматривать информацию на любых экранах.

Также можно задавать точные значения ширины и высоты таблицы.

Скачать плагин

Как это работает

HTML

Подключение плагина

...

Создаем структуру (первый выриант):

Для более быстрой работы скрипта можно создавать оболочку адаптивной таблицы в html и заполнять ее самостоятельно (второй вариант):

Получить оболочку адаптивной таблицы можно вызвав функцию:

let shell = getFlaxTableShell();
console.log(shell);

Настройки:

JavaScript

Для подключения можно использовать либо селектор:

let yourTable = new FlexTable('.your-table');

либо DOM объект:

let yourTable = document.querySelector('.your-table');
if (yourTable) {
  new FlexTable(newTable);
}

CSS

Класс ._loading добавляет прелоадер

.flex-table._loading,
.your-table ._loading {
  overflow: hidden;
}

.flex-table._loading::before,
.your-table ._loading::before {
  display: block;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  top: 30px;
  right: 50%;
    -webkit-transform: translate(50%, 0);
      -ms-transform: translate(50%, 0);
  transform: translate(50%, 0);
  background: url("../images/loading.gif") center/100% no-repeat;
}

Класс ._hidden скрывает таблицу на время загрузки

.flex-table__inner._hidden {
  opacity: 0;
  visibility: hidden;
}

.your-table table._hidden {
  opacity: 0;
  visibility: hidden;
}

Класс ._overflow отвечает за появление псевдоэлементов по краям правой части таблицы с горизонтальным скролом. Это дает понять пользователю, что контент пролистывается.

Также класс ._overflow присваивается самой верхней оболочке .your-table

..flex-table__r-box._overflow::before,
.flex-table__r-box._overflow::after {
  opacity: 1;
}

.flex-table__r-box::before,
.flex-table__r-box::after {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  z-index: 5;
  width: 10px;
  opacity: 0;
}

.flex-table__r-box::before {
  left: 0;
  background: -webkit-gradient(linear, left top, right top, from(#ccc), to(transparent));
  background: -o-linear-gradient(left, #ccc, transparent);
  background: linear-gradient(to right, #ccc, transparent);
}

.flex-table__r-box::after {
  right: 0;
  background: -webkit-gradient(linear, right top, left top, from(#ccc), to(transparent));
  background: -o-linear-gradient(right, #ccc, transparent);
  background: linear-gradient(to left, #ccc, transparent);
}

Стили адаптивной таблицы определяются слежующим образом:

.your-table .flex-table__inner {
  ...
}
.your-table .flex-table__l-table {
  ...
}  
.your-table .flex-table__r-table {
  ...
}  
.your-table .flex-table__r-header-table {
  ...
}  
...