@mcsoft/tabla-paginada

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.