react-customtable-test-alvaro
v1.0.6
Published
Prueba de tabla dinamica en React
Downloads
9
Readme
Props de Custom Table
(Array) rows : Lista de objetos a partir de los cuales se rellenara la tabla
ejemplo : [
{name: 'a'},
{name: 'b'},
{name: 'c'}
]
(Array) headCells : Lista de objetos con los datos de la primera celda de cada columna
objeto :
(String) id: Nombre del campo que debe imprimir de los objetos de las lineas,
(Boolean) disablePadding: Quita el padding de la celda,
(String) label: Contenido de la celda,
(String) align: Alineacion que recibe la primera casilla de la columna que puede ser 'left', 'center' o 'right',
(String) alignContent: Alineacion que reciben las casillas de la columna que puede ser 'left', 'center' o 'right',
(Function) style: Funcion de un parametro que retorna el contenido con un estilo personalizado
ejemplo: [
{
id: 'name',
numeric: false,
disablePadding: false,
label: 'Nombre',
align: 'center,
alignContent: 'left',
style: styleFunction
},
]
ejemplo styleFunction : = ( content ) => { return ( <Chip label={content} /> ) }
(String) title : String que se muestra como titulo sobre la tabla
(Array) validation : Lista de objetos con las validaciones con las que se podra filtrar la tabla
objeto :
(String) type: tipo de la validacion que se desea,
Tipos : 'select', 'numericRange', 'dateRange'
(String) target : Nombre del campo de la "row" sobre el cual se aplicara el filtro,
(String) title: Etiqueta que se mostrara sobre el filtro para identificarlo,
(Array[String]) options: En caso de ser un 'select' opciones que se mostraran en el filtro
Ejemplo : [
{
type: 'select',
target: 'name',
title: 'tipo',
options: [ 'a', 'b' ],
},
{
type: 'numericRange',
target: 'age',
title: 'Age'
},
{
type: 'dateRange',
target: 'date',
title: 'Date'
},
]
(Bollean) search : determina si se desea filtro de texto
(Array) actions : Lista de objetos a travez del cual se agregan las acciones para cada row
objeto :
(String) action : nombre de la accion a realizar,
(String) label: texto que se mostrara como opcion,
(HTML?) icon: icono que se mostrara junto a la opcion,
ejemplo : [
{ action: 'view', label: 'View', icon: <Visibility /> },
{ action: 'edit', label: 'Edit', icon: <Edit /> }
];
(Function) handleAction : funcion a travez de la que se trigerean las acciones
ejemplo : = (menu, id) => {
console.log('menu', menu, 'index', id)
if (menu.action === 'view') {
console.log('ver')
} else if (menu.action === 'edit') {
console.log('editar')
}
}
(Function) add : funcion que se ejecutal al precionar el boton add
(String) addText : Texto con el que se muestra el boton add