table

Funcionalidades

• Listar registros
• Paginar registros
• Filtrar registros

Unicamente debes pasarle la url donde realizara las peticiones get para listar los registros o si prefieres hacerlo manualmente puedes pasarle los items a renderizar

Uso del componente Table

<template>
  <div>
    <!-- Tabla de sinistros -->
    <Table
      :items="localItems"
      :inputs="filterInputs"
      :striped="true"
      :fields="fields"
      :url="www.api.com"
      :requestConfiguration="requestConfiguration"
      @getItems="localItems = $event"
      ref="refTable"
    >
    <template v-slot:cell(edit)="{ data }: { data: any }">
      <div>
        <CButton
          background="bg-white"
          :customClass="`p-1`"
          @click="onOpenEdit(data)"
          type="button"
        >
          <template v-slot:content>
            <img :src="editIcon" alt="editar">
          </template>
        </CButton>
      </div>
    </template>
    <template  v-slot:cell(delete)="{ data }: { data: any }">
      <CButton
        background="bg-white"
        :customClass="`p-1`"
        type="button"
        @click="handleDelete(data)"
      >
        <template v-slot:content>
          <img :src="deleteIcon" alt="basura">
        </template>
      </CButton>
    </template>
      <template v-slot:table-busy>
        <div class="text-center text-dark my-2">
          <!-- Contenido personalizado de carga -->
        </div>
      </template>
    </Table>
  </div>
</template>

<script lang="ts" setup>
const fields: any = ref([
  {
    key: 'id',
    label: '##',
    sortable: true,
  },
  {
    key: 'nombre',
    label: 'nombre',
  },
  {
    key: 'created_at',
    label: 'Fecha',
    formatter: (item: string) => formatDateTime(item),
  },
  {
    key: "edit",
    label: "Editar",
  },
  {
    key: "delete",
    label: "Eliminar",
  },
]);

const filterInputs = ref<Array<any>>([
  {
    key: 'nombre',
    type: 'text',
    placeholder: 'Nombre',
    value: '',
    state: null,
    cols: 6,
  },
]);

const localItems: any = ref([])
</script>

Propiedades

El componente Table acepta las siguientes propiedades:

Propiedad	Tipo	Descripción
items	Array	Datos a mostrar en la tabla.
fields	Array	Configuración de los campos de la tabla.
inputs	Array	Campos de entrada para los filtros.
striped	Boolean	Controla el aspecto visual de la tabla.
hover	Boolean	Controla el resaltado al pasar el mouse sobre las filas.
url	String	URL para obtener datos de forma remota.
requestConfiguration	Object	Configuración adicional para la solicitud HTTP.
searchable	Boolean	Habilita la funcionalidad de búsqueda y filtros.
currentPage	Number	Página actual en la paginación.
totalRows	Number	Número total de filas en la paginación.
perPage	Number	Número de elementos por página en la paginación.
searchIcon	String	Ruta del icono para el botón de búsqueda.
searchButtonConfig	Object	Configuración personalizada para el botón de búsqueda.
resetButtonConfig	Object	Configuración personalizada para el botón de reinicio de filtros.

Slots

El componente Table ofrece los siguientes slots personalizables:

Slot	Descripción
table-busy	Contenido personalizado que se muestra durante la carga de datos.
cell	Personaliza el contenido de las celdas de la tabla.
filter	Personaliza los campos de filtro de la tabla.