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.