{"id":346,"date":"2021-02-18T10:10:56","date_gmt":"2021-02-18T10:10:56","guid":{"rendered":"http:\/\/167.71.55.215\/?page_id=346"},"modified":"2023-04-27T13:57:18","modified_gmt":"2023-04-27T13:57:18","slug":"tables","status":"publish","type":"page","link":"https:\/\/info.documotor.com\/?page_id=346","title":{"rendered":"Tables"},"content":{"rendered":"\n<p>This article describes the different table bindings and the required structure of the transformed data for the <code>DynamicTable<\/code> binding and <code>CellRepeater<\/code> binding. <\/p>\n\n\n\n<p>Although the <code>DynamicTable<\/code> binding type has more configuration options and, thus, is more flexible, it is not recommended to use unless necessary, since complexity may rise drastically. The <code>DynamicTable<\/code>  binding is only necessary if there is need for controlling column visibility or dynamic formatting of the table and\/or column widths. <\/p>\n\n\n\n<h2>Table<\/h2>\n\n\n\n<p>Functions like a repeat binding around a table row, but can also be wrapped around an entire table. If the content control wraps around a whole table, then the first row with bindings until the last row with bindings will be duplicated. Like with repeat, the scope is changed for each duplicate.<\/p>\n\n\n\n<h3>Syntax<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"json\" class=\"language-json\">{ \"BindingType\": \"Table\", \"BindingKey\": \"ArrayPath\" }<\/code><\/pre>\n\n\n\n<h3>Parameters<\/h3>\n\n\n\n<p><strong>BindingType:<\/strong> Static. Must be &#8220;Table&#8221;.<br><strong>ArrayPath:<\/strong> The array to create the table rows from.<\/p>\n\n\n\n<h2 id=\"section_10\">Dynamic Table<\/h2>\n\n\n\n<p>Dynamic table can be defined with following binding:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"json\" class=\"language-json\">{\"BindingType\": \"DynamicTable\", \"BindingKey\": \"tableData\" }<\/code><\/pre>\n\n\n\n<h3>Description<\/h3>\n\n\n\n<p>This binding allows to control a table in terms of the amount of columns and rows as well as its formatting.<\/p>\n\n\n\n<h3>Parameters<\/h3>\n\n\n\n<ul><li><strong>BindingType<\/strong> \u2013 Static. Must be <code>DynamicTable<\/code>.<\/li><li><strong>BindingKey<\/strong> \u2013 JSON object with a defined <strong>model <\/strong>representing the configuration of the table. Use <a href=\"https:\/\/info.documotor.com\/?page_id=271\">Data Transformation<\/a> to structure your data according to this <strong>model<\/strong>:<\/li><\/ul>\n\n\n\n<h3>Model<\/h3>\n\n\n\n<ul><li><strong>Options<\/strong>&nbsp;(case sensitive, optional). Properties in the Options object define general properties for the table or its formatting. Currently we support only 1:<ul><li><strong>KeepTotalWidth<\/strong>&nbsp;(case sensitive, optional) \u2013 boolean parameter. Set to true if you want to keep the same width of the table as before processing. False or NULL means that width will not be preserved.<\/li><\/ul><\/li><li><strong>Headers<\/strong>&nbsp;(case sensitive, optional) \u2013 list parameter. If defined \u2013 it controls the amount of columns in the resulted table. It can either be hardcoded amount of objects or dynamic coming from another object (Jmes transformation). Each object defined in this parameter must contain a \u201cVisible\u201d parameter that controls the visibility of that column. If NULL, processing will not control the amount of columns in the table.<ul><li><strong>Visible<\/strong>&nbsp;\u2013 (case sensitive, required) \u2013 boolean parameter. Parameter that controls visibility of the existing or populated column. If set to true, it shows the column. If false \u2013 hides the column.<\/li><li><strong>KeepWidth<\/strong>&nbsp;\u2013 (case sensitive, optional) \u2013 boolean parameter. Define if a column must preserve its width after processing. This parameter makes sense in cases of resizing table columns.<\/li><\/ul><\/li><li><strong>Rows&nbsp;<\/strong>(case sensitive, optional) \u2013 list parameter. If defined \u2013 it controls the amount of rows in the resulted table. It can either be hardcoded amount of objects or dynamic coming from another object (Jmes transformation). First object in the list defines the header values \u2013 if you wish to not change header values \u2013 define the object but leave empty. If the list size is larger than existing amount or rows \u2013 the processing will populate the last row to match the size from the list. If less \u2013 the processing will decrease the amount of rows. Each object can define unlimited amount of properties for the row.<\/li><\/ul>\n\n\n\n<p><strong>Example <\/strong>of a JSON object that can define a dynamic table:<\/p>\n\n\n\n<pre title=\"DynamicTable object\" class=\"wp-block-code\"><code lang=\"json\" class=\"language-json\">{\n    \"tableData\":{\n        \"Options\": {\n            \"KeepTotalWidth\": true\n        },\n        \"Headers\" : \n        [{\n             \"Visible\" : true \n         },\n         {\n             \"Visible\" : ValueFromMyData\n         },\n         {\n             \"Visible\" : Value2FromMyData,\n             \"KeepWidth\" : true\n         }\n        ]\n        \"Rows\":\n        [{\n              \"H1\" : \"Header value 1\",\n             \"H2\" : \"Header value 2\"\n         },\n         {\n             \"L1\" : \"Second row value\",\n             \"L2\" : \"Second row value 2\"\n         } \n        ]\n    }\n}<\/code><\/pre>\n\n\n\n<h2>CellRepeater<\/h2>\n\n\n\n<p>The binding must enclose the entire table, not just a row or a cell, but the entire table. The first cell in the table will be the template for the remaining cells, and the amount of cells in the first row, defines the amount of cells in rows added.<\/p>\n\n\n\n<p>Depending on data, the processing will either expand the amount of cells or shrink them.<\/p>\n\n\n\n<h3>Syntax<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"json\" class=\"language-json\">{ \"BindingType\": \"RepeatTableCells\", \"BindingKey\": \"sampleKey\" } <\/code><\/pre>\n\n\n\n<h3>Parameters<\/h3>\n\n\n\n<p><strong>BindingType:<\/strong> Static. Must be &#8220;RepeatTableCells&#8221;.<br><strong>ArrayPath:<\/strong> JSON object with a defined model representing the configuration of the cell repeater.<\/p>\n\n\n\n<h3>Model<\/h3>\n\n\n\n<ul><li><strong>options&nbsp;<\/strong>(case sensitive, required) \u2013 defines the general options for cell repeater processing.<ul><li><strong>direction&nbsp;<\/strong>(case sensitive, required) \u2013 string parameter. Defines the direction of the cells to be expanded. Currently only \u201c<strong>lrtb<\/strong>\u201d is supported. (left-to-right, top-to-bottom)<\/li><\/ul><\/li><li><strong>cells<\/strong>&nbsp;(case sensitive, required) \u2013 list parameter. Data for cells.<\/li><\/ul>\n\n\n\n<p><strong>Example<\/strong> of a JSON object following the model:<\/p>\n\n\n\n<pre title=\"CellRepeater object\" class=\"wp-block-code\"><code lang=\"json\" class=\"language-json\">{\n  \"options\": {\n    \"direction\": \"lrtb\" \n  },\n  \"cells\": [\n    { \"testkey\": \"firstValue\" },\n    { \"testkey\": \"secondValue\" }\n  ] \n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>This article describes the different table bindings and the required structure of the transformed data for the DynamicTable binding and CellRepeater binding. Although the DynamicTable binding type has more configuration options and, thus, is more flexible, it is not recommended to use unless necessary, since complexity may rise drastically. The DynamicTable binding is only necessary [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":148,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/pages\/346"}],"collection":[{"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/info.documotor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=346"}],"version-history":[{"count":18,"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/pages\/346\/revisions"}],"predecessor-version":[{"id":5427,"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/pages\/346\/revisions\/5427"}],"up":[{"embeddable":true,"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/pages\/148"}],"wp:attachment":[{"href":"https:\/\/info.documotor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}