Tabulator custom Download Not sure why but time was wasting and the default download was not working on some pages seemed to be getting blocked Hence as a quick workaround a custome download function was implemented below Essentially gets table data and builds a csv file which you can download Note the copy paste feature is enabled click the table and press cntr c and it should put the table data into the clipboard style body min height 400px style script src https cdnjs cloudflare com ajax libs tabulator 5 4 4 js tabulator min js script link href https cdnjs cloudflare com ajax libs tabulator 5 4 4 css tabulator min css rel stylesheet script document body style minHeight 1400px escape commas and quotes for CSV formatting function csvEncode string if string string includes string includes string includes n string includes r return string replace g return string function fff let id table Math random 100 _ Math random 1000 id id replaceAll let div document createElement div document body appendChild div div id id let tabledata for let n 0 n 10 n tabledata push name Bob gender male progress 20 cat oth 1 0 let columnNames Object keys tabledata 0 let columnHeaders columnNames forEach n if n name columnHeaders push title n field n headerFilter input bottomCalc count else if n percentage columnHeaders push title n field n width 100 hozAlign left formatter progressFormatter else if n time_zone columnHeaders push title n field n headerFilter input formatter textFormatter else columnHeaders push title n field n var progressFormatter function cell formatterParams progress bar var value this sanitizeHTML cell getValue 0 var element cell getElement var color 222222ff if value 40 color ff0000ff else if value 50 color 00ff00ff else color 0000ffff console log element element typeof element element style min width 30px element style position relative element setAttribute aria label value value 100 value return div style position absolute top 5px bottom 5px left 4px right value margin right 4px background color color display inline block div const textFormatter function cell formatterParams let value cell getValue if value value indexOf London 0 Europe London return span style color 3FB449 font weight bold value span else return value var table new Tabulator div id data tabledata load row data from array layout fitColumns fit columns to width of table responsiveLayout hide hide columns that dont fit on the table addRowPos top when adding a new row add it to the top of the table history true allow undo and redo actions on the table pagination local paginate the data paginationSize 7 allow 7 rows per page of data paginationCounter rows display count of paginated rows in footer movableColumns true allow column order to be changed maxHeight 200 initialSort set the initial sort order of the data column name dir asc columnDefaults tooltip true show tool tips on cells columns columnHeaders let but document createElement button document body appendChild but but innerHTML Download CSV but addEventListener click function table download csv data csv this isn t working in some cases why let csvdata const data table getData if data data length 0 console log no data in table return let keys Object keys data 0 keys forEach v csvdata csvEncode String v csvdata n data forEach d let values Object values d values forEach v csvdata csvEncode String v csvdata n let blob new Blob csvdata type text plain let blobUrl URL createObjectURL blob let a document createElement a a href blobUrl a title csv file a download data csv a click console log csvdata end download csv end fff add 4 tables for let i 0 i 4 i fff script
lue 100 value return div style position absolute top 5px bottom 5px left 4px right value margin right 4px background color color display inline block div const textFormatter function cell formatterParams let value cell getValue if value value indexOf London 0 Europe London return span style color 3FB449 font weight bold value span else return value var table new Tabulator div id data tabledata load row data from array layout fitColumns fit columns to width of table responsiveLayout hide hide columns that dont fit on the table addRowPos top when adding a new row add it to the top of the table history true allow undo and redo actions on the table pagination local paginate the data paginationSize 7 allow 7 rows per page of data paginationCounter rows display count of paginated rows in footer movableColumns true allow column order to be changed maxHeight 200 initialSort set the initial sort order of the data column name dir asc columnDefaults tooltip true show tool tips on cells columns columnHeaders let but document createElement button document body appendChild but but innerHTML Download CSV but addEventListener click function table download csv data csv this isn t working in some cases why let csvdata const data table getData if data data length 0 console log no data in table return let keys Object keys data 0 keys forEach v csvdata csvEncode String v csvdata n data forEach d let values Object values d values forEach v csvdata csvEncode String v csvdata n let blob new Blob csvdata type text plain let blobUrl URL createObjectURL blob let a document createElement a a href blobUrl a title csv file a download data csv a click console log csvdata end download csv end fff add 4 tables for let i 0 i 4 i fff script