[RELEASED] EditorGUITable - Display collections in a table

Asset Store Link

Documentation ​

A beautiful, easy-to-use and customizable table to display in the Unity Editor!

​

This package helps programmers create nice visual editors for artists and game designers to use in the Editor.

Forget the neverending lists of lists of parameters to tweak!

It uses the GUI elements and just organizes them in a table, so the style is consistent with the rest of the editor.

Many levels of simplicity / customization

Just use the [Table] attribute on a collection.

Or draw it yourself in Editor scripts, using one of many ways, from the basic to the most complex.

• Just give the collection as parameter and let the plugin automatically create columns for each property
  
• Choose which properties you want to display
  
• Choose which properties you want to display + customize the columns
  
• Pass functions that create the cells from the elements of the collection
  
• Create each cell to draw in the table

All the nice options

• Sort by a column
  
• Resize columns
  
• Optional columns
  
• Reorder the elements
• Filter the content

​

 

Hi Jeremy, is it possible to set the width of the table by default on the custom inspector size for the [Table] attribute ? And to refresh that when it is resized ?

I have this kind of problem and this is not really handy :

 

It's is really impossible to set some percent value for the table Column ? Can i have an answer please...

 

Hi @Dizy
Very sorry for the late answer!
You can set the size of each column when using the [Table] attribute like so:

Code (CSharp):

1. [Table(new string [] {"property1", "property2"}, new float[] {200f, 250f})]

(Note that C# Attributes can only accept primitive types as parameters, this is why this signature seems a bit like poor design. C# specs for reference)

About relative sizes, it is not implemented right now, but I will look into it. Thank you for the suggestion.

 

Hi @Dizy
I integrated the Relative columns feature in Version 2.2, which is released now.
Add the option "Relative (true)" to a column, the Width value will now be relative instead of absolute (0.5 means 50% of the containing view, etc).
Relative columns will automatically resize with the view.
You can add options with the [Table] attribute by adding them after the property name.
For example:

Code (CSharp):

1. [Table(new string [] {
2.     "property1: Relative(true), Width(0.25)",
3.     "property2: Relative(true), Width(0.75)"})]
4.  

This will make the first column 25% and the second column 75% of the view the table is in.

I hope that's useful!

 

Thx for the reply, i tested the 2.2 version and it works like a charm but the scroll bar is not taken into account and i have to use an offset of 0.1 to fit (not the best result).

Example :
[ReorderableTable(new[]{"Biome: Relative(true)", "Rank: Relative(true)"}, new[]{0.45f, 0.45f})]
public List<UsableBiome> FavoriteBiomes = new List<UsableBiome>();

 

@Dizy
I see. The scroll bar should be subtracted indeed. I will look into that.
Glad that it helped you. And thank you for updating your review!

 

Hello there,

great tool, works just fine...

But I found one issue that took me some time to realize what was going wrong...

When a property I want to show in a table has the [Header("blabla")] attribute attached, the cell drawer seems to have a problem with it, and draws a misplaced dropdown menu with the header name set, that cannot be manipulated.

Thanks in advance,
Aesi

See attached screenshot:

 

Hi @Aesi
Thank you for your message.

I see where the issue comes from. But what I don't know is: what would you expect/like the table to do here? Would you want the header to be in his own column? Or to be ignored in the table?

The issue goes down to the way unity decorator attributes like [Header] work. Even if they sound like independent elements, decorators are technically linked to the next field declared (try to place a header with no serialized property below, you will see it fails because there is no field to attach it to).

So here the header is actually an attribute of your shipName field. This attribute will increase the height of the field, draw the header on top and the actual property at the bottom. Here the table has the default row height value, so the header+property doesn't fit in a row.

If you use the Table's RowHeight option to set it to a bigger value (say 100), you will see the header being drawn at the top of each cell in the shipName column. But I guess that's not what you want to do

 

Hello Bourriquet,

thanks for the fast response! Hey man, it's christmas... go home and celebrate!

But regarding your question: it would be nice if the [Header] would be just ignored... I use it to make the inspector more readable, or to arrange properties better under one "category"... as you guessed - the header has nothing to do with that particuliar item, but the items to come afterwards...

Not sure if my idea fits into your plugin?

Thanks again man, and now: go home and stay there for at least the next 3 days
Sebastian

 

Don't worry about me, I'm enjoying the holidays with the family

That makes sense, I'll see if that's possible to ignore an attribute while drawing a property.

In the meantime, if you are using an editor script to draw the table, you can use custom columns to avoid drawing the header (code below).

If you are using the [Table] attribute, I don't think there is a solution here. You could add a bullshit property between the header and the shipName, so the header is attached to this BS property that you just don't select for the table. That's the best I can think of.

Here is the DrawTable call you could use in an editor script.

Code (CSharp):

1. tableState = GUITableLayout.DrawTable (
2.   tableState,
3.   serializedObject.FindProperty("shipDefinitions"),
4.   new List<SelectorColumn>()
5.   {
6.     new SelectFromFunctionColumn(
7.       sp => new StringCell(sp.FindPropertyRelative("shipName")),
8.       TableColumn.Title("Ship Name")),
9.     new SelectFromPropertyNameColumn("xp")
10.   });

And you'll need to add this StringCell class in an Editor Folder:

Code (CSharp):

1. using UnityEngine;
2. using UnityEditor;
3. using EditorGUITable;
4.  
5. class StringCell : TableCell
6. {
7.     SerializedProperty sp;
8.  
9.     public override void DrawCell(Rect rect)
10.     {
11.         if (sp != null)
12.         {
13.             sp.stringValue = EditorGUI.TextField(rect, GUIContent.none, sp.stringValue);
14.             sp.serializedObject.ApplyModifiedProperties();
15.         }
16.         else
17.         {
18.             Debug.LogWarningFormat("Property not found: {0} -> {1}", sp.serializedObject.targetObject.name, sp.propertyPath);
19.         }
20.     }
21.  
22.     public override string comparingValue
23.     {
24.         get
25.         {
26.             return GetPropertyValueAsString(sp);
27.         }
28.     }
29.  
30.     public StringCell(SerializedProperty property)
31.     {
32.         this.sp = property;
33.     }
34. }
35.  

 

@Aesi
I just submitted a new version with a new column option: IgnoreAttributes. You can set this option to true for your properties that have attributes above them that mess with the display in the table.
So in your example, that would be:

Code (CSharp):

1. [Table("shipName: IgnoreAttributes(true)", "xp")]

Let me know if it works for you.
It might take a week or two before the update gets approved, let me know if you need it more quickly.

 

Hello, just bought this - but it is not working quite well..

1. [TextArea] is rendered in a single line - which make it unusable.
2. Is there way to resize the row height?
3. Any chance to display the sprite as part of the sprite selection?
4. In the manual, it refers to [Table] but I only see [TableAttribute], am I missing something?

Thanks,
Allen

 

Hi Allen.
Thanks for your purchase and feedback.
1. I will look into this.
2. Yes. You can use the "RowHeight" table option.

Code (CSharp):

1. [Table(new string[]{"property1", "property2", etc}, new string[]{"RowHeight(50)", other options..})];

3. What do you mean by "part of the sprite selection"?
4. [Table] and [TableAttribute] are the same thing. C# automatically appends "Attribute" if needed. (more on this in Microsoft Docs)

 

@achan_unity
Strings marked with [TextArea] are rendered in multiline fields for me, but they do have an empty space on top
I will fix this case. Thanks for reporting.

 

@achan_unity
OK, it's fixed now. I will push the new version to the store.

 

This is great. Thanks.
Regarding the Sprite - I'd like to see if it is possible to show a preview of the Sprite as a small icon right in the Sprite Selector. It will make editing much easier.

 

Oh, I see, you mean in case you have a Sprite property in your elements.
Strangely, by default, Unity shows a preview for Texture2D's but not for Sprites (see in SpriteRenderer for example: ), so that's what will happen in the table too.
I will add a special Cell Type for that in the next version.

 

In the meantime, you can also create a custom attribute for that.
Add these 2 classes to your project.

Code (CSharp):

1. using UnityEngine;
2.  
3. public class ImageAttribute : PropertyAttribute
4. {
5.  
6.     public float height;
7.  
8.     public ImageAttribute(float height)
9.     {
10.         this.height = height;
11.     }
12.  
13.     public ImageAttribute()
14.     {
15.         this.height = 80f;
16.     }
17.  
18. }

Code (CSharp):

1. using UnityEngine;
2. using UnityEditor;
3.  
4. [CustomPropertyDrawer(typeof(ImageAttribute))]
5. public class ImageAttributeDrawer : PropertyDrawer
6. {
7.  
8.     public override float GetPropertyHeight(SerializedProperty property, GUIContent label)
9.     {
10.         ImageAttribute imageAttribute = (ImageAttribute)attribute;
11.         return imageAttribute.height;
12.     }
13.  
14.     public override void OnGUI(Rect position, SerializedProperty property, GUIContent label)
15.     {
16.         property.objectReferenceValue = (Sprite)EditorGUI.ObjectField(position, label, property.objectReferenceValue, typeof(Sprite), false);
17.         property.serializedObject.ApplyModifiedProperties();
18.     }
19.  
20. }

Then add [Image] before your Sprite declaration, and it will show up like that all the time, table or not.

 

@achan_unity
The update is already live (the Asset Store team is super efficient right now).
So now you can just do:

Code (CSharp):

1. [Table(new string[]{"yourSpriteProperty:CellType(ImageSpriteCell)",  other properties}, new string[]{"RowHeight(50)"})];

 

Hey @bourriquet
I have a big problem .... I can't use GUITableState. The Console Error Message is "error CS0246: The type or namespace name `GUITableState' could not be found.Are you missing an assembly reference?". If i copy the Folder "[...]/Code/Editor" from "Assembly-CSharp-Editor" to "Assembly-CSharp" then the Error dissapear at Visual Studio but in Unity the Error is still there If i restart Unity then it will change the reference in VS and the Error appears in both programs.

 

Hi @Schiz_
Are you writing an editor script or using the [Table] attribute directly in a gameplay script?
You need and can use the GUITableState only if you are writing an editor script.

 

I'm writing a Custom Editor for Terrain generation (with a nice course on udemy ) ,also yes it's a Editor Script and not a gameplay Script. At the moment ,my only "workaround" is to use a "light" Version of your nice Asset (got it from the udemy course) and with the light version there is no Error and my Editor Script works.

Code (CSharp):

1. using UnityEngine;
2. using UnityEditor;
3. using EditorGUITable;
4.  
5. [CustomEditor(typeof(CustomTerrain))]
6. [CanEditMultipleObjects]
7.  
8. public class CustomTerrainEditor : Editor
9. {
10.  //...
11.  // many SerializedProperty declaration here
12. // ...
13.  
14. GUITableState perlinParameterTable; //ERROR ON THIS LINE
15.  
16. }

 

@Schiz_
What version of Unity are you using? I will test it.
Can you also try doing:

Code (CSharp):

1. EditorGUITable.GUITableState perlinParameterTable;

 

Yes i tried it, but the Error was still there. I use Unity 2018.3.0f2

 

@Schiz_
Your editor script is in a folder named "Editor", right?
This error is to be expected if it is not the case.

 

Is there any way to retrieve which row is currently selected in the table?

 

@chris-sigono

Selected as in the whole row selected in a reorderable table, like this?


Or just the row of the field currently being edited, like this?


For the first case, you can get it with

Code (CSharp):

1. tableState.reorderableList.index

For the second case, it's not possible in the current state, but I could add a way to retrieve it if that can be useful.
Can I ask what you need this for?

 

@bourriquet ,

Hi, like the look of this Asset, and the runtime one too. Do they play nicely with Odin?

Also does this and/or the runtime UI table asset work with public variables or does it have to be Properties?

Also can it scroll on the horizontal where there are lots of displayed columns?

 

Hi @Duffer123

I don't have the Odin plugin, so I cannot say for sure. If you purchase it and experience conflicts, I will gladly provide a refund and work on fixing it.

EditorGUITable exposes the serialized properties by default, but you can display any other data using the more advanced calling options.

The Runtime UITable can display any variable in your class, property or field, serialized or not, public or private.

 

@bourriquet ,

Excellent. Thanks. Will purchase.

 

@bourriquet ,

Have purchased... Question - can you display scriptableobject class(es) in columns?

 

@Duffer123
Do you mean display a collection of ScriptableObjects in a table?
Yes, the collection's elements can be any class. If they are ScriptableObjects, by default, the first column will be the referenced object, then its properties.

 

I have scriptable objects with list properties and they are not displayed properly. How can I get around this?

 

Hi @velenrendlich
Sorry, the plugin doesn't support list properties. It's unclear how it should/could be displayed, as the length varies.
If displaying this list is not mandatory for you, you can select only the other properties for the table.
If you want to show a fixed number of elements of this list, you can use custom columns (but you will need an editor script).
I will come back with some example code.

 

Code (CSharp):

1. public override void OnInspectorGUI ()
2. {
3.   List<SelectorColumn> propertyColumns = new List<SelectorColumn>()
4.   {
5.     new SelectFromPropertyNameColumn("stringProperty"),
6.     new SelectFromPropertyNameColumn("floatProperty"),
7.     GetElementColumn("listProperty", 0),
8.     GetElementColumn("listProperty", 1),
9.     GetElementColumn("listProperty", 2),
10.   };
11.  
12.   tableState = GUITableLayout.DrawTable(
13.     tableState,
14.     serializedObject.FindProperty("myScriptableObjects"),
15.     propertyColumns);
16. }
17.  
18. TableCell GetElementCell(SerializedProperty sp, int index)
19. {
20.   if (sp.arraySize > index)
21.     return new PropertyCell(sp.FindPropertyRelative(string.Format("Array.data[{0}]", index)));
22.   else
23.     return new LabelCell("");
24. }
25.  
26. SelectorColumn GetElementColumn(string listProperty, int index)
27. {
28.   return new SelectFromFunctionColumn(
29.     sp => GetElementCell(sp.FindPropertyRelative(listProperty), index),
30.     TableColumn.Title(string.Format("listProperty[{0}]", index)));
31. }

 

Displaying lists is not necessary for me, but I can't select other properties when using scriptable objects, then I also lose the "object reference" property in the editor. It would be most helpful if you could show me an example code to draw only non-list properties of an scriptable object and "object reference" part of it.

Another question, how would I display properties with TextArea attribute?

 

@velenrendlich
You're right, "Object Reference" should be displayed even when you select the properties manually. I will fix this and upload a new version.
In the meantime, if you can use an editor script, here is the code to add the "Object Reference" column.

Code (CSharp):

1. public override void OnInspectorGUI ()
2. {
3.   List<SelectorColumn> propertyColumns = new List<SelectorColumn>()
4.   {
5.     new SelectObjectReferenceColumn (),
6.     new SelectFromPropertyNameColumn("otherProperty"),
7.     etc..
8.   };
9.   tableState = GUITableLayout.DrawTable(
10.     tableState,
11.     serializedObject.FindProperty("myScriptableObjects"),
12.     propertyColumns);
13. }

 

About the TextArea, if you use an Editor Script:

Code (CSharp):

1. public override void OnInspectorGUI ()
2. {
3.   List<SelectorColumn> propertyColumns = new List<SelectorColumn>()
4.   {
5.     new SelectObjectReferenceColumn (),
6.     new SelectFromPropertyNameColumn("stringProperty", TableColumn.CellType(typeof(TextAreaCell))),
7.     new SelectFromPropertyNameColumn("otherProperty"),
8.     etc..
9.   };
10.   tableState = GUITableLayout.DrawTable(
11.     tableState,
12.     serializedObject.FindProperty("myScriptableObjects"),
13.     propertyColumns,
14.     GUITableOption.RowHeight(50f));
15. }

If you use the [Table] attribute:

Code (CSharp):

1. [Table(new string[] { "stringProperty:CellType(TextAreaCell)", "otherProperty", etc }, "RowHeight(45)")]

 

Thanks for the reply. So I tried your editor solution, the "new SelectObjectReferenceColumn()" I was able to bring the object reference back. But I couldn't get the TextArea part to work even though I tried both attribute and editor solution.

Code (CSharp):

1.     public override void OnInspectorGUI()
2.     {
3.         DrawDefaultInspector();
4.  
5.         List<SelectorColumn> propertyColumns = new List<SelectorColumn>()
6.         {
7.             new SelectObjectReferenceColumn(),
8.             new SelectFromPropertyNameColumn("date"),
9.             new SelectFromPropertyNameColumn("content",
10.             // If I remove  this part, it works
11.             TableColumn.CellType(typeof(TextAreaCell)))
12.         };
13.  
14.         tableState = GUITableLayout.DrawTable(
15.           tableState,
16.           serializedObject.FindProperty("messagesSent"),
17.           propertyColumns,
18.           GUITableOption.RowHeight(50f)
19.           );
20.     }

Here the "content" has TextArea attribute on it, I still get NullReferenceException in editor.

Secondly, after drawing the table with editor, the ability to extend and order the list is gone. How would I make this look more like "ReorderableTable" attribute using editor code?

 

@velenrendlich
To get the Reorderable back, add the option GUITableOption.Reorderable(true) in your DrawTable call.
About the NullReferenceException, can you share the full error message please?

 

Reorderable(true) works like a charm. Thanks. Here is my full error:

NullReferenceException: Object reference not set to an instance of an object
EditorGUITable.TextAreaCell.DrawCell (Rect rect) (at Assets/GUITable/Code/Editor/Cells/TextAreaCell.cs:26)
EditorGUITable.GUITable.DrawLine (EditorGUITable.GUITableState tableState, System.Collections.Generic.List`1 columns, System.Collections.Generic.List`1 row, Single currentX, Single currentY, Single rowHeight) (at Assets/GUITable/Code/Editor/Tables/GUITable.cs:367)
EditorGUITable.GUITable.DrawTable (Rect rect, EditorGUITable.GUITableState tableState, System.Collections.Generic.List`1 columns, System.Collections.Generic.List`1 cells, UnityEditor.SerializedProperty collectionProperty, EditorGUITable.GUITableOption[] options) (at Assets/GUITable/Code/Editor/Tables/GUITable.cs:262)
EditorGUITable.GUITableLayout.DrawTable (EditorGUITable.GUITableState tableState, System.Collections.Generic.List`1 columns, System.Collections.Generic.List`1 cells, UnityEditor.SerializedProperty collectionProperty, EditorGUITable.GUITableOption[] options) (at Assets/GUITable/Code/Editor/Tables/GUITableLayout.cs:169)
EditorGUITable.GUITableLayout.DrawTable (EditorGUITable.GUITableState tableState, UnityEditor.SerializedProperty collectionProperty, System.Collections.Generic.List`1 columns, EditorGUITable.GUITableOption[] options) (at Assets/GUITable/Code/Editor/Tables/GUITableLayout.cs:111)
DialogueEditor.OnInspectorGUI () (at Assets/PhoneinPhoneScripts/Apps/Messaging/ScriptableObjects/Editor/DialogueEditor.cs:25)
UnityEditor.InspectorWindow.DrawEditor (UnityEditor.Editor[] editors, Int32 editorIndex, Boolean rebuildOptimizedGUIBlock, System.Boolean& showImportedObjectBarNext, UnityEngine.Rect& importedObjectBarRect) (at C:/buildslave/unity/build/Editor/Mono/Inspector/InspectorWindow.cs:1375)
UnityEngine.GUIUtilityrocessEvent(Int32, IntPtr)

 

@velenrendlich
I see. It's a problem with SelectFromPropertyNameColumn.
Please replace SelectFromPropertyNameColumn.cs with this version, and you should be all good.

 

Yes, that worked.Thank you so much for the support again. Still looking forward to attribute fix for the scriptable objects because writing editor scripts for each of my classes is going to take some time

 

@velenrendlich
Thank you for your help in fixing the issues.

I just submitted a new version where:

• The lists are not included in the columns by default

• The "Reference Object" column is always included, even when selecting custom properties

• The issue in SelectFromPropertyNameColumn.cs is fixed

So you should be able to revert to just using [ReorderableTable]

 

Hey, I just got the update.
"Object Reference" column is included now when customizing the attribute.
Lists are still included in the columns though? When I add "ReorderableTable" attribute to my List<ScriptableObject> which has List<ScriptableObject> property it is still included on the editor. I am customizing the properties by myself but wanted to point it out.

 

@velenrendlich
You're right. I fixed it for simple serialized classes but not for referenced objects like ScriptableObjects.
I uploaded a new version.
Thanks for the heads up!

 

It looks wonderful now You are great for making such frequent updates.

 

Your "Enemy" script was causing compiler errors whenever I tried to build my project because it was using PrefabUtility which wasn't supposed to used I guess. I had to delete all examples folders to make it work. Could be useful for next updates.

 

Hi @velenrendlich
You're right. This class can only be used in the editor, so you can just put this Instantiate function in a #if UNITY_EDITOR block.
I will update that now.
Thank you again!