TablePro Documentation Documentation Table of Contents: Overview 1 Basic Usage 3 Step One 3 Step Two 4 Step Three 5 Step Four 6 Result 7 Inspector Settings 8 Top Level Settings 8 General Settings 8 Header Settings 9 Footer Settings 10 Data Row Settings 11 Extra text Settings 12 Scrollbar Settings 12 API Documentation 13 Table 14 Column 18 Datum 20 Element 20 TextMeshPro Compatibility 22 Overview Table Pro allows you to display a virtually infinite data set in the Unity®Pro UI via the most programmer friendly API possible. TablePro Documentation Simply attach our Table script to any RectTransform in your UI and populate your tables rows just like you would any normal C# List. Unlike other solutions, we don't require ANY prefab creation or ugly manual instantiation. Table Pro is designed from the ground up to let serious programmers display serious data without having to worry about piles of UI elements manually. Use Table Pro in your application's score sheet, inventory list, log view, etc. The applications are limitless and features are needed in almost any serious UI application. If you need to show more than a non trivial amount of data in a table layout in the "new" Unity UI, then Table Pro is for you! Data Table Demo Click "City" cells to input text. Click headers to sort data dynamically. WebGL Interactive Update Demo Click buttons to drive UI updates in real time. WebGL Basic Usage Step One Create a Unity UI object that we'll use for our table. We don't really care what kind of object it is, just something with a RectTransform we can work with. Step Two Anchor your object however you wish in your UI. Table Pro will auto size to any dimensions and resize if dimensions change while running. Step Three Add our Table script to your object and load a style preset for your table. We include a Light and Dark preset that fit pretty well in a lot of cases. Later on, you can further customize the table using our inspector options to make it look completely at home in your UI. Step Four In your code, grab a reference to the Table object and just throw your data at it! Something like: using UnityEngine; using SLS.Widgets.Table; public class Simple: MonoBehaviour { private Table table; void Start () { this.table = this.GetComponent<Table>(); this.table.ResetTable(); this.table.AddTextColumn("Column1"); this.table.AddTextColumn("Column2"); this.table.AddTextColumn("Column3"); // Initialize Your Table this.table.Initialize(this.OnTableSelected); // Populate Your Rows (obviously this would be real data here) for(int i = 0; i < 100; i++) { Datum d = Datum.Body(i.ToString()); d.elements.Add("Col1:Row" + i.ToString()); d.elements.Add("Col2:Row" + i.ToString()); d.elements.Add("Col3:Row" + i.ToString()); this.table.data.Add(d); } // Draw Your Table this.table.StartRenderEngine(); } private void OnTableSelected(Datum datum, Column column) { string cidx = "N/A"; if(column != null) cidx = column.idx.ToString(); if(datum != null) print("You Clicked: " + datum.uid + " Column: " + cidx); } } } Result All done! Check it out... our data is in a table! Now, of course, this is a very basic table and there are a million more things you can do if you want. Visit our Inspector Reference if you want a basic overview of how to style your table, or check out our API Reference if you want to learn about all the cool stuff you can add to your data display. Inspector Settings Top Level Settings Load Preset [Light] [Dark] Load preset settings for all UI options. Font If TextMeshPro IS NOT enabled: associate this with a standard Unity font (TablePro will default to built in Arial font if left undefined) If TextMeshPro IS enabled: associate this with a TextMeshPro font asset. This setting is required and an error will be generated if left undefined.. Font Style The Font Style (Bold/Regular/etc) that will be used when rendering all Table content. Use 2D Mask In Unity version >= 5.2, this makes Table Pro draw itself with 2D masks and reduced draw calls. This should only be used if your table is rendered in 2D space. Filler Sprite Provide a (typically tiny white) sprite to be used for all generic image blocks in the UI render. This can greatly reduce draw calls when the table UI is rendered under other UI elements when appropriate sprite packing is applied. General Settings Font Size Default Font Size that will be used when rendering all Table content. Scroll Sensitivity ScrollRect sensitivity, set this higher if mouse wheel scroll seems sluggish. Left Margin Global left margin value used when drawing our Table. Right Margin Global right margin value used when drawing our Table. Horizontal Spacing The spacing we'll use to pad between columns. Background The color of our Table will display when loading or empty. Column Line Color The color of our vertical column lines. Column Line Width The pixel width of each column line. Force 100% Width Min Force our columns to AT LEAST take up 100% of the horizontal space of our parent RectTransform. Restrict 100% Width Max Restrict our columns so they can't take over 100% of the horizontal space of our parent RectTransform. (aka prevent horizontal scrolling) Spinner Sprite The Sprite to display in the center of our loading screen. This sprite will rotate slowly as the table renders. Will just display a square if undefined. Spinner Sprite Color The color to apply to our Spinner Sprite. Row Animation Duration TablePro displays a highlight effect when rows are updated. Set this to a desired length of seconds or set to 0 to disable the highlight effect. Table Selection UI Mode ROW : Select to enable full row selection CELL : Select to enable individual cell selection within a given row MULTIROW : select to enable shift+click selection of more than one row at a time MULTICELL : select to enable shift+click selection of more than one cell at a time Show Hover Colors TablePro displays a highlight effect when you hover over them with your cursor. Uncheck this to disable that feature when desired. Draw Editor Gizmo Check to draw a visible gizmo square in the editor in the location where your table will render at runtime Gizmo Color The color to draw our editor gizmo with when enabled Header Settings Minimum Height The smallest height our header will display with. Top Margin The outer/upper margin we'll use before drawing our header contents. Bottom Margin The bottom/lower margin between our header and our data rows. Normal Background The background color of our header row. Hover Background The background color for our header cells when the mouse is hovering over them. Down Background The background color for our header cells when the mouse is pressed on them. Border Line The color of the horizontal line between our header and our body rows. Text The color of the text used in our header. Icon Height The height of our header icon (if enabled). Icon Width The width of our header icon (if enabled). Footer Settings Minimum Height The smallest height our footer will display with. Top Margin The upper margin between our data rows and our footer content. Bottom Margin The bottom margin between our footer and the edge of our Table. Background The background color of our footer row. Border Line The color of the horizontal line between our data rows and our footer. Text The color of the text used in our footer. Data Row Settings Minimum Height The smallest height each data row will display with. [Hint: set this as high as practical in order to minimize system overhead when drawing the Table] Vertical Spacing Empty vertical space we should allocate between rows. Line Color The color of the horizontal lines between all our rows. Line Height The pixel height of the visible line separating each data row Normal Background The default background color for our even numbered data rows Alt Normal Background The default background color for our odd numbered data rows Hover Background The background color for our data rows when the mouse is hovering over them. Down Background The background color for our data rows when we've pressed down on them. Select Background The background color for our data row when it's been clicked/tapped and selected. Text The color of the text used in our data rows. Cell Hover Background The background color for our individual cell when the mouse is hovering over it. Cell Down Background The background color for our individual cell when we've pressed down on it. Cell Select Background The background color for our individual cell when it's been clicked/tapped and selected. Extra text Settings Width Ratio The percent of our total Table RectTransform width that extra text should display with. This value should be between 0 and 1. Background The default background box color for our extra text objects. Text The default color of the text used when drawing our extra text objects. Scrollbar Settings Bar Size The pixel height for our horizontal scrollbar (when visible) and width for our vertical scrollbar (when visible) Foreground The color of our scrollbar 'active' area. Background The color of the background line in our scrollbar. API Documentation Table Pro utilizes a simple data structure. Our root Table object is made up of one or more Column objects, and our display rows are made up of Datum objects that each contains one or more Element objects. Please reference our Basic Usage example or the Samples included with the Table Pro asset for real world examples using our API. Table Our Table object has a very basic life cycle. ● First, we call the reset method to clear out any previous usage information and initialize us for our next run. ● Second, we then call our various column adder methods to add Text or Image columns as desired. ● Third, we call our initialize method to cause Table Pro to render all its components and get ready for data display. ● Finally, we call our startRenderEngine method to actually display our data and start ‘listening’ for real time updates to our data, column header, and column footer values. Table "Reset" Method public void Reset() Simple call this before you start working with a table. Table "column adder" Methods public Column AddTextColumn(string header=null, string footer=null, float minWidth= 1, float maxWidth= 1) Create a text column. Optionally enabled headers and/or footers for the column by defining them as non null here (don't worry, you can update the values later if needed). Also, can adjust your column layout preferences by specifying minimum or maximum width. public Column AddInputColumn( Action<Datum, Column, string, string> changeCallback, string header=null, string footer=null, float minWidth= 1, float maxWidth= 1) Create an input column. This behaves exactly like a text column except when the user clicks a cell a Unity InputField will be displayed and accept entry for the cell value. A callback is required for this field and will be triggered once the cell entry is complete. Optionally enabled headers and/or footers for the column by defining them as non null here (don't worry, you can update the values later if needed). Also, can adjust your column layout preferences by specifying minimum or maximum width. public Column AddImageColumn(string header=null, string footer=null, public Column AddImageColumn(string header=null, string footer=null, int imageWidth=32, int imageHeight=32) Create an image column. Optionally enabled headers and/or footers for the column by defining them as non null here (don't worry, you can update the values later if needed). Also, set the width and height of all images in this column will render with. Table "initialize" Method public void Initialize(Action<Datum> selectionCallback=null, Dictionary sprites=null, bool hasHeaderIcons=false, Action<Column, PointerEventData> headerClickCallback=null) public void Initialize(Action<Datum, Column> selectionCallback=null, Dictionary sprites=null, bool hasHeaderIcons=false, Action<Column, PointerEventData> headerClickCallback=null) Initialize our table once we've defined all the columns we need. If provided, the selection callback will be called whenever any table row is clicked. This table can display Image Columns by matching the Datum Element value to names in our sprites dictionary if provided (Note: if header icons are desired, they must also be defined in this sprites dictionary). Enabled or disable header icons and provide a header click callback if desired. Sample Sprite Dictionary When we call our table's ‘initialize’ method we can optionally pass it a Sprite Dictionary. This is simply a dictionary tying arbitrary sprite string names to actual Sprite objects. This will be used by Sprite columns to select sprites for display. A sample instantiation of this dictionary could be something like: public Sprite sprite1; public Sprite sprite2; public Sprite sprite3; public Sprite sprite4; public Sprite sprite5; ... Dictionary spriteDict = new Dictionary(); spriteDict.Add("1", this.sprite1); spriteDict.Add("2", this.sprite2); spriteDict.Add("3", this.sprite3); spriteDict.Add("4", this.sprite4); spriteDict.Add("5", this.sprite5); Table "StartRenderEngine" Method public void StartRenderEngine() The draw method simply activates our table with all Datum and Column objects assigned to it. Although you can certainly update your table Datum or Column values later, it's recommended to pre define data as much as possible as 'live' data updates are understandably more system intensive than those made before we call our startRenderEngine method. Table "data" Attribute The Table object has an attribute called 'data' which is a collection object containing all the Datum currently available for display by the Table. This collection supports all the standard ICollection interface methods such as Add/Remove/Clear/etc. You can simply interact with these objects much like a standard c# List or similar structure and you'll find the graphical Table representation update in real time as you'd expect. Some sample usage is: public void OnAppendRowClick() { this .tmpDatum = this .makeData(); table. data .Insert( 0 , this .tmpDatum); } public void OnInsertRowClick() { table. data .Insert( 2 , this .makeData()); } public void OnPrependRowClick() { table. data .Add( this .makeData()); } public void OnDeleteRowClick() { table. data .Remove( this .tmpDatum); } Table Event Callbacks We support several special event callbacks that support development enhanced TablePro UI features in your application. public Action<RectTransform, string > tooltipHandler; public Action<Row> rowDatumChangeHandler; public Action<Element, string > onCellLongPress; tooltipHandler is called by individual cells or rows when they the mouse is hovering over them and their datum or element has its 'tooltip' attribute defined. Use this to implement your own tooltip functionality. rowDatumChangeHandler is called by individual rows when their assigned datum changes. Use this to implement enhanced row contents beyond the basic text and image objects supported by TablePro. onCellLongPress is called when a cell is clicked and held for one second. Use this to trigger special actions in addition to the default basic selection handlers. Column Our Column object is used to tell our Table how to render its data. Columns are created via our Table column adder methods and should not be manually instantiated. Columns cannot be updated for an actively drawing table (call the table reset method, define your new columns and call initialize). Column "horAlignment" Attribute c = this.table.AddTextColumn() ; c.horAlignment = Column.HorAlignment.RIGHT ; Set this to a valid Column.HorAlignment enum value. Valid values are HorAlignment.Left (default), HorAlignment.Center, and HorAlignment.Right. Column "headerValue" Attribute c = this.table.AddTextColumn( "non null" ) ; c.headerValue= "New Header Value" ; Set this to the value you wish to display in our header. If set for an active table, it will update the displayed table value in real time. Column "headerIcon" Attribute c = this.table.AddTextColumn( "non null" ) ; c.headerIcon = "SpriteName" ; Set this to the value you wish to display in for our header icon. This value must be valid in our table's Sprite Dictionary and the sprite will be rendered with our tables header sprite dimensions defined in our inspector fields. Column "headerIcon" Attribute c = this.table.AddTextColumn( "non null" ) ; c.headerIconColor = Color.black ; Set this to the Color you wish to be applied to our active header icon. Column "footerValue" Attribute c = this .table.AddTextColumn( null , "non null" ); c.footerValue= "New Footer Value" ; Set this to the value you wish to display in our footer. If set for an active table, it will update the displayed table value in real time. Datum Datum objects make up each of our display rows (and our header and footer if activated on the table). A Datum object contains a List of Element objects, as well as some optional Extra Text attributes, that allow us to show special text cross column for the given row. Datum "elements" Attribute A c# collection of Element objects. This length of this collection should be the same length as our Table's columns.Count. Datum "elements.Add" Method public Element Add ( string val) This is a shortcut factory method that will return an Element object after instantiating it and setting its value to the provided string argument. Element Element objects correspond to individual display cells in our table. Their "value" attribute either is the string value of a TextColumn or the name (cross referenced via our Sprite Dictionary) of the Sprite to display in an ImageColumn. Element "value" Attribute The string text we desire for this TextColumn cell or the name of a sprite that is defined in our Sprite Dictionary on ImageColumn cells. TextMeshPro Compatibility TablePro supports TextMeshPro for its text render. This greatly increases the quality of all UI text (including TablePro) and is highly recommended. In order to utilize TextMeshPro in Table Pro you must: 1 Install TextMeshPro 2 Add "TMP_PRESENT" to your Scripting Define Symbols That's it! TablePro will now use TextMeshPro for its text render. Page