files.map(function(file, i) { var filePath = '/$whistle/' + file.name; return ( <tr> <th className="w-files-order">{ i + 1 }</th> <td className="w-files-date">{file.date}</td> <td className="w-files-path">{filePath}</td> <td className="w-files-operation"> <a className="w-copy-text-with-tips" data-clipboard-text={filePath}>Copy path</a> <a data-name={file.name} onClick={self.downloadFile}>Download</a> <a data-name={file.name} onClick={self.remove}>Delete</a> </td> </tr> ); })
React.createClass({ render: function() { var p = this.props; var order = p.order; var draggable = p.draggable; var columnList = p.columnList; var item = p.item; var style = item.style; return (<table className="table" key={p.key} style={p.style}><tbody> <tr tabIndex="-1" draggable={draggable} data-id={item.id} className={getClassName(item)} style={ROW_STYLE}> <th className="order" scope="row" style={style}>{order}</th> {columnList.map(function(col) { var name = col.name; var className = col.className; var value = name === 'hostIp' ? util.getServerIp(item) : item[name]; var colStyle = getColStyle(col, style); return (<td key={name} className={className} style={colStyle} title={col.showTitle ? value : undefined}>{value}</td>); })} </tr> </tbody></table>); } })
keys.map(function(name) { var item = modal[name]; return ( <tr key={name}> <th className={isHeader && highlight(item.name) ? 'w-bold' : undefined}>{item.name}</th> <td> <pre> {item.data ? <span className="glyphicon glyphicon-file"></span> : undefined} {item.data ? ' [' + util.getSize(item.size) + '] ' : undefined} {item.value} </pre> </td> <td className="w-props-ops"> <a data-name={name} onClick={self.onEdit} className="glyphicon glyphicon-edit" title="Edit"></a> <a data-name={name} onClick={self.onRemove} className="glyphicon glyphicon-remove" title="Delete"></a> </td> </tr> ); })
<thead> {head.map(function(head) { return <th key={head}>{head}</th>; })} </thead>
<th className="w-plugins-order" onDoubleClick={self.enableAllPlugins}>{i + 1}</th> <td className="w-plugins-active" onDoubleClick={self.enableAllPlugins}> <input type="checkbox" title={ndp ? 'Not allowed disable plugins' : (disabled ? 'Disabled' : (checked ? 'Disable ' : 'Enable ') + name)}
Example: props => <EditorConsole variant="slides" {...props} />, table: props => <table {...props} style={{ margin: '16px' }} />, th: props => <th {...props} style={{ padding: '4px' }} />, h2: props => <mdxComponentMap.h2 {...props} style={styles.heading} />, h1: props => <mdxComponentMap.h1 {...props} style={styles.heading} />,
<thead className="torrent-details__table__heading"> <tr> <th className="torrent-details__table__heading--primary"> <FormattedMessage id="torrents.details.trackers" defaultMessage="Trackers" /> <Badge>{trackerCount}</Badge> </th> <th className="torrent-details__table__heading--secondary"> <FormattedMessage id="torrents.details.trackers.type" defaultMessage="Type" /> </th>
<table className="table"> <thead> <th className="w-composer-history-order">#</th> <th className="w-composer-history-date">Date</th> <th className="w-composer-history-method">Method</th> <th className="w-composer-history-url">URL</th> <th className="w-composer-history-body">Body</th> <th className="w-composer-history-operation">Operation</th> </thead> <tbody> <th className="w-composer-history-order">{i + 1}</th> <td className="w-composer-history-date" title={date}>{date}</td> <td className="w-composer-history-method" title={item.method}>{item.method}</td>
<thead className="torrent-details__table__heading"> <tr> <th className="torrent-details__table__heading--primary"> <FormattedMessage id="torrents.details.peers" defaultMessage="Peers" /> <Badge>{peers.length}</Badge> </th> <th className="torrent-details__table__heading--secondary">DL</th> <th className="torrent-details__table__heading--secondary">UL</th> <th className="torrent-details__table__heading--secondary">%</th> <th className="torrent-details__table__heading--secondary">Client</th> <th className="torrent-details__table__heading--secondary">Enc</th> </tr> </thead>