How to use maquette - 10 common examples

tabbed.children.forEach((tab, key) => {
					const isActiveTab = tab === activeTab;
					if (isActiveTab || (childrenNodes[key] && childrenNodes[key].properties.classes['visible'])) {
						tab.invalidate();
						const tabVNode = tab.render();
						tabVNode.properties.classes['visible'] = isActiveTab;
						childrenNodes[key] = tabVNode;
					}
					/* else, this tab isn't active and hasn't been previously rendered */

					tabs.push(h(tabbed.tagNames.tab, {
						key: tab,
						classes: { active: isActiveTab },
						'data-tab-id': `${tabbed.state.id || tabbedList.indexOf(tabbed)}-${tab.state.id || key}`
					}, getTabChildVNode(tab)));
				});

if (isActiveTab || (childrenNodes[key] && childrenNodes[key].properties.classes['visible'])) {
						tab.invalidate();
						const tabVNode = tab.render();
						tabVNode.properties.classes['visible'] = isActiveTab;
						childrenNodes[key] = tabVNode;
					}
					/* else, this tab isn't active and hasn't been previously rendered */

					tabs.push(h(tabbed.tagNames.tab, {
						key: tab,
						classes: { active: isActiveTab },
						'data-tab-id': `${tabbed.state.id || tabbedList.indexOf(tabbed)}-${tab.state.id || key}`
					}, getTabChildVNode(tab)));
				});

				return [ h(tabbed.tagNames.tabBar, tabs), h('div.panels', childrenNodes) ];
			}
		}

render(){
        console.log(`Rendering sheet ${this.props.id}`);
        return (
            h('div', {
                id: this.props.id,
                "data-cell-id": this.props.id,
                "data-cell-type": "Sheet",
                class: "cell"
            }, [
                h('div', {
                    id: `sheet${this.props.id}`,
                    style: this.props.extraData.divStyle,
                    class: "handsontable"
                }, [this.makeError()])
            ])
        );
    }

render(): VNode {
				const dijit: Dijit = this;
				const afterCreate = dijitDataWeakMap.get(dijit).afterCreate;
				return h(dijit.tagName, { afterCreate });
			},
			get dijit(): DijitWidget {

return this.renderChildrenNamed('dataCells').map((dataRow, rowIdx) => {
                let columns = dataRow.map((column, colIdx) => {
                    return(
                        h('td', {key: `${this.props.id}-grid-col-${rowIdx}-${colIdx}`}, [
                            column
                        ])
                    );
                });
                let rowLabelEl = null;
                if(this.props.namedChildren.rowLabels && this.props.namedChildren.rowLabels.length > 0){
                    rowLabelEl = h('th', {key: `${this.props.id}-grid-col-${rowIdx}-${colIdx}`}, [
                        this.props.namedChildren.rowLabels[rowIdx].render()
                    ]);
                }
                return (
                    h('tr', {key: `${this.props.id}-grid-row-${rowIdx}`}, [
                        rowLabelEl,
                        ...columns
                    ])
                );
            });
        }

let columns = row.map((childElement, colIdx) => {
                return (
                    h('td', {
                        key: `${this.props.id}-td-${rowIdx}-${colIdx}`
                    }, [childElement])
                );
            });
            let indexElement = h('td', {}, [`${rowIdx + 1}`]);

render(){
        return (
            h('div', {
                class: "cell container-fluid",
                id: this.props.id,
                "data-cell-id": this.props.id,
                "data-cell-type": "Columns",
                style: this.props.extraData.divStyle
            }, [
                h('div', {class: "row flex-nowrap"}, this.makeInnerChildren())
            ])
        );
    }

makeFirstRow(){
        let headerElements = this.makeHeaderElements();
        return(
            h('tr', {}, [
                h('th', {style: "vertical-align:top;"}, [
                    h('div', {class: "card"}, [
                        h('div', {class: "card-body p-1"}, [
                            ...this._getRowDisplayElements()
                        ])
                    ])
                ]),
                ...headerElements
            ])
        );
    }

render(){
        return(
            h('div', {
                id: this.props.id,
                "data-cell-id": this.props.id,
                "data-cell-type": "Clickable",
                onclick: this._getEvent('onclick'),
                style: this.getStyle()
            }, [
                h('div', {}, [this.makeContent()])
            ]
            )
        );
    }

render(){
        return (
            h('div', {
                id: 'object_database_large_pending_download_text',
                "data-cell-id": this.props.id,
                "data-cell-type": "LargePendingDownloadDisplay",
                class: "cell"
            })
        );
    }
}