- Home /
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)
Answer by eurosat7 · Feb 25, 2010 at 12:12 PM
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("\n"[0])) {
fields = line.Split("\t"[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.
this link is broken. here's an updated version of this answer in C#:
void ScoreTable(string Scores)
{
float win = Screen.width * 0.6f;
float w1 = win * 0.35f;
float w2 = win * 0.15f;
float w3 = win * 0.35f;
foreach (var line in Scores.Split("\n"[0]))
{
string[] fields = line.Split("\t"[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();
}
}
}
Answer by eurosat7 · Mar 01, 2010 at 04:29 PM
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();
}
}
}
Sorry, but I think that you need to fix your answer. I mean, the formatting, the formatting :D
Answer by Lipis · Feb 25, 2010 at 01:50 PM
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..
Answer by bourriquet · Feb 22, 2018 at 07:20 AM
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 [Table]
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!
Link allowed - Free asset from Asset store. We dont normally allow product advertising.
Sorry I didn't know that. Even if the product is relevant to the OP's question?
Its a fine line. We get lots of ad spammers and bots. If an ad placement is genuinely focussed on helping the OP its allowable. When the link poster has released a new product and got a bit overexcited they generally spam a bunch of links in tenuously related threads. Genuine answers get bogged down fast if we allow this. There is also a section in the forum for Asset Advertisement. You're kind of living in both worlds here although you were totally reserved and only posted 2 links. I appreciate the respectful nature of your linking and also the product is free ;) Thanks for responding.
Answer by Natrion87 · Sep 12, 2014 at 01:26 PM
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 \t" + "B \t" + "C \t" + "\n" +
"1 \t" + "2 \t" + "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("\n"[0])) {
fields = line.Split("\t"[0]);
if (fields.Length >= NrOfDividers) {
GUILayout.BeginHorizontal(Style);
for(int x = 0; x < NrOfDividers; x ++)
{
GUILayout.Label(fields[x], GUILayout.Width(widthOfACell));
}
GUILayout.EndHorizontal();
}
}
}