Reusable HTML Table Function

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    table 
		{
		font-family:'Open Sans',sans-serif; 
		font-size:14px;
		border-collapse: collapse;
		}
	table th 
		{
		border: 1px solid #008265;
		border-right: 1px solid #fff;
		padding: 8px;
		
		padding-top: 11px;
		padding-bottom: 11px;
		text-align: left;
		background-color: #008265;
		color: white;
		}
	table th:last-child 
		{
		border-right: 1px solid #008265;
		}
	table td
		{
		border: 1px solid #ddd;
		padding: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    }
	table tr:nth-child(even)
		{
		background-color: #f2f2f2;
		}

</style>
</head>

<body>
  <script>
    
	//a funciton is a javascript object. 
	var myfunction = function(){
		
	};
	
	console.log(myfunction)
	
	//because of this fact, we can attach properties and or functions to an overarching function. 
	var myfunction_withoptions = function(){
	
	
	};
	myfunction_withoptions.options = 'foo'
	myfunction_withoptions.xScale = d3.scaleLinear().range([0,100]).domain([0,1000])

console.log(myfunction_withoptions.options)
	console.log(myfunction_withoptions.xScale)
	console.log(myfunction_withoptions.xScale(500))

// This is a charting (table) function factory/generator 
    // based on Mike Bostock's Toward's Resuable Charts
    //
    //--------https://bost.ocks.org/mike/chart/--------------//
    //
    // the over arching formula, tabulate(), generates a configured 
    // table creation function called 'table()'
    //
    // wrapper functions, such as table.columns are used to attach 
    // table specifications to the 'configured' function to make
    // portions of the d3 code dynamic to user input. 
    //
    // These specifications can be as simple or complex as needed for
    // the particular webpage or visualization component.
    
	/*
	function scaleLinear(){
		scale.range(){
			if not provided [0,1]
			use provided
		}
	}
	*/
	
	var xScale = d3.axisBottom().tickValues()
	 
	
    function tabulate() {
	
 		var columns = "All";
		var showHeader = true;
		
      	//this is the configurable charting function 
        function table(selection){

var rows = tbody.selectAll('tr')
              .data(function(d){return d.values})
              .enter()
              .append('tr');

}
		      	
		//configure the table function for desired columns.
        table.columns = function(value) { 
          	//default in case a specification is not provided. 
      		if (!arguments.length) return columns;		
      		columns = value;
          	//return the charting function with the new specifications. 
       		return table; 
    	};
    
      
      	table.showHeaders = function(value){
          	//if not specified, show headers by default
      		if (!arguments.length) return showHeader;
      		showHeader = value;
       			
	          //return the charting function with the new specifications. 
          	return table; 
        }
		
		
      	//return the configured table function. 
        return table;
      
    	}
    
 //   var customTable = tabulate();
 //   customTable.columns = ["category","value"];
 //   customTable.showHeaders = true; 
    
    var dims = [{"category":"a"},
                {"category":"b"},
                {"category":"c"}];
    
    dims.forEach(function(d){
      	d.values = d3.range(Math.floor(Math.random()*10+1)).map(function(z){return {"category":d.category,"value":z, "hiddenfield":Math.random()}})    
    })
	/*

https://d3js.org/d3.v4.min.js