Feature request: WYSIWYG Table editor

[new-gen23]

We are currently evaluating gollum as a solution to make our Wiki offline available. Sadly, gollum's WYSIWYG editor is rather limited when it comes to tables. Tables are a very imported feature to structure knowledge while keeping it easy to edit. Still, everyone seems to edit their tables in markdown. This is unusable as soon as the table has more than 10 entries and you want to add a column.
Only very few solutions (see Doku Wiki + Plugin screenshot) have a feature like this: As far as I know, gollum uses the ACE editor? Maybe it just neads some tweaking?
Otherwise, one could use the Vue.js from the TipTap framework: https://tiptap.scrumpy.io/tables This framework was considered for a better editor in gitlab: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/22177

It would be great to have the same editor in gitlab wiki and in gollum.
(I am opening this issue here in case one of our students starts a prototype. )

Other issues don't seem to require a table editor but might provide a solution: https://github.com/gollum/gollum/issues/246

[dometto]

We're not about to switch to a different editor just to add support for table editing in markdown. However, if there's a good JS library for editing/generating markdown tables (or even better, tables in a variety of markup formats), a table editor could be implemented using the gollum editor's function buttons.

[bartkamphorst]

I don't think such a plugin should be added to gollum unless it can be made to work for the various supported languages (not just Markdown). I would consider a PR but I'm closing this issue as this is not a feature that we ourselves will implement.

[zeigerpuppy]

I have had success integrating the Datatables javascript with gollum. It addresses the use case of being able to reorder and search tables in the output documents. It does not directly address your issue of having a table editor. Nevertheless, it shows a start as to what can be done with augmenting the table functionality. I have included the custom.js file below (please regard it as buggy and incomplete - although it works for me). ALso note that you'll also need to import the datatables CSS styles.

// console.error("error message");
console.info("Starting custom.js for DataTables processing");

// load script with jQuery
// with deferred loading https://stackoverflow.com/questions/11803215/how-to-include-multiple-js-files-using-jquery-getscript-method#11803418

//var datatables_url = "https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js";
//var jquery_url = "https://code.jquery.com/jquery-3.3.1.js";
//var fixedcolumns_url = "https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js";
//var fixedheader_url = "https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js";

// extend the getScript function to cache
jQuery.getCachedScript = function( url, callback, options ) {
    // Allow user to set any option except for dataType, cache, and url
    options = $.extend( options || {}, {
        dataType: "script",
        cache: true,
        url: url,
        success: callback
    });

    // Use $.ajax() since it is more flexible than $.getScript
    // Return the jqXHR object so we can chain callbacks
    return jQuery.ajax( options );
};

$.when(
        // $.getScript(datatables_url, function() {
        $.getCachedScript( "https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" ),
        //$.getScript( "https://code.jquery.com/jquery-3.3.1.js" ),
        //$.getScript( "https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js" ),
        //$.getScript( "https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js" ),

        $.Deferred(function( deferred ){
                $( deferred.resolve );
        })
        ).done(function(){

        console.log("loaded external dataTables.min.js");

        // apply to all tables
        // see https://stackoverflow.com/questions/36980084/how-to-apply-datatables-to-all-the-tables-in-a-page-atonce
        // https://datatables.net/examples/basic_init/multiple_tables.html

        /* another way of calling all tables?
        $('.tables').each(function() {
                $(this).DataTable();
        });
        */

        /* the suggested way
        $(document).ready(function() {
                alert("call DataTable");
                $('table').DataTable();
        });
        */

//wrks
//      $(document).ready(function(){
//              $('table.display').DataTable();
//      } );

// suppress error
$.fn.dataTable.ext.errMode = 'none';

//throws error
        $(document).ready(function(){
        //    $.each($('.tables'),function(index, table){
                $('table').each(function () {
                console.info("call DataTable");
                $('table').DataTable( {

                // not working
                //fixedHeader: true,

                //sort (2nd col, ascending)
                "order": [[ 1, "asc" ]],
                "pageLength": 50
                });
            });
        });

}); // NB that we are wrapped in the library loading functions