All of this code and the d3-superTable library is on GitHub here: https://github.com/MariaNattestad/d3-superTable

Basic SuperTable

Simple table with only data. Has built-in sorting functionality by clicking on column names, with numeric sort for numeric columns and natural sort for strings

d3.select("#table1_landing").call(
	d3.superTable()
		.table_data(data) // the only required parameter is the data itself, in the format of an array of objects: [{}, {}, {}]
		.num_rows_to_show(5) // limits to 5 rows. You can leave out this line to show all rows
);

Table header

Same table with a header provided to define which columns to show and in what order (notice "type" is first now)

d3.select("#table2_landing").call(
	d3.superTable()
		.table_data(data)
		.table_header(["type","chrom","start","end","name","score"])
		.num_rows_to_show(5)
);

Enable row selection

Define a click_function to do something when a row is clicked

function choose_row(d) {
	d3.select("#table3_output").append("li").html("You clicked the row with name: " + d.name);
}

d3.select("#table3_landing").call(
	d3.superTable()
		.table_data(data)
		.table_header(["chrom","start","end","name","score","type"])
		.num_rows_to_show(5)
		.click_function(choose_row)
);

.d3-superTable-table .selected {
	background-color: #dddddd;
}
.d3-superTable-table .unselected {
	background-color: white;
}

Check action is complete before selecting another row

When a row-click starts an action that takes time to complete, use the check_ready_function to prevent a user from clicking another row until the first action is complete and the check_ready_function returns true

var finished_running = true;

function ready() {
	return finished_running;
}

function run_something(d) {
	console.log("running " + d.name);
	finished_running = false;
	// Here we just use a 3-second time-out to simulate some action that takes time, like reading from a file
	window.setTimeout(function() {finished_running = true},3000);
}

d3.select("#table4_landing").call(
	d3.superTable()
		.table_data(data)
		.table_header(["chrom","start","end","name","score","type"])
		.num_rows_to_show(5)
		.click_function(run_something)
		.check_ready_function(ready)
);

Advanced filtering

Inspired by the power of the "awk" language on the command-line, advanced filtering can be applied by typing into the input boxes at the top

Try entering =17 into the chrom column or >39000000 into the start column. The options are =, <, and > You can even apply multiple filters to the same row by entering them separated by spaces. Try in the score column entering: >20 <50

d3.select("#table5_landing").call(
	d3.superTable()
		.table_data(data)
		.table_header(["chrom","start","end","name","size","score","type"])
		.num_rows_to_show(10)
		.show_advanced_filters(true) // Powerful filtering options
		.click_function(choose_row)
);

Run function on filterered data

Filter table using the advanced filtering described above, and then run a given function on all the data that passed the filters

Check the console each time you change the filtering by typing into the input boxes on the table below. It will tell you the total number of rows after filtering.

function count_rows(dataset) {
	console.log("Number of rows: ", dataset.length);
}

d3.select("#table6_landing").call(
	d3.superTable()
		.table_data(data)
		.table_header(["chrom","start","end","name","size","score","type"])
		.num_rows_to_show(10)
		.show_advanced_filters(true) // Powerful filtering options
		.click_function(choose_row)
		.run_on_filtered_data_function(count_rows)
);

Stylesheet / CSS

This is the CSS included in d3-superTable.css that provides selection highlighting and other basic prettiness. Use the same tags to override various aspects of the table's style.

Note: This page also uses bootstrap to change the fonts and make the code snippets look nicer.

.d3-superTable-table {
	border-spacing: 0px;
	margin: 5vmin 5vmin 5vmin 5vmin;
}

.d3-superTable-table th, .d3-superTable-table td {
	text-align: center;
	padding: 0.3vmin 0.3vmin 0.3vmin 0.3vmin;
	border: 0.1px solid #cccccc;
}

.d3-superTable-table input {
	width: 100%;
}

.d3-superTable-table .selected {
	background-color: #dddddd;
}
.d3-superTable-table .unselected {
	background-color: white;
}
.d3-superTable-table .d3-superTable-header-row {
	cursor: pointer;
}