Selectable Rows

big table with selected rows

by PhilM

HTML

<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<div id="container"></div>

CSS

td, th {
    padding: 2px 4px;
}

th {
    font-weight: bold;
}

tr:nth-child(odd) {
    background-color: #BBDDFF;
    border-top: none 0px #BBDDFF;
    border-bottom: none 0px #BBDDFF;
}

tr:nth-child(even) {
    background-color: #44AAFF;
    border-top: none 0px #44AAFF;
    border-bottom: none 0px #44AAFF;
}

.isSelected:nth-child(even), .isSelected:nth-child(odd){
    background-color: #4455FF;
    border-top: solid 1px #000000;
    border-bottom: solid 1px #000000;
}

JavaScript

function tabulate(data, columns) {
    var table = d3.select("#container").append("table"),
        thead = table.append("thead"),
        tbody = table.append("tbody");

    // append the header row
    var headers = thead.append("tr")
        .selectAll("th")
        .data(columns)
        .enter()
        .append("th");
    headers.text(function(column) { return column; });

    // create a row for each object in the data
    var rows = tbody.selectAll("tr")
        .data(data)
        .enter()
        .append("tr");
    
    var selectedRow = null;
    rows.on("click", function(a, b, c){
        if (selectedRow != null){
            $(selectedRow).toggleClass("isSelected");
        }
        $(this).toggleClass("isSelected");
        selectedRow = this;
    });

    // create a cell in each row for each column
    var cells = rows.selectAll("td")
        .data(function(row) {
            return columns.map(function(column) {
                return {column: column, value: row[column]};
            });
        })
        .enter()
        .append("td")
            .attr("class", function(d, i) {return i < 2 ? "personText" : "personIncome"})
            .text(function(d) { return d.value; });

    // add column click handlers
    headers.on("click", function(d, i){
            peopleTable.selectAll("tbody tr")
                .sort(function(a, b) {
                    return d3.descending(a[columns[i]], b[columns[i]]);
                });
        });    
    return table;
}

// create some people
var people = [
    /*{name: "Jill", age: 30},
    {name: "Bob", age: 32},
    {name: "George", age: 29},
    {name: "Sally", age: 31}*/
];

for (var i=0; i < 1500; i++){
    people.push(
        {
            name: "Person " + i, 
            age: Math.floor(Math.random()*50),
            income : Math.floor(Math.random()*10000),
            asdf : Math.floor(Math.random()*10000),
            adsferw : Math.floor(Math.random()*10000),
            qwer :...