title: How to let the user select the layout?
body: <p>I want to create a report where the user could choose not only what fields he wants, also the layout of this fields. All the data comes from a CSV and have lots of columns. I want to let the user choose what columns he wants to appear on the report header and body. For example if he choose 12 fields to be on the header and 3 columns on the body:</p>
  
  <pre><code>___________________________________________________________
    Field1: Field1Data           Field7: Field7Data    
    Field2: Field2Data           Field8: Field8Data
    Field3: Field3Data           Field9: Field9Data
    Field4: Field4Data           Field10: Field10Data            HEADER
    Field5: Field5Data           Field11: Field11Data
    Field6: Field6Data           Field12: Field12Data
    ___________________________________________________________
    ___________________________________________________________
    | Column1 |   Column2  |   Column3  |
    |  Data   |    Data    |    Data    |
    |  Data   |    Data    |    Data    |
    |  Data   |    Data    |    Data    |                       BODY
    |  Data   |    Data    |    Data    |
    |  Data   |    Data    |    Data    |
    ___________________________________________________________
  </code></pre>
  
  <p>Right now, I  let the user choose with data he wants on the report, using a select option with all the headers, push the index of the column he wants to an array, then create an object with the table and the header data, like this:</p>
  
  <pre><code>var arrayHeaderData = [0,1,2,3,..]
  
  var headerDataObject = {
    table1: { Name: John, Location: 'Unknown', Age: 24},
    table2: { Name: John, Location: 'Unknown', Age: 24},
    table3: { Name: John, Location: 'Unknown', Age: 24}
  }
  </code></pre>
  
  <p>I have multiple reports, that's why I store each data of a table in an object. </p>
  
  <p>With this, I can append the data to each table, but the user cant choose which data he wants to appear first, for example, lets say he chose 12 fields and wants the field 3 to be on the right and the field 9 on the left</p>
  
  <pre><code>___________________________________________________________
    Field1: Field1Data           Field7: Field7Data    
    Field2: Field2Data           Field8: Field8Data
    Field9: Field9Data           Field3: Field3Data  &lt;--He chose to swap this two
    Field4: Field4Data           Field10: Field10Data            HEADER
    Field5: Field5Data           Field11: Field11Data
    Field6: Field6Data           Field12: Field12Data
    ___________________________________________________________
  </code></pre>
  
  <p>I can't use something like UI-Sortable because there are more than one reports, so it wouldn't be practical to let the user change one field at the time for each report.</p>
  
  <p>How would you approach this problem?</p>