Something like GUI.Table or a Grid?

I'd like to draw a html like table with table head cells and table data cells. And maybe a hover effect on table rows would be nice. I'd also like to place a button in a table data cell. Any tipps for me?

(please no BrowserTexture answers)

After quite some searching I found this: http://forum.unity3d.com/viewtopic.php?p=59557

No real "GUI.Table" supported.

But ".tom." came up with this:

function ScoreTable(Scores) {
   var win=Screen.width*0.6;
   var w1=win*0.35; var w2=win*0.15; var w3=win*0.35;
   for (var line in Scores.Split("
"[0])) {
      fields = line.Split("	"[0]);
      if (fields.length>=3) {
         GUILayout.BeginHorizontal();
         GUILayout.Label(fields[0], GUILayout.Width(w1));
         GUILayout.Label(fields[1], GUILayout.Width(w2));
         GUILayout.Label(fields[2], GUILayout.Width(w3));
         GUILayout.EndHorizontal();                  
      }
   }
} 

That is not really satisfying but I think it will work out.

I fiddled arround with this a bit and found it pretty usefull. Here is a version that is slightly different. I just needed a table that was as wide as the screen with nice and evenly spread cells, so I simplyfied it. I use a GUIStyle to be able to edit some of the padding and margin properties. Also its in C#

public GUIStyle Style;

//table data
string scores = 
"A 	" + "B 	" + "C 	" + "

" +
"1 " + "2 " + “3”;

void OnGUI() {
    Table(scores, 3); //make the table
}

//Creates a table as wide as the screen, with a number of equally sized dividers 
private void Table(string Scores, int NrOfDividers) {

    float widthOfACell = (float)Screen.width / (float)NrOfDividers;
	string[]fields; 
		
	foreach (string line in Scores.Split("

“[0])) {
fields = line.Split(” "[0]);
if (fields.Length >= NrOfDividers) {
GUILayout.BeginHorizontal(Style);
for(int x = 0; x < NrOfDividers; x ++)
{
GUILayout.Label(fields, GUILayout.Width(widthOfACell));
}
GUILayout.EndHorizontal();
}
}
}

Try using `GUI.SelectionGrid`, but this might not suit you 100% because this is for selecting and I guess only for buttons (find more examples in Unity's Documentation):

/* GUI.SelectionGrid example */
var selectionGridInt : int = 0;
var selectionStrings : String[] = ["Grid 1", "Grid 2", "Grid 3", "Grid 4"];

function OnGUI () {
    selectionGridInt = GUI.SelectionGrid (Rect (25, 25, 100, 30), selectionGridInt, selectionStrings, 2);
}

If you want to be more flexible you can use a combination of `GUILayout.BeginHorizontal()` and `GUILayout.BeginVertical()`. Good luck..

What do you think?

class MyTableClass{
    var gui : GuiScript= null;
    var isVisible : boolean = true;
    var sizeOuter : Rect;
    var sizeInner : Rect;
    var w;
    var cols : Array = null;
    var th : Array = null;
    var tr : Array = null;

    function MyTableClass(creator : GuiScript, pSizeOuter: Rect, pSizeInner: Rect, fullWidth){
        this.gui = creator;
        this.sizeOuter=pSizeOuter;
        this.sizeInner=pSizeInner;

        this.w=fullWidth;

        this.loadData();
    }

    function loadData(){
        this.cols=new Array();
        this.cols.Push(0.2);
        this.cols.Push(0.6);
        this.cols.Push(0.2);

        this.th=new Array();
        this.th.Push("ID");
        this.th.Push("Name");
        this.th.Push("Amount");

        this.tr=new Array();

        var td;

        td=new Array();
        td.Push("2341");
        td.Push("Some Thing");
        td.Push("129");
        this.tr.Push(td);

        td=new Array();
        td.Push("100");
        td.Push("Some Other Thing");
        td.Push("1910");
        this.tr.Push(td);       
    }

    function showInterface(){
        if (!this.isVisible) return;
        GUI.Box(this.sizeOuter, "My Table");
        GUILayout.BeginArea(this.sizeInner);
            Debug.Log(this.th);
            Debug.Log(this.tr);
            Debug.Log(this.cols);
            Debug.Log(this.w);
            this.drawTable(this.th,this.tr,this.cols,this.w);
        GUILayout.EndArea();
    }

    function drawTable(th,tr,cols,w){
        GUILayout.BeginHorizontal();
            var pos=0;
            for (var txt in th){
                GUILayout.Label(th[pos],GUILayout.Width(w*cols[pos]));
                pos++;
            }
        GUILayout.EndHorizontal();
        for (var td in tr)
        {
            pos=0;
            GUILayout.BeginHorizontal();
                for (var cell in td){
                    GUILayout.TextField(cell,GUILayout.Width(w*cols[pos]));
                    pos++;
                }
            GUILayout.EndHorizontal();
        }
    }
}

I had the same issue, having to manually draw many tables, so I came up with this plugin.

You can just call GUITableLayout.DrawTable (collectionProperty);. Or add options. Or you can use the `` attribute so you don’t even have to write a custom editor.

The table has the nice features like sorting rows, resizing, optional columns…

I hope it helps!

1