Tracing table

[turb]

Hi,

is there any way to trace information in a table way (column/ row) so data are all aligned.

I'm currently using some \t caracters but when a word is longer that the others, it break it all.

So, is there any way to trace clear data in column??

thank

[senocular]

You'll need some logic to figure out what values are in your table and which are the longest. Then you need to add to the shorter ones to reach that length. I don't think anything does this automatically, but I wouldn't be surprised if something out there in the wild wasn't already pre-built to make this possible. I don't know where you might be able to find one, but maybe google, or someone else here would know (or just make your own ;)).

[IQAndreas]

I'd recommed, instead of creating one big textField to hold all the info, create several textFields, one for each "cell". Then have a multidimensional array containing all the textFields.

I could even create a new "Table" class for you...

Hm... I'll do so. Wait about 20 mins. If it takes longer, I probably got distracted. :P Then someone else might be able to make the code.

[theCodeBot]

I'd recommed, instead of creating one big textField to hold all the info, create several textFields, one for each "cell". Then have a multidimensional array containing all the textFields.

I could even create a new "Table" class for you...

Hm... I'll do so. Wait about 20 mins. If it takes longer, I probably got distracted. :P Then someone else might be able to make the code.

I think the OP was asking about how to do this with trace(); - in which case, you do not have the ability to create fixed width fields, but you DO have the advantage of a fixed-width font, so you can easily calculate the needed extra spaces as Senocular suggested. Here's how I would to it:

1.) Store the table in a multidimensional Array (each index is a row, and each row is an array of items in that row)
2.) Make a copy of the array and rotate it (that is, make it columns and then rows)
2b.) For each column, calculate the longest string in the array
2c.) Once this length is found, loop through again. Add the difference in length in spaces to them.
2d.) Now that the spaces are added, rotate the array back
3.) Now loop through the doctored up array and trace each row out, with an extra space or two's padding between items so you can tell where one row ends and the next begins.

Voila! It looks like a left-aligned table! (If you added the spaces at the beginning rather than the end of each string, it would appear right aligned)

I know that the rotation back and forth is kinda expensive as far as CPU time goes, especially since it's a trace function, and there is probably a faster way to do it, but for the sake of code simplicity, I prefer this way.

[senocular]

I actually did a little script when I first read the thread but never got around to posting it (I thought IqA might pull something out).

This does I think more or less what theCodeBot described.

function traceTabular(data:Array, delim:String = " | ", tabSize:int = 4):void {
if (!data) trace(data);

var colMetrics:Array = [];
var currWidth:int;
var delimLen:int = delim ? delim.length : 0;
var x:int, y:int, xn:int, yn:int = data.length;

// pass 1; determine sizes
for (y=0; y<yn; y++){

xn = (data[y] is Array) ? data[y].length : 0;
for (x=0; x<xn; x++){

if (colMetrics[x] == undefined){
colMetrics[x] = {length:0, tabs:0};
}

currWidth = delimLen + String(data[y][x]).length;
if (colMetrics[x].length < currWidth){
colMetrics[x].length = currWidth;
colMetrics[x].tabs = Math.ceil(currWidth/tabSize);
}
}
}

// pass 2; generate output
var output:String = "";
var content:String;
var tabCount:int;
for (y=0; y<yn; y++){

if (output) output += "\n";

xn = (data[y] is Array) ? data[y].length : 0;
for (x=0; x<xn; x++){

content = delim + String(data[y][x]);
output += content;

currWidth = content.length;
tabCount = colMetrics[x].tabs - int(currWidth/tabSize);
while (tabCount--) output += "\t";
}
output += delim;
}

// print generated output
trace(output);
}

Example usage:

var sample:Array = [
[1, "hello", "world!", "A"],
[2, "looooooonnnngggg", null, "B-"],
[3, "", "empty", "A+"]
];

traceTabular(sample);

Outputs:

| 1 | hello | world! | A |
| 2 | looooooonnnngggg | null | B- |
| 3 | | empty | A+ |

^errr... that doesn't look so hot in the forum. No matter - just adjust the tabSize parameter...


traceTabular(sample, " | ", 8);
and...

| 1 | hello | world! | A |
| 2 | looooooonnnngggg | null | B- |
| 3 | | empty | A+ |

:pleased:

[turb]

Wow .... awesome Senocular,

thank you very much!