s5l.ru-crm/app/components/Admin/DataTable/index.pug

div(class="data-table")
  div(class="data-table__toolbar")
    div(class="data-table__search")
      input(
        type="text"
        v-model="searchQuery"
        placeholder="Поиск..."
        class="data-table__search-input"
      )
    
    div(class="data-table__actions")
      slot(name="toolbar")
  
  div(v-if="loading" class="data-table__loading")
    div(class="data-table__spinner")
    span Загрузка данных...
  
  div(v-else class="data-table__container")
    table(class="data-table__table")
      thead
        tr
          th(v-if="selectable" class="data-table__checkbox-column")
            input(
              type="checkbox"
              :checked="selectedItems.length === paginatedData.length && paginatedData.length > 0"
              @change="selectAll($event.target.checked)"
            )
          
          th(
            v-for="column in columns"
            :key="column.key"
            @click="sort(column.key)"
            :class="{ 'data-table__sortable': column.sortable !== false }"
            class="data-table__header"
          )
            span {{ column.title }}
            span(
              v-if="sortField === column.key"
              class="data-table__sort-indicator"
            ) {{ sortDirection === 'asc' ? '↑' : '↓' }}
      
      tbody
        tr(
          v-for="item in paginatedData"
          :key="item._id"
          class="data-table__row"
        )
          td(v-if="selectable" class="data-table__checkbox-column")
            input(
              type="checkbox"
              :checked="isSelected(item)"
              @change="selectItem(item, $event.target.checked)"
            )
          
          td(
            v-for="column in columns"
            :key="column.key"
            class="data-table__cell"
          )
            template(v-if="column.slot")
              slot(:name="column.slot" :item="item")
            template(v-else)
              span {{ item[column.key] }}
          
          td(v-if="$slots.actions" class="data-table__actions-cell")
            slot(name="actions" :item="item")
  
  div(v-if="!loading && paginatedData.length === 0" class="data-table__empty")
    span Нет данных для отображения
  
  div(v-if="!loading && totalPages > 1" class="data-table__pagination")
    button(
      @click="currentPage = currentPage - 1"
      :disabled="currentPage === 1"
      class="data-table__pagination-btn"
    ) ←
    
    span(class="data-table__pagination-info")
      | Страница {{ currentPage }} из {{ totalPages }}
    
    button(
      @click="currentPage = currentPage + 1"
      :disabled="currentPage === totalPages"
      class="data-table__pagination-btn"
    ) →