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.

Nota: Este componente requiere de Font Awesome 5 y BootStrap 4 para funcionar correctamente.

Instalación

npm install --save @mcsoft/tabla-paginada

Uso

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. eventoCambiarOrdenamiento(ordenamiento: object) - ordenamiento: object - Objeto con los parámetros de ordenamiento. - ordenamiento.orden: string - Orden en que se mostrarán los registros ['asc'|'desc']. - 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. eventoCambiarPaginaActual(numeroPagina: number) - 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. eventoCambiarRegistrosPorPagina(cantidadRegistroPorPagina: number) - 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. eventoObtenerRegistros(numeroPagina: number, cantidadRegistroPorPagina: number, ordenadoPor: string, orden: string, criterioBusqueda: string) - numeroPagina: number - Número de página requerida. - cantidadRegistroPorPagina: number - Cantidad de registros a mostrar por página. - ordenadoPor: string - Campo por el que se ordenarán los registros. - orden: string - Orden en que se mostrarán los registros ['asc'|'desc']. - 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. eventoSeleccionarRegistro(registroId: any) - registroId: any - Id del registro seleccionado | | registrosEncabezados | Array<object> | Arreglo de objetos con la configuracion de los encabezados de la tabla. - atributo: string - Atributo del registro que se mostrará en las celdas de la tabla. - claseEncabezado: string - Clase que se aplicará en el encabezado. - campo: string - Nombre del campo (Como aparece en la base de datos). - formatoFecha: string - Formato para la fecha en caso de que el campo sea tipo 'fecha' (Default: 'DD/MM/YYYY'). - titulo: string - Nombre del campo (Como aparecerá en el encabezado de la tabla). | | registrosLista | Array<object> | 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<string> | ['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'|'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. |