JSFiddle - React, Tailwind, and code Playground

Fliplet v2 Table (manual)

by Hugo Carneiro

HTML

<div class="fl-metric"
  data-source="1"
  data-query='{"foo":"bar"}'
  data-columns='["category",{"bar":"category"}]'></div>

JavaScript

/*
const config = {
  dataSourceId: 1,
  query: {
    where: {
      foo: 'bar'
    }
  },
  columns: [
    { xValue: 'foo' },
    { yValue: 'bar' },
    'zValue'
  ]
};
*/

$('.fl-metric[data-source]').each(function(){
	var $container = $(this);
  var dataSourceId = $container.attr('data-source');
  if (!dataSourceId) {
  	return;
  }
  var dataQuery = JSON.parse($container.attr('data-query'));
  var dataColumns = JSON.parse($container.attr('data-columns'));
  /*if (Fliplet.Navigate.query.hasOwnProperty(dataPageQuery)) {
  	dataQuery[dataPageQuery] = Fliplet.Navigate.query[dataPageQuery];
  }*/
  var config = {
    dataSourceId: dataSourceId,
    query: {
      where: dataQuery,
    },
    columns: dataColumns
  };
  
  console.log(config);

	/*Fliplet.DataSources.fetchWithOptions(config).then(function (result) {
	  // console.log(result);
    var entries = result.dataSourceEntries;
    
    
    
  });*/
});