inegicomponentes-tabulador/src/componentes/cuadros/columnas/index.js

Componentes de visualizacion 2023 - Tabuladores

import React from "react";
import 'bootstrap/dist/css/bootstrap.css'

const Filas = ({f,uid}) => {     
    let aTds = f.map((c,idx) =>{
        let colspan = c.subcolumnas != undefined? c.subcolumnas.length : 1;
        let rowspan = c.rowspan || 1;
        return <th rowSpan={rowspan} colSpan={colspan} key={"celda_col_"+uid+idx} style={c.estilos}>{c.nombre}</th>            
    })
    return aTds;
}

const Columnas = ({parametros}) => {  
    const aCols = parametros.columnas || [];
    const uid = parametros.id;
    
    let renderColumnas = (cols) => {       
        return (
            <tr key={"fila_col_"+uid+1}>
                {cols.map((c,idx) =>{
                    if(c.subcolumnas != undefined){
                        return <Filas key={"fila_comp_"+uid+idx} f={c.subcolumnas} uid={uid+idx}/>
                    }
                })}      
            </tr>
        );

    }
    return (
        <thead className="table-light" key={"thead_"+uid}>
            <tr key={"fila_col_"+uid+"_0"}>
                <Filas key={"fila_comp_"+uid +"0"} f={aCols} uid={uid}/>
            </tr>
            {renderColumnas(aCols)}
        </thead>
    )
}
export default Columnas;