Table Pro: When Your Data isn't a Game

Hello,

Data coming from XML file should be displayed in Unity UI in the run time. Data CANBE changed anytime dependent on the process.

Do you think it is good idea to save this data by using Scriptable Objects?

 

I can't really speak to that. This is beyond the realm of TablePro support. You would be best off posting this in the general Unity forum for discussion.

 

there is an argument passed to them called 'hasHeaderIcon' in Table.Initialize methods. I set this to true.

but there is bug cannot be solved .

Could you help me?

 

how to delete entire raw elements from Table?

 

PM me for discussion. What is your native language? We might need to discuss getting you a refund.

 

AutoUpdatingAll Scene​

There is a script AutoUpdatingAll.cs in the AutoUpdatingAll Scene.
According to the script, I can delete any row elements.
The method OnRowSelected defined as a Row detector.
A Datum.uid property defines rows. However, Datum.uid is string property.
The value of the Datum.uid is changed like a index of the List.

My problem is related to the Datum.uid property.

For example, There is 10 rows in my table.
When I selected and deleted first 2 rows from top (Datum.uid is 1 and 2).
After deleting first 2 rows, next time I selected first 2 rows from top again.
This time Datum.uid should be 1,2 because I selected rows from top.
But Datum.uid shows 3,4.
The reason is Datum.uid keeps string value.
It does not act as a List index.

I would be thankful, if you help me solve this issue please.
Is there any way to detect rows based on the index of List collection?

 

Is this what you are looking for?

Code (CSharp):

1.  
2. private void OnTableSelected(Datum datum) {
3.       if(datum != null)
4.         print(this.table.data.IndexOf(datum));
5. }
6.  

 

Look at Samples/DataTable.cs. You need to pass a dictionary containing your header sprites and then the true/false argument to turn on the header icons.

Code (CSharp):

1.  this.table.Initialize(this.OnTableSelectedWithCol, this.spriteDict, true, this.OnHeaderClick);

 

Code (CSharp):

1. this.table.data.Clear();

 

Design of the Table​

I know that we can change the background color of the each cell.
Can we give sprite image to the background of the cell in order to improve the view of the table?
One cell should contain spriteImage and text as well.

 

No, that's not supported. The cells are all dynamic size based on content so there's not a super easy way to implement that universally.

 

Do you think I cannot access Image Component of the cell by using GetComponent<Image> function in Unity?

 

The engine reuses GameObjects to support many thousands of rows in a table while only rendering what's visible. You could definitely access the Image component of cells and set it however you wish but it probably won't perform very well and it's not something we support in the engine itself for that reason. If you have a small dataset though it might work fine.

 

There is extra column end of the columns in the table. Is there any way to disable it because it does not look cool.

 

Do you have the General Settings > Force 100% Width Min checked?
Also, what is your General Settings > Table Selection UI Mode set to? Try "ROW" if it's not set that way already and you don't actually need individual cell click handling.

 

I made Force 100% Width Min - CHECK and Table Selection UI Mode - "ROW". now it is better than before but When I changed background color of the row - red, it looks there is a extra white column.

Can you tell me how to change the color of extra column. If I change it, it will be solved.

 

Hrmm... I see what you mean. This might need a legit patch. That's not an extra column, but an actual spacing issue that only shows when you color your stuff that way you are. I think it's a bug. I'm on it... one sec.

 

Yes you are right, spacing issue is shown when I color the rows.

 

Just sent you a PM with a link to a patch release. Let me know if it fixes things for you!

 

FIXED! Thank you for your support.

 

Table size can be resizable based on the table contents?
Size of the cells is based on the Image element size which is created in the Canvas. I want the table should be resizable that is to say based on the text value in the cell.

 

Hi!

Love TPro and we can't want to share how 'we're using it here. We're ready to blow some minds!

That said, I'm chasing down a weird focus issue where clicking on a cell to focus (and edit) works -- but only for a frame or two. The caret appears and then immediately the table/cell seems to immediately lose focus. Any keystrokes never make it to the cell.

The code is boilerplate thus far to get up and running and tracing is difficult since it's not clear what's taking focus away.

Thanks!
Drew

 

There is nothing in TablePro to force a table to full vertical height of the container rect, but TablePro does auto-size rows/cells vertically based on text content if you tell TablePro to restrict to 100% width (in the 'general' settings). Your picture shows only short text values fitting on single lines, I think I'm missing what you are asking.

 

Is this: https://forum.unity.com/threads/table-pro-when-your-data-isnt-a-game.347893/page-9#post-4705601
what you are seeing? I haven't been able to duplicate this issue. Can you provide any steps to duplicate in a sample scene?

 

As we know that table size is based on the Image size which is table script attached to.
Can we resize the table based on the whole data table? not each cell of the text and image size.

 

I am going to decrease the height of the Image based on the table data because table contains only 10 rows. There extra space in the picture if you see. Sometimes table contains more than 10 rows. We don't know exact data rows. it depends on the process, it will change.

I just want to resize the height of the Image based on the table data. If more rows means height should be increased ...

 

I want this kind of table vertically and horizontally well organized and sized.

but my table is not like above picture

 

In what way is the TablePro data layout not like your picture? You are just referring to the vertical size, right?

The concept behind TablePro is that we will scale to fit content both vertically and horizontally and it will scale horizontally to fit the container rect, but we do not AT THIS TIME scale vertically to fit the container rect nor do we scale the parent container rect to fit the table. Please clarify what you are looking for and we can consider a solution.

 

Please see the reply above to @unussystems. Are you both working on the same project? I'm assuming so because your questions seem to be so similar, but please let me know if I'm missing something.

 

Code (CSharp):

1.  public void OnPointerEnter(PointerEventData eventData)
2.     {
3.         Debug.Log("The cursor entered the selectable UI element.");
4.     }

Hello,
Is there any way to check when mouse cursor touches any cell of the table?
like above code.

 

Somewhat... it's not actually documented, but we had a need for tooltips on some cells in our own TablePro usage and this callback exists on the Table object:

Code (CSharp):

1. public Action<RectTransform, string> tooltipHandler;

Assign a method to that and you'll get events on mouseover.

The catch is that string argument that is included in the callback. That will pass the (also undocumented) 'tooltip' attribute that exists on each Datum and Element (row and cell) in your table. Both that attribute and the callback need to be defined in order for the callback to fire.

Code (CSharp):

1.  
2. if(this.table.tooltipHandler != null && this._datum != null && !string.IsNullOrEmpty(this._datum.tooltip))
3.   this.table.tooltipHandler(this.rt, this._datum.tooltip);
4.  

Let me know if this gives you what you need or else we can discuss a better more generic solution for general usage.

 

Sorry for the delayed response... Been looking hard at this and was wishing it would just go away.

Ok, one easy thing I'm seeing is that `OnScrollerValueChanged()` is being called repeatedly with a value of 1 (and often 0). If I peek up the stack, the topmost entry point in Unity's ScrollRect.cs:856:

Code (CSharp):

1. if (m_ViewBounds != m_PrevViewBounds || m_ContentBounds != m_PrevContentBounds || m_Content.anchoredPosition != m_PrevPosition)
2. {
3.     UpdateScrollbars(offset);
4.     UISystemProfilerApi.AddMarker("ScrollRect.value", this);
5.     m_OnValueChanged.Invoke(normalizedPosition);
6.     UpdatePrevData();
7. }
8.  

Looking at values each frame, it's very clear that m_Content.anchoredPosition.x is "vibrating", causing this block to fire off and invoke all the scroll pos changed code. I'm surprised that Unity didn't put in logic to ignore this kind of noise, but I digress.

Then I notice this is for a table this is basically a vertical scroller (5 cols and 100 rows) and it's the x value that's vibrating between .1 and .0001 etc. Perhaps when a table fits nearly exactly within one of the dimensions it seems the scroll pos calculation causes it to never stop micro-moving.

Test code:

Code (CSharp):

1. _table.ResetTable();
2.  
3. _table.AddTextColumn();
4. _table.AddInputColumn(this.OnInputFieldChange, "A");
5. _table.AddInputColumn(this.OnInputFieldChange, "B");
6. _table.AddInputColumn(this.OnInputFieldChange, "C");
7. _table.AddInputColumn(this.OnInputFieldChange, "D");
8.  
9. _table.Initialize(this.OnTableSelected);
10.  
11. var numCols = _table.columns.Count;
12.        
13. for (int i = 1; i <= 100; i++) {
14.     var rowID = plan.NewGuidBase64u();
15.     _rowLookup[rowID] = i;
16.     Datum d = Datum.Body(rowID);
17.  
18.     // Col 0 (label row)
19.     d.elements.Add(i.ToString());
20.  
21.     // Add data cols
22.     for (int j = 1; j < numCols; j++) {
23.         d.elements.Add("");
24.     }
25.     _table.data.Add(d);
26. }
27.        
28. _table.StartRenderEngine();
29.  

 

Info: changing the 'f > 0' to 'f > 1.1' in ScrollWatcher:55 causes the issue to go away (but I still feel gross knowing that Unity's scroll detection code is rapid firing):

Code (CSharp):

1.     private void OnScrollerValueChanged(float f) {
2.       if(this.table.inputCell != null && f > 1.1)
3.         this.table.inputCell.RemoveFocus();
4.     }

 

Can you explain your idea in detail with one example having step by step guidance?

 

Sorry for my delay in replying here... what version of Unity are you using and what's your Canvas "Render Mode" set too? I'm not seeing this behavior on my end still an I really want to nail this one down as it sounds yucky.

 

Here you go (the secret sauce is on lines 15, 30, and 40):

Code (CSharp):

1. using System;
2. using UnityEngine;
3.  
4. namespace SLS.Widgets.Table {
5.   public class Simple: MonoBehaviour {
6.  
7.     private Table table;
8.     private const int ROWS = 3000;
9.  
10.     void Start() {
11.  
12.       MakeDefaults.Set();
13.  
14.       this.table = this.GetComponent<Table>();
15.       this.table.tooltipHandler = this.ToolTipHandler;
16.  
17.       this.table.ResetTable();
18.  
19.       this.table.AddTextColumn("Column1");
20.       this.table.AddTextColumn("Column2");
21.       this.table.AddTextColumn("Column3");
22.  
23.       this.table.Initialize(this.OnTableSelected);
24.  
25.       for(int i = 0; i < ROWS; i++) {
26.         Datum d = Datum.Body(i.ToString());
27.         d.elements.Add("Col1:Row" + i.ToString());
28.         d.elements.Add("Col2:Row" + i.ToString());
29.         d.elements.Add("Col3:Row" + i.ToString());
30.         for(int j = 0; j < d.elements.Count; j++)
31.           d.elements[j].tooltip = "Row:" + i + " Cell:" + j;
32.         this.table.data.Add(d);
33.       }
34.  
35.       // Draw Your Table
36.       this.table.StartRenderEngine();
37.  
38.     }
39.  
40.     private void ToolTipHandler(RectTransform rt, string tip) {
41.       Vector3[] corners = new Vector3[4];
42.       rt.GetWorldCorners(corners);
43.       Debug.Log("Mouseover: " + corners[0] + " Tooltip: " + tip);
44.     }
45.  
46.     private void OnTableSelected(Datum datum, Column column) {
47.       string cidx = "N/A";
48.       if(column != null)
49.         cidx = column.idx.ToString();
50.       if(datum != null)
51.         print("You Clicked: " + datum.uid + " Column: " + cidx);
52.       else
53.         print("Selection Cleared!");
54.     }
55.  
56.   }
57. }

 

http://www.digital-legacy.co.za/uResize/Demo

If I use this asset with table pro, do you think I can resize table in the run time?
is Table Pro Compatible with it?

 

No idea. Should work but I've never used that asset before. If you purchase and find that it doesn't work as intended you can PM me for a refund.

 

No need to refund

 

Does Table Pro support row and column spans (row grouping / column grouping)?

 

No, we don't support that. Thanks!

 

Hello SlumTrimpet,

Please forgive for this one. How do I retrieve the string values in my table without clicking on them? I cant work it out.

Thanks

 

No worries. If I'm understanding the question, you can iterate over the table data like this:

Code (CSharp):

1. foreach (var datum in this.table.data) {
2.   for(int i = 0; i < datum.elements.Count; i++) {
3.     print(datum.elements[i].value);
4.   }
5. }

 

Perfect, thank you. It has been well worth the money.

 

Question 1:
I am going to make " Resizable columns" feature like link below:
https://miro.medium.com/max/800/1*3Mjvd1N9OlQC-aMWXEVtBQ.gif

Is it possible to make by using table pro?

 

Question 2:
Column Header is fixed. When I scroll it not moving. It is good.
Is there any way to make this feature for row header?

This link shows what I am going to implement:
https://miro.medium.com/max/800/1*Mp9kJSIlLyn5qjX-vD56iA.gif

 

Question 3:

Is there any "pagination" feature in Table Pro?
If not, can you guide me by giving some advice please?

 

Question 4:

There is a "Simple_DragPanel" scene in the Samples folder.
This resizable feature works on mobile platforms as well? or this is for only Desktop?

 

Question 5:

Code (CSharp):

1. public void OnPointerDown(PointerEventData data)
2. {
3.  
4.             this.rectTransform.SetAsLastSibling();
5. }

The code above makes a object last sibling in the canvas. So the object can be front of.
Your code works well but, OnPointerDown method which is detection of mouse click is called when cursor is on edge of the image. How can we solve this problem?

 

Hello!

I just downloaded this and it looks great.

I am having an issue with the basic functionality though. I'm looking through the examples and I see various functions like "OnHeaderClick" and "OnTableSelected" but I have no idea how those functions actually get called.

Where is there a list of the available functions like those?