JSFiddle - React, Tailwind, and code Playground

by orthosie

HTML

<h1>
Project Data Mapping
</h1>
This project involves importing CSV files, parse them and map the columns to standard columns. And then doing multiple things with the result.
<h2>Ability to define standard columns</h2>
These are predefined column names (SC) in the system. They are already defined in the system and will be in a database table.  An SC has few mandatory attributes and many optional attributes.

<h4>
Mandatory attributes with sample value
</h4>
<table>
<tr><th>Attribute</th><th>Sample Value</th></tr>
<tr><td>Name</td><td>Product Name</td></tr>
<tr><td>Description</td><td>Describes product name</td></tr>
<tr><td>Type</td><td>String</td></tr>
<tr><td>Array</td><td>True</td></tr>
</table>
<h4>
Optional attributes with sample value
</h4>
<table>
<tr><th>Attribute</th><th>Sample Value</th></tr>
   <tr><td>URL</td><td>http://sample.com</td></tr>
   <tr><td>DefaultValue</td><td>none</td></tr>
   <tr><td>MinLength</td><td>3</td></tr>
    <tr><td>MaxLength</td><td>1024</td></tr>
</table>
<h2>Ability to define a mapping</h2>
Users should be able to drag and drop excel/csv files and the webpage should parse them and display all the  header columns. On one side all the columns from the  current file should be shown and the other side all the defined standard columns should be shown. Users should be able to draw a link to link a column from a file to a standard column mapping the file columns to standard columns. Once the user is done with the mapping they should be able to save this mapping with a name. 
<h2>Ability to import and parse a CSV</h2>
Users should be able to drag and drop excel/csv files and the webpage should parse them. Once the parsing is successful the user has the option to pick an existing mapping or define a new mapping. Once a mapping is picked the parser then assigns the new column headers based on the mapping and holds this file in the filesystem with an entry in the DB table. This new file is called the transformed dataset. 
<h2>
Ability...