table dragger — плагин для сортировки таблицы на JS

Удобный плагин для создания JavaScript динамическая таблица с сортировкой и перетаскиванием данных.

Если Вам необходима сортировка таблицы JavaScript, то этот плагин идеально Вам подойдет. Он позволяет делать таблицы динамическими: перетаскивать и выстраивать положение строк\столбцов так, как пожелает пользователь.

Особенности:

  • Супер легко установить
  • Cellspacing, cellpadding, col и colgroup учитывается
  • Возможность сортировки столбцов или строк одновременно
  • Плавная анимация при сортировке
  • Нет лишних зависимостей
  • Поддержка сенсора

Использование:

Подключаем файл библиотеки

<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>

обычная HTML-разметка таблицы

<table id="table">
  <thead>
  <tr>
    <th class='handle'>header1</th>
    <th class='handle'>header2</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>conten1</td>
    <td>conten2</td>
  </tr>
  </tbody>
</table>

и указываем работу самого скрипта

var el = document.getElementById('table');
var dragger = tableDragger(el, {
  mode: 'row',
  dragHandler: '.handle',
  onlyBody: true,
  animation: 300
});
dragger.on('drop',function(from, to){
  console(from);
  console(to);
});

Более подробно обо всех опциях можно посмотреть в документации на сайте автора. Скачать файлы плагина можно по ссылке выше.

3165 просмотров
Телеграм-канал JavaScript Daily Practice