JSFiddle - React, Tailwind, and code Playground

by Kzou

HTML

<script src="http://www.editablegrid.net/editablegrid/editablegrid-2.0.1.js"></script>
<h1>Tournoi des Super Héros</h1>
		
		<a onclick="editableGrid.ajouterLigne();">Ajouter une ligne</a>
		<table id="htmlgrid" class="testgrid">
			<tr>
				<th>Pseudo</th>
				<th>Niveau</th>
				<th>Pays</th>
				<th>Inscription</th>
				<th>Confirmée</th>
			</tr>
			<tr id="1">
				<td>Tintin</td>
				<td>9</td>
				<td>be</td>
				<td>10/04/2013</td>
				<td>false</td>
			</tr>
			<tr id="2">
				<td>Batman</td>
				<td>10</td>
				<td>us</td>
				<td>02/04/2013</td>
				<td>false</td>
			</tr>
			<tr id="3">
				<td>Fantômette</td>
				<td>8</td>
				<td>fr</td>
				<td>06/04/2013</td>
				<td>true</td>
			</tr>
		</table>

CSS

h1 { font-size:1.2em; }
			a { color: #548dc4; text-decoration: none; }
			a:hover { text-decoration: underline; }
			table.testgrid { border-collapse: collapse; border: 1px solid #CCB; width: 500px; }
			table.testgrid td, table.testgrid th { padding: 5px; border: 1px solid #E0E0E0; }
			table.testgrid th { background: #E5E5E5; text-align: left; }
			input.invalid { background: red; color: #FDFDFD; }

JavaScript

editableGrid = new EditableGrid("DemoGridAttach",
					{
						enableSort:true,
						shortMonthNames: ["Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
					}
				); 

				editableGrid.load({ metadata: [
					{ name: "pseudo", datatype: "string", editable: true },
					{ name: "niveau", datatype: "integer", editable: true },
					{ name: "pays", datatype: "string", editable: true, values: 
						{ 'Europe': { "be" : "Belgique", "fr" : "France", "uk" : "Angleterre"},
						  'Amerique du Nord': { "ca": "Canada", "us" : "Etats-Unis" },
						}
					},
					{ name: "lastvisit", datatype: "date", editable: true },
					{ name: "freelance", datatype: "boolean", editable: true }
					
				]});

				editableGrid.attachToHTMLTable('htmlgrid');
				editableGrid.renderGrid();
				
				editableGrid.ajouterLigne = function()
				{
					this.append(this.getRowCount()+1,{},false,false);
				};