<p>So, after fiddling with it for a while, this is what I came up with it:</p>

<p>When using <code>forms.editableTable</code> make sure you don't initialize <code>Craft.EditableTable</code>. You can do that by setting the <code>initJs</code> to <code>false</code>:</p>



<pre><code>{{ forms.editableTable({
    id: 'myTableId',
    name: 'myTableName',
    cols: yourTableCols,
    ...
    initJs: false,
    ...
}) }}
</code></pre>

<p>That means that you will have to initialize the <code>Craft.EditableTable</code> yourself:</p>



<pre><code>{% includejs %}
(function () {

  var t = new Craft.EditableTable(
    "{{ 'myTableId'   | namespaceInputId   | e('js') }}",
    "{{ 'myTableName' | namespaceInputName | e('js') }}",
    {{ yourTableCols|json_encode|raw }},
    {
      onAddRow: function( tr ) {
        // attach event listeners to row fields here
      }
    }
  );

} ());
{% endincludejs %}
</code></pre>

<p>From this point on, you can add your own listeners to the fields in the row.</p>

CC BY-SA 3.0
2017-11-13T16:39:58.187Z
2017-11-13T16:39:58.187Z
Rodrigo Passos
<p>I am developing a custom plugin that has a variable setting that can take multiple options. I've decided to use <code>forms.editableTable</code> from Craft's <code>_includes/forms</code>. It does the job great, saving and retrieving the settings. </p>

<p>Now I am trying to add validation to the columns on the table: the validation model is set and I am correctly passing the errors to the "right" position (<em>Meaning I get the row index and which column has the error</em>).</p>

<p>I know <a href="https://github.com/craftcms/cms/blob/2.6.2997/src/resources/js/craft/EditableTable.js" rel="nofollow noreferrer">Craft.EditableTable</a> has the <a href="https://github.com/craftcms/cms/blob/2.6.2997/src/resources/js/craft/EditableTable.js#L100" rel="nofollow noreferrer">getRowHtml</a> method that I can use to retrieve the row and apply error classes to the field(s).</p>

<p>I've watched the <a href="https://www.youtube.com/watch?time_continue=7&amp;v=OcgdIlBlZc8" rel="nofollow noreferrer">Javascript in the Control Panel</a> video, but Craft.EditableTable doesn't set a data attribute with it's instance.</p>

<p>Is there any other ways to get it?</p>

<p>Thanks!</p>

<plugin-development><javascript><garnish>
How to access Craft.EditableTable instance in CraftCM
# How to access Craft.EditableTable instance in CraftCM

(Asked by: username_0 on 2017-11-10)

I am developing a custom plugin that has a variable setting that can take multiple options. I've decided to use `forms.editableTable` from Craft's `_includes/forms`. It does the job great, saving and retrieving the settings.

Now I am trying to add validation to the columns on the table: the validation model is set and I am correctly passing the errors to the "right" position (*Meaning I get the row index and which column has the error*).

I know [Craft.EditableTable](https://github.com/craftcms/cms/blob/2.6.2997/src/resources/js/craft/EditableTable.js) has the [getRowHtml](https://github.com/craftcms/cms/blob/2.6.2997/src/resources/js/craft/EditableTable.js#L100) method that I can use to retrieve the row and apply error classes to the field(s).

I've watched the [Javascript in the Control Panel](https://www.youtube.com/watch?time_continue=7&v=OcgdIlBlZc8) video, but Craft.EditableTable doesn't set a data attribute with it's instance.

Is there any other ways to get it?

Thanks!

**Tags:** plugin-development, javascript, garnish

---

## 1 answers

### Answer by username_0 on 2017-11-13. Score: 2 | Accepted answer

So, after fiddling with it for a while, this is what I came up with it:
When using forms.editableTable make sure you don't initialize Craft.EditableTable. You can do that by setting the initJs to false:
{{ forms.editableTable({
    id: 'myTableId',
    name: 'myTableName',
    cols: yourTableCols,
    ...
    initJs: false,
    ...
}) }}

That means that you will have to initialize the Craft.EditableTable yourself:
{% includejs %}
(function () {

  var t = new Craft.EditableTable(
    "{{ 'myTableId'   | namespaceInputId   | e('js') }}",
    "{{ 'myTableName' | namespaceInputName | e('js') }}",
    {{ yourTableCols|json_encode|raw }},
    {
      onAddRow: function( tr ) {
        // attach event listeners to row fields here
      }
    }
  );

} ());
{% endincludejs %}

From this point on, you can add your own listeners to the fields in the row.


---

