Static Data Grid - 10K записей с поиском, разбиением на страницы, опциями экспорта

Протестировано следующие сетки

  • Datatables
  • Angular Панель пользовательского интерфейса
  • Слайдовая сетка
  • Bootstrap

Замечание:

  • Сетка данных и загрузочная сетка очень медленная.
  • Слайковая сетка не активна на данный момент
  • Angular Сетка пользовательского интерфейса не поддерживает или имеет все параметры экспорта.

Какова самая быстрая сетка данных, которая имеет следующие функции.

  • поиск
  • нумерация страниц
  • Пример html
  • параметры экспорта - csv, копирование в буфер обмена, png, word, excel, csv, png, xml

ОТВЕТЫ

Ответ 1

Моя текущая любимая библиотека таблиц Bootstrap-Table

В нем есть все функции, которые вы ищете и хорошо себя чувствуете.

Чтобы достичь достойного времени загрузки на записях 10k +, вам, скорее всего, придется использовать AJAX и/или Pagination.

Вот фрагмент, показывающий, что 5000 результатов работают нормально:

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.min.js"></script>
</head>

<body>
  <table data-toggle="table"
       data-search="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-show-export="true"
       data-minimum-count-columns="2"
       data-show-pagination-switch="true"
       data-pagination="true"
       data-id-field="id"
       data-page-list="[10, 25, 50, 100, ALL]"
       data-show-footer="false"
       data-side-pagination="client"
       data-url="https://jsonplaceholder.typicode.com/photos">
    <thead>
      <tr>
        <th data-field="id">Id</th>
        <th data-field="title">Title</th>
        <th data-field="url">URL</th>
        <th data-field="thumbnailUrl">Thumbnail URL</th>
      </tr>
    </thead>
</body>

</html>

Ответ 2

Не уверен, что вы можете использовать React, но вы проверили https://react-table.js.org или https://facebook.github.io/fixed-data-table? Кажется, что они оба встречают все в вашем списке, кроме экспорта.

Экспорт в разные форматы трудно сделать в общем случае, поэтому на https://www.npmjs.com существует множество разных проектов, которые специально предназначены для экспорта данных в разные форматы.

Удачи!

Ответ 3

10K данные очень большие для обычного клиента. Не имеет значения, какой js-компонент. DataTables BootStrap и т.д. Очень медленны, потому что клиентского пэра недостаточно для отображения данных 10k.