FlexTabledit demo

HTML and Javascript code

<h4>1. Preconfigured table</h4>
<div id="carsTable"></div>

<script type="text/javascript">
  // Execute on page load
  $(function () {
    var contentArray = [
        ["Year", "Ford", "Volvo", "Toyota", "Honda", "Remark"],
        ["2014", 10, 11, 12, 13, '-'],
        ["2015", 20, 11, 14, 13, "Boston's figures"],
        ["2016", 30, 15, 12, 13, 'Checked: "7"']
    ];
    $('#carsTable').flextabledit({
      content: contentArray,
      addTableClass: "myTable"
    });
  });
</script>

You only must define a container <div> at the location in your html where you want to show the table.
Then, use javascript to construct the flextabledit plugin for this element.

Styling

In this example some extra styling is applied to the table in order to set its background color and to apply table and cell borders. This looks as follows:

<style>
    .myTable {
      border-collapse: collapse;
      border-spacing: 0;
      margin-top: 0.8333em;
      margin-bottom: 30px;
      width: 100%;
      background: #f4f6f5;
    }
    .myTable th:first-child,
    .myTable td:first-child {
      width: 32px;
      text-align: center;
    }
    .myTable th,
    .myTable td {
      border: 1px solid #b3bcba;
    }
</style>

HTML and Javascript code

  <h4>2. New table</h4>
  <p>You can create your own table here. The plugin for this example is constructed
  to show command texts in French.</p>
  <div id="ownTableUnAvailPrompt">
    <div class="button" onclick="onAddTable(); return false;">Create</div>
  </div>
  <div id="ownTableAvailPrompt" style="display:none;">
    <div class="button" onclick="onDeleteTable(); return false;">Delete</div>
  </div>
  <div id="ownTable"></div>
  <div style="border-bottom: 1px solid #497981; margin-bottom: 1.833em;">
    <input id="flextabledit2ChkBox" type="checkbox" />
    <div id="flextabledit2Tutorial" style="display: none; margin-bottom: 2.0em;">
      @Html.RenderExtMarkdown("~/Markdown/Demos/FlexTabledit2.md")
    </div>
  </div>

  <div id="createTableDialog" class="dialogPopUp">
    <div class="closeButton" onclick="javascript: $('#createTableDialog').dialog('close');">
      <span>X</span>
    </div>
    <h2>Initial table size</h2>
    <div class="sideBySideCols">
      <div class="leftCol-s" style="width:160px;">
        <p><b>Number of columns:</b></p>
      </div>
      <div class="rightCol">
        <input id="flxtblNrOfCols" size="4" value="4" />
      </div>
    </div>
    <div class="sideBySideCols">
      <div class="leftCol-s" style="width:160px;">
        <p><b>Number of rows:</b></p>
      </div>
      <div class="rightCol">
        <input id="flxtblNrOfRows" size="4" value="10" />
      </div>
    </div>
    <div class="button" style="margin-top:0.833em;" onclick="javascript: onCreateTable();">Create table</div>
  </div>

<script type="text/javascript">
  function onAddTable() {
    $('#createTableDialog').dialog();
  }

  function onCreateTable() {
    var nrofCols = $('#flxtblNrOfCols').val();
    if ( nrofCols < 1) nrofCols = 1;
    var nrofRows = $('#flxtblNrOfRows').val();
    if ( nrofRows < 1) nrofRows = 1;
    nrofRows++;
    $('#createTableDialog').dialog('close');
    // Init table
    var content = [];
    for (var r = 0; r < nrofRows; r++ ) {
      var row = [];
      for (var c = 0; c < nrofCols; c++) {
        row.push("");
      }
      content.push(row)
    }
    $('#ownTableUnAvailPrompt').hide();
    $('#ownTableAvailPrompt').show();
    $('#ownTable').flextabledit({
      content: content,
      addTableClass: "myTable",
      texts: { cut: 'Couper', copy: 'Copier', paste: 'Coller', insert: 'Insérer', remove: 'Supprimer', columnName: 'Nom' }
    });
  }

  function onDeleteTable() {
    $('#ownTable').flextabledit('destroy');
    $('#ownTableAvailPrompt').hide();
    $('#ownTableUnAvailPrompt').show();
  }
</script>

Again, a container <div> must be defined at the place in the html where you want to show the table.
In this example the table is created as a result of clicking or touching the 'Create' button and then defining the number of columns and rows within a dialog. As you can see in the code a 2-dimensional array is created where the 1st entry defines an empty header row (all column names are empty) and the other entries define the body rows with empty data cells.

The flextabledit plugin is constructed by providing the content array, a table class (to get the same styling as example 1), and a 'texts' object to have all command names in French.