1.0.6 • Published 3 years ago

react-customtable-test-alvaro v1.0.6

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

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