Answers.Body: <p>You can use the EditableTable template component (i.e. the same UI component that Table fields use).</p>
  
  <p><em>Note that this will only work inside the Control Panel – not on the front end. The title of this question says <a href="https://craftcms.com/docs/plugins/plugin-settings" rel="noreferrer">"Plugin settings"</a>, so I'm assuming that's your actual use case.</em></p>
  
  <p>Here's how:</p>
  
  <pre><code>{% import "_includes/forms" as forms %}
  
  {{ forms.editableTableField({
      label: 'Some setting',
      instructions: 'Some instructions here',
      id: 'someSetting',
      name: 'someSetting',
      cols: [
          {
              heading : 'Some column',
              type: 'select',
              options: [{label: 'Foo', value: 'foo'}, {label: 'Bar', value: 'bar'}]
          },
          {
              heading : 'Some other column',
              type: 'singleline'
           },
      ],
      rows: settings['someSetting']
  }) }}
  </code></pre>
  
  <p>As long as the setting you use with the table (<code>someSetting</code> in the example above) has <code>AttributeType::Mixed</code>, Craft will automatically handle serialization for you (the rows you input in the table will be stored as a simple JSON object in the database, just like Table fields are stored).</p>
  
  <p>Note that each <code>column</code> entry can have a type of <code>singleline</code>, <code>multiline</code>, <code>number</code>, <code>select</code> or <code>checkbox</code>. If you don't declare a <code>type</code>, the column will render as a PlainText field.  </p>
  
  <p>Also note that the variable <code>settings</code> (which is passed to the <code>rows</code> parameter) refers to an array of your plugin's current settings – meaning you'll need to pass those to your <code>settings.html</code> template like this (the following method should go in your plugin's primary class):</p>
  
  <pre><code>public function getSettingsHtml ()
  {
      return craft()-&gt;templates-&gt;render('yourpluginhandle/settings', array(
          'settings' =&gt; $this-&gt;getSettings(),
      ));
  }
  </code></pre>
  
  <p>Of course, you can pass additional variables to the settings template – such as a pre-populated array of label/value pairs to use for any dropdown (select) fields inside the table.</p>
  
  <p>If you're unfamiliar with Twig macros, I recommend taking a look at <a href="http://twig.sensiolabs.org/doc/2.x/tags/macro.html" rel="noreferrer">the official docs on the subject</a> (if only to understand the syntax used, and the <code>import</code> statement).</p>
  
  <p>Also, <a href="https://github.com/pixelandtonic/Craft-Release/blob/master/app/templates/_includes/forms/editableTable.html" rel="noreferrer">here's the source for the <code>editableTableField</code> macro</a>, which could prove useful.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-26T09:19:09.727Z
Answers.LastActivityDate: 2017-01-26T09:33:35.760Z
Answers.LastEditDate: 2017-01-26T09:33:35.760Z
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Body: <p>I'm making a plugin where I'd like a user to be able to add values to a list, then have that list saved as an array.  Are there any smart ways of doing this? My current solution is to have a <code>textarea</code>, then make values out of each line but that's not ideal at all. Does Craft already have a built-in UI pattern for this?</p>
  
  <p>Thank you!</p>
  
Tags: <plugin-development><settings><user-interface>
Title: Plugin Settings UI for saving an array of values
ThreadText: # Plugin Settings UI for saving an array of values
  
  (Asked by: username_0 on 2017-01-26)
  
  I'm making a plugin where I'd like a user to be able to add values to a list, then have that list saved as an array. Are there any smart ways of doing this? My current solution is to have a `textarea`, then make values out of each line but that's not ideal at all. Does Craft already have a built-in UI pattern for this?
  
  Thank you!
  
  **Tags:** plugin-development, settings, user-interface
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2017-01-26. Score: 7 | Accepted answer
  
  You can use the EditableTable template component (i.e. the same UI component that Table fields use).
  
  *Note that this will only work inside the Control Panel – not on the front end. The title of this question says ["Plugin settings"](https://craftcms.com/docs/plugins/plugin-settings), so I'm assuming that's your actual use case.*
  
  Here's how:
  
  ```
  {% import "_includes/forms" as forms %}
  
  {{ forms.editableTableField({
      label: 'Some setting',
      instructions: 'Some instructions here',
      id: 'someSetting',
      name: 'someSetting',
      cols: [
          {
              heading : 'Some column',
              type: 'select',
              options: [{label: 'Foo', value: 'foo'}, {label: 'Bar', value: 'bar'}]
          },
          {
              heading : 'Some other column',
              type: 'singleline'
           },
      ],
      rows: settings['someSetting']
  }) }}
  
  ```
  
  As long as the setting you use with the table (`someSetting` in the example above) has `AttributeType::Mixed`, Craft will automatically handle serialization for you (the rows you input in the table will be stored as a simple JSON object in the database, just like Table fields are stored).
  
  Note that each `column` entry can have a type of `singleline`, `multiline`, `number`, `select` or `checkbox`. If you don't declare a `type`, the column will render as a PlainText field.
  
  Also note that the variable `settings` (which is passed to the `rows` parameter) refers to an array of your plugin's current settings – meaning you'll need to pass those to your `settings.html` template like this (the following method should go in your plugin's primary class):
  
  ```
  public function getSettingsHtml ()
  {
      return craft()->templates->render('yourpluginhandle/settings', array(
          'settings' => $this->getSettings(),
      ));
  }
  
  ```
  
  Of course, you can pass additional variables to the settings template – such as a pre-populated array of label/value pairs to use for any dropdown (select) fields inside the table.
  
  If you're unfamiliar with Twig macros, I recommend taking a look at [the official docs on the subject](http://twig.sensiolabs.org/doc/2.x/tags/macro.html) (if only to understand the syntax used, and the `import` statement).
  
  Also, [here's the source for the `editableTableField` macro](https://github.com/pixelandtonic/Craft-Release/blob/master/app/templates/_includes/forms/editableTable.html), which could prove useful.
  
  
  ---
  
  