npm package: @mcsoft/tabla-paginada
Description: Componente de React que genera una tabla paginada la cual puede ser ordenada por los campos de la misma, así como filtrar los resultados.
Author: Jaime Brambila
Latest version: 1.0.0

# Tabla Paginada
Componente de React que genera una tabla paginada la cual puede ser ordenada por los campos de la misma, así como filtrar los resultados.

[![Software Type](https://img.shields.io/badge/McSoft-React%20Library-blue)](#)
[![Language](https://img.shields.io/badge/Language-Spanish-yellow)](#)
[![Software License](https://img.shields.io/badge/License-MIT-brightgreen.svg)](LICENSE)
[![Version](https://img.shields.io/npm/v/@mcsoft/tabla-paginada.svg)](https://www.npmjs.com/package/@mcsoft/tabla-paginada)
[![Downloads](https://img.shields.io/npm/dt/@mcsoft/tabla-paginada.svg)](https://www.npmjs.com/package/@mcsoft/tabla-paginada)

> **Nota:**
Este componente requiere de *Font Awesome 5* y *BootStrap 4* para funcionar correctamente.

## Instalación

```bash
npm install --save @mcsoft/tabla-paginada
```

## Uso

```jsx
import McComponente from '@mcsoft/tabla-paginada';

class Ejemplo extends Component {
  render () {
    return (
      <McComponente />
    )
  }
}
```

## Props (Obligatorios)
| Propiedad | Tipo | Descripción |
|-----------|------|-------------|
| eventoCambiarOrdenamiento | Function | Evento que se ejecuta cuando se presiona un encabezado de la tabla para ordenar los registros mostrados por un campo específico. <br> **eventoCambiarOrdenamiento(ordenamiento: *object*)** <br><br> - **ordenamiento: *object*** - Objeto con los parámetros de ordenamiento. <br> - **ordenamiento.orden: *string*** - Orden en que se mostrarán los registros [*'asc'*&#124;*'desc'*]. <br> - **ordenamiento.ordenadoPor: *string*** - Campo por el que se ordenarán los registros. |
| eventoCambiarPaginaActual | Function | Evento que se ejecuta cuando se presiona un botón de página específica. <br> **eventoCambiarPaginaActual(numeroPagina: *number*)** <br><br> - **numeroPagina: *number*** - Número de página requerida. |
| eventoCambiarRegistrosPorPagina | Function | Evento que se ejecuta cuando se cambia la cantidad de registros que se mostrarán por página. <br> **eventoCambiarRegistrosPorPagina(cantidadRegistroPorPagina: *number*)** <br><br> - **cantidadRegistroPorPagina: *number*** - Cantidad de registros a mostrar por página. |
| eventoObtenerRegistros | Function | Evento que se ejecuta cada que hay un cambio que requiera obtener de nuevo los registros a mostrar. <br> **eventoObtenerRegistros(numeroPagina: *number*, cantidadRegistroPorPagina: *number*, ordenadoPor: *string*, orden: *string*, criterioBusqueda: *string*)** <br><br> - **numeroPagina: *number*** - Número de página requerida. <br> - **cantidadRegistroPorPagina: *number*** - Cantidad de registros a mostrar por página. <br> - **ordenadoPor: *string*** - Campo por el que se ordenarán los registros. <br> - **orden: *string*** - Orden en que se mostrarán los registros [*'asc'*&#124;*'desc'*]. <br> - **criterioBusqueda: *string*** - Criterio de busqueda para filtrar los registros. |
| eventoSeleccionarRegistro | Function | Evento que se ejecuta cuando se hace clic sobre un registro de la tabla. <br> **eventoSeleccionarRegistro(registroId: *any*)** <br><br> - **registroId: *any*** - Id del registro seleccionado |
| registrosEncabezados | Array&#60;object&#62; | Arreglo de objetos con la configuracion de los encabezados de la tabla. <br> - **atributo: *string*** - Atributo del registro que se mostrará en las celdas de la tabla. <br> - **claseEncabezado: *string*** - Clase que se aplicará en el encabezado. <br> - **campo: *string*** - Nombre del campo (Como aparece en la base de datos). <br> - **formatoFecha: *string*** - Formato para la fecha en caso de que el campo sea tipo *'fecha'* (Default: *'DD/MM/YYYY'*). <br> - **titulo: *string*** - Nombre del campo (Como aparecerá en el encabezado de la tabla). |
| registrosLista | Array&#60;object&#62; | Arreglo de objetos con los registros que se mostrarán en la tabla. |
| registrosMostrandoFinal | number | Último registro mostrado en la página actual. |
| registrosMostrandoInicial | number | Primer registro mostrado en la página actual. |
| registrosMostrandoPorPagina | number | Cantidad de registros que serán mostrados en cada página. |
| registrosOrdenadoPor | string | Campo por el que se ordenarán los registros. |
| registrosPaginaActual | number | Página actualmente seleccionada. |
| registrosPaginaFinal | number | Última página existente. |
| registrosTotal | number | Cantidad total de registros. |

## Props (Opcionales)
| Propiedad | Tipo | Predeterminado | Descripción |
|-----------|------|----------------|-------------|
| cantidadBotones | number | 3 |Controla la cantidad de botones de páginas que se mostrarán tanto antes como despues del botón de la página actual. |
| iconoBuscar | string | 'fas fa-search' | Icono (*FontAwesome*) que se mostrará en el boton de buscar. |
| iconoOrdenAscendente | string | 'fas fa-sort-alpha-down' | Icono (*FontAwesome*) que se mostrará en el encabezado cuando los registros esten ordenados de manera ascendente. |
| iconoOrdenDescendente | string | 'fas fa-sort-alpha-up' | Icono (*FontAwesome*) que se mostrará en el encabezado cuando los registros esten ordenados de manera ascendente. |
| iconoSinResultados | string | 'fas fa-list-ul' | Icono (*FontAwesome*) que se mostrará la lista de registros recibida este vacía. |
| registrosMostrandoPorPaginaOpciones | Array&#60;string&#62; | ['20','50','100'] | Arreglo de cadenas con las opciones a mostrar de registros por página. |
| registrosOrden | string | 'asc' | Orden en que se mostrarán los registros [*'asc'*&#124;*'desc'*]. |
| texto | object |  | Objeto con los textos personalizados del componente. |
| texto.botonAnterior | string | 'Anterior' | Texto del botón de página anterior |
| texto.botonPrimera | string | 'Primera' | Texto del botón de la primera página. |
| texto.botonSiguiente | string | 'Siguiente' | Texto del botón de página siguiente. |
| texto.botonUltima | string | 'Última' | Texto del botón de la última página. |
| texto.buscar | string | 'Buscar' | Texto que parecerá en el campo de texto de busqueda. |
| texto.limpiar | string | 'Limpiar' | Texto que parecerá en el boton de limpiar del campo de busqueda. |
| texto.pagina | string | 'Página' | Parte del texto **Página** # de #. |
| texto.paginaDe | string | 'de' | Parte del texto Página # **de** #. |
| texto.resultadosAl | string | 'al' | Parte del texto Mostrando resultados del # **al** # de #. |
| texto.resultadosDe | string | 'de' | Parte del texto Mostrando resultados del # al # **de** #. |
| texto.resultadosMostrando | 'Mostrando resultados del' | Pendiente | Parte del texto **Mostrando resultados del** # al # de #. |
| texto.resultadosPorPagina | string | 'Resultados por página' | Texto que se mostrará junto al selector de resultados por página. |
| texto.sinResultadosDescripcion | string | 'No se encontraron resultados.' | Mensaje que se mostrará cuando la lista de registros este vacía. |
| texto.sinResultadosTitulo | string | 'Sin resultados' | Título que se mostrará cuando la lista de registros este vacía. |