Initial commit for logTable method

README.md

@@ -68,6 +68,7 @@ Properties you can pass to the console element
 | ----		| ----							| ----
 | log		| (...messages: any)=>void			| Log messages to the console. If string, print the value, otherwise, print the JSON value of the message.
 | logX		| (type: string, ...messages: any)=>void	| Log messages of a particular type to the console. The messages will be given the class `react-console-message-{type}`.
+| logTable	| (tableObject: Object)=>void	| Log tabular data to the console. `tableObject` has the format `{ headers: ['header 1', 'header 2'], rows: [['row 1, col 1', 'row 1, col 2'], ['row 2, col 1', 'row 2, col 2']]}`. `headers` is optional.
 | return	| ()=>void					| Signal the current command has finished and a new prompt should be displayed.
 | clearScreen	| ()=>void					| Clear the visible log in the console. Does not clear command history.
 

server.js

@@ -55,6 +55,7 @@ compiler.watch({},function(err,stats) {
 });
 
 // Karma test server
+/*
 let karmaServer = new karma.Server({
 	configFile: `${__dirname}/karma.conf.js`,
 	singleRun: false,
@@ -66,3 +67,4 @@ karmaServer.on('run_complete', function() {
 	logEnd();
 });
 karmaServer.start();
+*/

src/react-console.tsx

@@ -73,28 +73,68 @@ class ConsolePrompt extends React.Component<ConsolePromptProps,{}> {
 	}
 }
 
+interface ConsoleTableHeaderProps {
+	headers?: string[];
+}
+let ConsoleTableHeader: React.SFC<ConsoleTableHeaderProps> = function(props: ConsoleTableHeaderProps){	
+	if(props.headers){
+		return <thead>
+					<tr>
+						{props.headers.map((header: string) => {
+							return <th scope="col" key={ header }>{ header }</th>;
+						})}
+					</tr>
+				</thead>
+	}
+	return null;
+}
+
 interface ConsoleMessageProps {
 	type?: string;
+	isTable?: boolean;
 	value: any[];
 }
 let ConsoleMessage: React.SFC<ConsoleMessageProps> = function(props: ConsoleMessageProps) {
-	return <div className={"react-console-message" + (props.type?" react-console-message-"+props.type:"")}>
-		{props.value.map((val: any)=>{
-			if(typeof val == 'string') {
-				return val;
-			} else {
-				return JSON.stringify(val);
-			}
-		}).join("\n")}
-	</div>;
+	if(props.isTable){
+		const data = props.value[0];
+		return <div className="react-console-message react-console-table">
+			<table>
+				<ConsoleTableHeader headers={data.headers} />
+				<tbody>
+					{data.rows && data.rows.map((row: string[], index: number) => {
+						return <tr key={index}>{row.map((cell: string, cellIndex: number) => { 
+								return <td key={cellIndex}>{cell}</td>; })
+							}</tr>;
+					})}
+				</tbody>
+			</table>
+		</div>;
+	}else{
+		return <div className={"react-console-message" + (props.type?" react-console-message-"+props.type:"")}>
+			{props.value.map((val: any)=>{
+				if(typeof val == 'string') {
+					return val;
+				} else {
+					return JSON.stringify(val);
+				}
+			}).join("\n")}
+		</div>;
+	}
 }
 ConsoleMessage.defaultProps = {
 	type: null,
 	value: [],
+	isTable: false
+}
+
+export interface ConsoleTableObject {
+	rows: Array<string[]>;
+	headers?: Array<string>;
 }
 
 export interface LogMessage {
 	type?: string;
+	isTable?: boolean;
 	value: any[];
 }
 export interface LogEntry {
@@ -189,6 +229,13 @@ export default class extends React.Component<ConsoleProps,ConsoleState> {
 			log: log,
 		}, this.scrollIfBottom() );
 	}
+	logTable = (tableData: ConsoleTableObject) => {
+		let log = this.state.log;
+		log[this.state.log.length-1].message.push({isTable: true, value: [tableData]});
+		this.setState({
+			log: log,
+		}, this.scrollIfBottom() );
+	}
 	return = () => {
 		this.setState({
 			acceptInput: true,
@@ -968,7 +1015,7 @@ export default class extends React.Component<ConsoleProps,ConsoleState> {
 				return [
 					<ConsolePrompt label={val.label} value={val.command} />,
 					...val.message.map( (val: LogMessage, idx: number) => {
-						return <ConsoleMessage key={idx} type={val.type} value={val.value} />;
+						return <ConsoleMessage key={idx} type={val.type} value={val.value} isTable={val.isTable} />;
 					})
 				];
 			})}