Table Pro: When Your Data isn't a Game

I'm trying to use the AddInputColumn function, but I'm afraid I don't quite understand what the first argument of the function is asking for being rather new to scripting. Is there an example anywhere of how to use these?

 

@setford

Sorry... I misspoke on this. The fix will be in release 1.14 which has been submitted to Unity for approval but has not been posted to the Asset Store yet. Please re-test once that release is available or let me know and I'll send you a private link to a patch if this issue is urgent for you.

 

The first argument would be a callback method that should be triggered when the input changes.

Code (csharp):

1.  
2. this.table.AddInputColumn(this.OnInputFieldChange, "City");
3. ...
4. private void OnInputFieldChange(Datum d, Column c, string oldVal, string newVal) {
5. // stuff
6. }
7.  

 

Hi, Eric

the bug for Addinputcolumn is fixed, thanks

there is another question:

the table is connected to one Array, you know the table is initiated in Start, when the Array has been changed in my software, the table is not updated automatically, if the table initiation in Update, the table panel will flash, how to update the table when the table initiation is still in Start?

therefore, the table change can affect the array, but not vice versa.

Thanks in advance

 

You need to update the table.data List<Datum> object. If you are populating that from an array elsewhere in your program you just need to make sure any update to that array is reflected in table.data.

Aka.. Definitely don't mess with table initialize in Update()... that will be way too heavy to perform well. Just keep table.data up to date via whatever construct you wish and the TablePro engine will handle things for you.

 

Thanks for your response on Monday, I managed to get that working now but I've run into a new issue. My table is the child of an object that resize from time to time and when it resizes it redraws the table. However when it redraws the table it ignores that I have it set to 'Restrict 100% Width Max' so it suddenly gets wider than it should and I end up with a scroll bar.

Also, is there any way to force the width of an image column? I only see a way to force the size of the images inside but not the column itself, so I end up with lots of white space.

 

We are looking at this and should report back within a day. Thanks for your patience.

 

Just an update to the issue.

It only seemed to do this when I had an icon in the header. It resizes properly now that I removed it.

I'm also curious if there's a simple way to save all the data in a table so that I can restore it later all at once.

 

I'll have a patch in the next release (1.15) to hopefully address that resizing issue. I was able to (I think) duplicate it on my side and I've got it working better.

Regarding the saving of data in the table... you can access it via the table's table.data attribute. It's a list of Datum elements that you can mirror or 'save' however you like. What you specifically do or save regarding the data in your table is completely up to the rest of your application. We don't do anything more than expose the data so you can grab it and do whatever you want. Make sense?

 

Is it possible to add drop down list for cell input ?

Thanks

 

That does make sense thanks. I am still curious to know if I can set min and max width of an image column. They don't seem to force themselves to the width of the image either, which is really all I want.

 

Nothing out of the box exists for that. We've implemented advanced controls like that in our own internal TablePro usages by using normal test/image cells (instead of the actual TablePro input cells) and then defining the table's selection callback method with the signature:

Code (csharp):

1.  
2. private void OnTableSelected(Datum d, Column c, RectTransform rt)
3.  

This allows you to implement any UI widgets you want in order to facilitate table editing (that's why we return the RectTransform of the selected cell there along with the values) but that implementation is entirely up to your application.

 

Can you post a picture to show me what you are asking there? Cells size for your images like the following screenshot so I'm not sure I'm understanding your question.

 

Is there a method to merge one whole row to one cell.Just like winform .

 

Nope.

 

Only just not getting back to this part of my project. Here's an example of what's happening in my project:

I'm referring to all the extra space to the right of the image in the far right column, it refuses to be any smaller than what you see right now.

I'm also curious if there's a way to have placeholder text in input cells like input fields have, rather than populating them with default data as I did in the image above "Schedule..." and "Response...".

 

Can you post the bit of your code where you are defining your columns?

 

Code (CSharp):

1.         this.table.AddInputColumn(this.OnInputFieldChange,"<b>Date</b>", null, 50f, 2000f);
2.         this.table.AddInputColumn(this.OnInputFieldChange,"<b>Condition</b>", null, 100f, 2000f);
3.         this.table.AddInputColumn(this.OnInputFieldChange,"<b>Name (Dose)</b>", null, 100f, 2000f);
4.         this.table.AddInputColumn(this.OnInputFieldChange,"<b>Instructions</b>", null, 100f, 2000f);
5.         this.table.AddInputColumn(this.OnInputFieldChange,"<b>Schedule</b>", null,  100f, 2000f);
6.         this.table.AddInputColumn(this.OnInputFieldChange,"<b>Response</b>", null, 100f, 2000f);
7.         this.table.AddImageColumn("", null, 20, 20);

This the peice you needed? Just to let you know the crazy widths I have on the text columns were an attempt to force the image column as small as I could.

 

Yep, ok this is making more sense now. TablePro shows a scrollbar on it's right edge when needed. The space you are seeing there is that space reserved for said scrollbar...

Not sure how best to resolve that in this case. Are you sure you're never going to have data in your table that would cause the scrollbar to be necessary?

 

It is a possibility that enough data will exist that needs the scroll bar. However, said scroll bar doesn't need to be part of the table if I set things up with that in mind

 

Well... that's sort of the problem. The scrollbar is part of our engine, we don't really expose anything there to NOT have the scrollbar be include in our table UI layout. We dynamically display both the horizontal and vertical scrollbar as needed.

It's hard to tell from your screenshot how horrible of a hack this is... but is your table truly just in front of a while backdrop? I realize this is a hack... but how much would it stink if you overlaid the right edge of the table with a white Image to just hide the extra room on the table? Is that at all a reasonable work around?

Being a table engine, we typically 'expect' the scrollbar to show more often than not so I'd rather not put a bunch of code in to handle this case where it's not showing if we don't have too.

 

I understand and I think I will leave well enough alone as far as the space on the right goes. Early you responded to someone trying to add dropdowns and we're also trying to implement the same. I've tried to interpret your response to them, but I guess I'm just having trouble wrapping my head around how to get the dropdown into there at all with a text/image column. Datum all require strings of text or a string that points to a Sprite in a dictionary do they not? I'd really appreciate more detail on how to implement other widgets if possible.

Note: This is ScarletTerror, now using a work account

 

Sure thing. The key is just to implement the table selection handler method that includes the rect transform to it's callback:

Code (csharp):

1.  
2.   private void OnTableSelected(Datum d, Column c, RectTransform rt) {
3.     if (c != null && rt != null) {
4.       // show any edit widget you'd like overlaid on top of the screen position of the active 'rt'
5.     }
6.   }
7.  

Does that make sense?

 

Maybe?
The way I'm understanding it, this would make it so the widget only pops into existence when that entry is selected then and the rest of the time it would look like a normal table cell?

 

Ah.. yes, that's exactly correct. Sorry if I wasn't explaining that clearly.

 

Hi, I encountered a wired bug. Steps below.
1.Scroll to the bottom

2. Click the second header of “位置描述” to sort, lots of blank appears in the bottom


3.Scroll up a bit and some rows become transparent or invisible

4. Scroll up a bit more, still the problem

 

This issue is related to your variable height rows. In the interest of performance, we don't/can't measure the height of every row in your data ahead of time. We just measure them as we need to show them.

In your example, you've scrolled to the bottom of the data and are mass-shuffling the result rows so our vertical scroll position no longer is reliable as we haven't measured all rows yet. A better workaround for this would be to reset scroll position to the top of your table when the user re-sorts, else there will be a performance hit if we tried to measure everything at sort time. Can you try that or must the vertical scroll position remain at the bottom of the window?

 

I reset the scroll position to the top and it works fine now. Thank you!

 

Hi there,

thanks for this nice asset, I was wondering how to make a table in Unity which is so easy in HTML and I couldn't believe this is so hard to do im comparison. So you saved me a lot of work
Two things I want to mention:
1. it would be nice if the rows could have alternating background colors for better reading. Of course you can highlight rows but if you don't want to hover over the table...it may also look nicer on screenshots And maybe you want to point out one cell e.g. in a table of rankings you want to make the players data red and the computer opponents data white. You could also implement some kind of expression that calculates the color like in Excel (e.g. negative values will be red etc. maybe you can give Datum a background property and in Row.cs the SetColor() can take the backgroundCOlor of the corresponding datum. Of course this has to be somewhat more sophisticated so that if I set the color in code then the preferences in the inspector for the cell backgroundColor should be ignored)
2. I set my rect transform so it scales with the canvas since I don't know how big the players will make their window and I want to make it resizable if possible (like in HTML). I noticed in the editor if I vary the height, all the text in the table is messed up. On the first page you mentioned something about manually resizing the table during runtime and that one has to redraw the table. What can I do in this case?

Thanks a lot for the good work and support!

 

We don't currently support changing row background color. You can set cell text color any way you wish but the background color is uniform across the table.

Regarding the sizing issue you mentioned, I haven't seen that one for a while. Are you using the most recent version of TablePro?

Here's how the current resize functions in my test:

 

PS... I'm working on this now. I'll see if I can turn around a patch for this quickly.

 

This has been submitted to Unity for approval. We now support alternating row colors. Also, you can (even on the current version) set a datum element's 'backgroundColor' attribute and it'll behave as expected. Sorry... forgot we added that previously.

 

Thanks for the super fast reply.
According to the ReadMe I'm using v1.13 (although the release notes for 1.14 are included so I guess it is 1.14). Regarding the broken text: this was solved by changing how the RectTransform of the Panel should stretch. Sadly, I don't remember which setting I had befor and I could not replicate it. And I was not resizing the panel per se like in your GIF but the editor window. Maybe it is an issue there. Anyway, if I stumble upon it again I will send you the project for tracing.

Nice to hear regarding the backgroundColor, I was reading the earlier posts and realized this was already asked Strangely enough, in my version no backgroundColor attribute exists in the Row-class, only in the Element class.

One more question, when I try updating one cell by

Code (CSharp):

1. public void UpdateResult(int i, string value){
2.         table.data.elements[3].value=value;
3.     }

then all rows "flash". In your example scene "AutoUpdatingAll" when I click the "Update Row" button, only one row flashes and the code seems to be the same. So I guess it is some setting? But I can't see something like that in the general setting.


edit: never mind...I'm just stupid. I was updating my data in a loop and then updated the values everytime instead of only those values that changed...

 

The only setting that really effects that is in the Table inspector under General > Row Animation Duration.
But... it really is only used to turn animation off completely. I'd take a look at making that 0 just to see how it behaves for you though. If you still get a flash you are updating other elements in the table somehow and I may need to see a more full example of what you are doing.

 

Thanks, you were right, I was updating all rows in a loop without checking if their values have changed.

Since you just released 1.16 would it be possible to include the release notes in the first post? Thanks!

 

I am working on Unity 5.5, the scrollbars always show no matter that the data fits and doesnt need the scrollbars, how can i turn them off always for horizontal scrollbars and off for vertical when the data fits?, Thanks.
Best regards.
Jesus.

 

Can you post a screenshot or send me a private message with a sample scene? That's the first I've heard of scrollbars behaving like that so I'm guessing something else is effecting things.

 

No need for that, just create a new Project using Unity 5.5.0p2 install the package and all the sample scenes has the same problem, the horizontal scrollbar always on.

 

Last post was me with my personal account (jesusrg), forget to change sorry.

 

Heh... you're right. Dangit Unity.
Ok, we got our best people on this. ;-)
I'll post back when we have a fix.

 

Ok.. fix is in. This will be included in the next release, but if you want to roll it in yourself now here's the diff:

Control.cs starting at line 372:

Code (csharp):

1.  
2. -    // Check our Scrollbar visibility
3. -    if(this.table.bodySizer.rect.height > this.table.bodyRect.rt.rect.height) {
4. -      this.table.SetGameObjectActiveLater
5. -        (this.table.bodyScroller.verticalScrollbar.gameObject, true);
6. -    }
7. -    else {
8. -      this.table.SetGameObjectActiveLater
9. -        (this.table.bodyScroller.verticalScrollbar.gameObject, false);
10. -    }
11. +    #if UNITY_4 || UNITY_5_0 || UNITY_5_1 || UNITY_5_2 || UNITY5_3 || UNITY5_4
12. +    // Check our Scrollbar visibility, this is controlled automatically in UNITY_5_5+
13. +    if(this.table.bodySizer.rect.height > this.table.bodyRect.rt.rect.height)
14. +      this.table.SetGameObjectActiveLater(this.table.bodyScroller.verticalScrollbar.gameObject, true);
15. +    else
16. +      this.table.SetGameObjectActiveLater(this.table.bodyScroller.verticalScrollbar.gameObject, false);
17. +    #endif
18.  

Control.cs starting at line 433:

Code (csharp):

1.  
2. -    // Check our Scrollbar visibility
3. -    if(this.table.bodySizer.rect.width > this.table.bodyRect.rt.rect.width) {
4. -      this.table.SetGameObjectActiveLater
5. -        (this.table.bodyScroller.horizontalScrollbar.gameObject, true);
6. -    }
7. -    else {
8. -      this.table.SetGameObjectActiveLater
9. -        (this.table.bodyScroller.horizontalScrollbar.gameObject, false);
10. -    }
11. +    #if UNITY_4 || UNITY_5_0 || UNITY_5_1 || UNITY_5_2 || UNITY5_3 || UNITY5_4
12. +    // Check our Scrollbar visibility, this is controlled automatically in UNITY_5_5+
13. +    if(this.table.bodySizer.rect.width > this.table.bodyRect.rt.rect.width)
14. +      this.table.SetGameObjectActiveLater(this.table.bodyScroller.horizontalScrollbar.gameObject, true);
15. +    else
16. +      this.table.SetGameObjectActiveLater(this.table.bodyScroller.horizontalScrollbar.gameObject, false);
17. +    #endif
18.  

Factory.cs add the following after line 218:

Code (csharp):

1.  
2.       #if !UNITY_4 && !UNITY_5_0 && !UNITY_5_1 && !UNITY_5_2 && !UNITY5_3 && !UNITY5_4
3.       this.table.bodyScroller.verticalScrollbarVisibility = ScrollRect.ScrollbarVisibility.AutoHide;
4.       this.table.bodyScroller.horizontalScrollbarVisibility= ScrollRect.ScrollbarVisibility.AutoHide;
5.       #endif
6.  

 

One more tiny suggestion for the comfort, maybe in the DatumElementList you could add public Element Add(int val) and convert the int to string. Otherwise I always have to convert every single int I want to add to the table. In a loop this is not that bad but I want to fill a table with 10-20 rows of different variables.

 

Is it possible using events to say popup an overlay to configure the table e.g. add/remove columns dynamically? I imagine at the very least you could do this but would have to redraw the entire table.

 

Done, this will be in the next release.

 

Yes you could easily implement something like what you describe but you are correct in you assumption that it would force a full table redraw when columns are added or removed. We support adding rows to a 'running' table of course, but columns require the layout guts to recalculate so you'd basically deactivate the current table and reactivate it with the new column set defined.

 

Thank you for your response. I have a couple of implementation questions:

* Do you have any plans to use tooltip variable on Datum types?
* Why when calling table.initialize() do you null out some of the table select events/callbacks? I had setup the callbacks/data then initialised the table and the selected events did not fire (was null) however the activeheader event still fired and isn't nulled.
** Also it's normal practice (in .Net) for events to be initialised as a property and not constructor.

 

Re: Do you have any plans to use tooltip variable on Datum types?
We've implemented tooltip handlers in our own table usages but we don't offer that as part of the TablePro asset. Basically, you've got the data and callbacks defined so you can attach tooltip info to an element then trigger an external callback when an element is mouse'ed over and show the tooltips yourself. It's not a trivial process but the hooks are in TablePro to support it.

Re: Why when calling table.initialize() do you null out some of the table select events/callbacks?
Not sure how that could be. Line 657 to 665 in Factory.cs set the header click callback to either null or the passed in click handler on every call to initialize(). Can you provide a sample of your implementation? (pm if that's easier)

Re: Also it's normal practice (in .Net) for events to be initialised as a property and not constructor.
Agreed. Can't change that much now without impacting the hundreds of people using this silly asset already. I'd definitely do some things differently if writing this asset from scratch again but now that it's been sold a bunch of time I'm kinda stuck with some of that.

 

it's the below lines of code i found interesting:
public void Initialize() {
this.selectionCallback = null;
this.selectionCallbackWithColumn = null;
this.FinishInitialize();
}

this means if i initialise the selectionCallback on the property and then table.Intialize() the event will be nulled. Maybe you should make the selectionCallbacks private or something to stop this happening (limiting it's initalisation only to the constructor) or not null them in the first place. The reason i asked was to find out why you do this in the first place? What are the side effects of not doing this?

 

Ah! Ok, I gotcha. You give me way to much credit implying I had a well thought out reason to code it like that...

In my brain (and the samples usages) you call initialize, set your stuff (this would include any event callbacks here), run your table, repeat. The nulling of those callbacks was just to keep it 'clean' per that flow so a table is in a vanilla state after initialize returns... there's no incredibly good reason for it be like that really... just the flow I adopted.

There should be no reason why you couldn't keep those callbacks set between initializations... but I found it less error-prone to just assume a table is vanilla after initialize and can be reused again any way you want. The table doesn't waste cycles recreating GameObjects and will intelligently reuse the pieces it can on each use, but the 'user-facing' stuff I attempt to make sure is fully reset between calls.

 

I'd like to support tab key and shift-tab to move between input cells, as in a standard spreadsheet. Any way to do this? I didn't see a documented way to provide a handler to capture events at the keystroke level.