Wondering what’s next for npm?Check out our public roadmap! »

@mcsoft/tabla-paginadaTypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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 Language Software License Version Downloads

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.

Install

npm i @mcsoft/tabla-paginada

DownloadsWeekly Downloads

2

Version

1.0.0

License

MIT

Unpacked Size

91.1 kB

Total Files

13

Last publish

Collaborators

  • avatar