VGTable

<form id="orders-filters">
  <input type="search" id="orders-search">
  <select data-filter-field="status">
    <option value="">Все статусы</option>
    <option value="active">Активные</option>
  </select>
  <button type="button" data-filter-reset>Сбросить</button>
</form>

<div class="vg-table-wrapper orders-table">
  <div class="vg-table-container">
    <table
      id="orders-table"
      class="vg-table vg-table-hovered"
      data-vg-table
      data-locale="ru"
      data-sort-multiple="true"
      data-search-enable="true"
      data-search-input="#orders-search"
      data-filters-enable="true"
      data-filters-form="#orders-filters"
      data-pagination-enable="true"
      data-pagination-per-page="25"
      data-pagination-show-per-page="true"
      data-sticky-header-enable="true"
      data-sticky-header-mode="container"
      data-sticky-header-max-height="28rem"
      data-fixed-columns="left:id;right:actions"
      data-url-state-enable="true"
    >
      <thead>
        <tr>
          <th data-field="id" data-sort-type="number">ID</th>
          <th data-field="name">Название</th>
          <th data-field="status">Статус</th>
          <th data-field="actions" data-sort-enabled="false">Действия</th>
        </tr>
      </thead>
      <tbody>...</tbody>
    </table>
  </div>
</div>

const table = document.querySelector('#orders-table');

table.addEventListener('sortchange.vg.table', ({detail}) => console.log(detail.sorts));
table.addEventListener('pagechange.vg.table', ({detail}) => console.log(detail.page));
table.addEventListener('filterschange.vg.table', ({detail}) => console.log(detail.filters));
table.addEventListener('selectionchange.vg.table', ({detail}) => console.log(detail.keys));
table.addEventListener('columnresize.vg.table', ({detail}) => console.log(detail.widths));
table.addEventListener('rowreorder.vg.table', ({detail}) => console.log(detail.order));
table.addEventListener('requesterror.vg.table', ({detail}) => console.error(detail.error));
table.addEventListener('localechange.vg.table', ({detail}) => console.log(detail.locale));

// GET /api/orders?page=2&per_page=25&sort=status,name&direction=asc,desc
const dataResponse = {
  data: [
    {id: 101, name: 'Заказ 101', status: 'active'},
  ],
  meta: {page: 2, per_page: 25, total: 84, pages: 4},
};

// responsemode: 'view' или 'auto'
const viewResponse = {
  view: {tbody: '<tr><td>101</td><td>Заказ 101</td><td>active</td></tr>'},
  meta: {page: 1, per_page: 25, total: 1, pages: 1},
};

const table = VGTable.getInstance(document.querySelector('#orders-table'));
table.setRequestParams({customer: 17});
table.reload({force: true});
table.exportRemote('xlsx');

.orders-table {
  --vg-table-container-radius: 12px;
  --vg-table-cell-padding-block: .75rem;
  --vg-table-cell-padding-inline: 1rem;
  --vg-table-thead-bg: var(--vg-surface-muted-bg);
  --vg-table-tbody-bg-hovered: color-mix(in srgb, var(--vg-primary) 6%, transparent);

  --vg-table-sticky-top: 4rem;
  --vg-table-sticky-max-height: 32rem;
  --vg-table-fixed-shadow-color: rgb(0 0 0 / 18%);
  --vg-table-pagination-active-bg: var(--vg-primary);
  --vg-table-row-reorder-indicator-color: var(--vg-primary);
}