add Tabulator example

README.md

@@ -377,6 +377,7 @@ A new directory sample_vizs is now available with the following visualisations:
 * sample_map_openstreetmap_leaflet_custom_geojson.ndjson: Openstreetmap with leaflet and custom GeoJSON layer (french departments)
 * sample_boostedOrangeSampleIframe.ndjson: sample accordion component from Orange Boosted (within Iframe) (https://boosted.orange.com/)
 * sample_sankey_with_apache_echart.ndjson: sample sankey using the Apache Echart library (https://echarts.apache.org/examples/en/editor.html?c=sankey-levels)
+* sample_tabulator.ndjson: sample table with enriched content (https://tabulator.info/)
 
 **How to load ndjson files ?** Open OpenSearch Dashboards > Stack Management > Saved Objects > Import > Select ndjson file to import > Click Import
 
@@ -416,3 +417,6 @@ To import sample data: go to OpenSearch Dashboards > Click on the logo on the to
 
 ### Apache Echart Sankey sample
 ![Apache Echart Sankey sample](./images/apacheEchartSankey.png)
+
+### Tabulator sample
+![Tabulator sample](./images/tabulator.png)

sample_vizs/sample_tabulator.ndjson

@@ -0,0 +1,2 @@
+{"attributes":{"description":"","kibanaSavedObjectMeta":{"searchSourceJSON":"{\n  \"query\": {\n    \"language\": \"kuery\",\n    \"query\": \"\"\n  },\n  \"filter\": []\n}"},"title":"sample_tabulator","uiStateJSON":"{}","version":1,"visState":"{\n  \"title\": \"sample_tabulator\",\n  \"type\": \"transform\",\n  \"aggs\": [],\n  \"params\": {\n    \"formula\": \"<div id=\\\"main\\\"></div>\\n<link href=\\\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tabulator.min.css\\\" rel=\\\"stylesheet\\\">\\n\",\n    \"meta\": \"({\\n  after_render: function() {\\n    //-------------------------------------------------------------------------\\n    // function to get the location of a CSS selector within a shadow DOM \\n    //-------------------------------------------------------------------------\\n    function getShadowDomLocation(selector) {\\n      let vizLocation;\\n      // output-viz being the top selector used by the Transform plugin\\n      // Get all the output-viz elements (can have mutliple selector if multiple transfrm vizs in a dashboard)\\n      // selector parameter value must be unque within the DOM\\n      const elements = $('.output-vis');\\n      let shadow;\\n      for (let elem of elements) {\\n        shadow = elem.shadowRoot;\\n        vizLocation = $(shadow).find(selector);\\n        if (vizLocation.length > 0) {\\n          // selector found, exiting\\n          break;\\n        } else {\\n          vizLocation = '.notFound';\\n        } \\n      } \\n      const obj = {\\n      vizLocation: vizLocation,\\n      shadowRoot: shadow\\n      }\\n      // obj object contains the shadowRoot element and and the location of the selector within the shadowRoot\\n      return obj; \\n    }\\n\\n    // Set data\\n    var data = [\\n      {id:1, name:\\\"Oli Bob\\\", progress:12, gender:\\\"male\\\", rating:1, col:\\\"red\\\", dob:\\\"19/02/1984\\\", car:1},\\n      {id:2, name:\\\"Mary May\\\", progress:1, gender:\\\"female\\\", rating:2, col:\\\"blue\\\", dob:\\\"14/05/1982\\\", car:true},\\n      {id:3, name:\\\"Christine Lobowski\\\", progress:42, gender:\\\"female\\\", rating:0, col:\\\"green\\\", dob:\\\"22/05/1982\\\", car:\\\"true\\\"},\\n      {id:4, name:\\\"Brendon Philips\\\", progress:100, gender:\\\"male\\\", rating:1, col:\\\"orange\\\", dob:\\\"01/08/1980\\\"},\\n      {id:5, name:\\\"Margret Marmajuke\\\", progress:16, gender:\\\"female\\\", rating:5, col:\\\"yellow\\\", dob:\\\"31/01/1999\\\"},\\n      {id:6, name:\\\"Frank Harbours\\\", progress:38, gender:\\\"male\\\", rating:4, col:\\\"red\\\", dob:\\\"12/05/1966\\\", car:1},\\n    ];\\n     \\n    // Get external JS lib\\n    $.getScript(\\\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tabulator.min.js\\\").done(function( script, textStatus ) {\\n      console.log(\\\"Import Echart js Complete\\\");\\n      \\n      // specify where is located your Gauge in the HTML doc\\n      let echartjs_location = getShadowDomLocation(\\\"#main\\\").vizLocation[0]\\n      // Remove children to avoid multiple graphs\\n      $(echartjs_location).empty();\\n      \\n      var table = new Tabulator(echartjs_location, {\\n        data:data,           //load row data from array\\n        layout:\\\"fitColumns\\\",      //fit columns to width of table\\n        responsiveLayout:\\\"hide\\\",  //hide columns that don't fit on the table\\n        addRowPos:\\\"top\\\",          //when adding a new row, add it to the top of the table\\n        history:true,             //allow undo and redo actions on the table\\n        pagination:\\\"local\\\",       //paginate the data\\n        paginationSize:7,         //allow 7 rows per page of data\\n        paginationCounter:\\\"rows\\\", //display count of paginated rows in footer\\n        movableColumns:true,      //allow column order to be changed\\n        initialSort:[             //set the initial sort order of the data\\n            {column:\\\"name\\\", dir:\\\"asc\\\"},\\n        ],\\n        columnDefaults:{\\n            tooltip:true,         //show tool tips on cells\\n        },\\n        columns:[                 //define the table columns\\n            {title:\\\"Name\\\", field:\\\"name\\\", editor:\\\"input\\\"},\\n            {title:\\\"Task Progress\\\", field:\\\"progress\\\", hozAlign:\\\"left\\\", formatter:\\\"progress\\\", editor:true},\\n            {title:\\\"Gender\\\", field:\\\"gender\\\", width:95, editor:\\\"select\\\", editorParams:{values:[\\\"male\\\", \\\"female\\\"]}},\\n            {title:\\\"Rating\\\", field:\\\"rating\\\", formatter:\\\"star\\\", hozAlign:\\\"center\\\", width:100, editor:true},\\n            {title:\\\"Color\\\", field:\\\"col\\\", width:130, editor:\\\"input\\\"},\\n            {title:\\\"Date Of Birth\\\", field:\\\"dob\\\", width:130, sorter:\\\"date\\\", hozAlign:\\\"center\\\"},\\n            {title:\\\"Driver\\\", field:\\\"car\\\", width:90,  hozAlign:\\\"center\\\", formatter:\\\"tickCross\\\", sorter:\\\"boolean\\\", editor:true},\\n        ],\\n     });\\n    });\\n  }\\n})\",\n    \"multiquerydsl\": \"\"\n  }\n}"},"id":"93b42230-3c7c-11ec-834b-d3680dc5ae92","references":[],"type":"visualization","updated_at":"2023-06-23T09:17:51.398Z","version":"WzE1OTI3LDgyXQ=="}
+{"excludedObjects":[],"excludedObjectsCount":0,"exportedCount":1,"missingRefCount":0,"missingReferences":[]}