Skip to content

ile/d3-tablesort

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

d3-tablesort

Sortable, scrollable table for D3.

Install

Download the css and js files or do bower install d3-tablesort.

Usage

HTML

<link rel="stylesheet" type="text/css" href="d3-tablesort/d3-tablesort.css">
<script src="d3-tablesort/d3-tablesort.js"></script>

JavaScript

Creating the table:

    TableSort(
        table_id,
        array_of_columns,
        array_of_data,
        dimensions
        );

table id

This should be a string like "#my_table".

array of columns

Array of columns should be in the form of array of objects:

    [
	    { text: 'Kunta', sort: TableSort.alphabet },
    	{ text: 'Osuus', sort: TableSort.numeric, sort_column: true }
	]

In the object a sorting function can be used if sorting wants to be enabled for that columns. There are two sorting functions available:

  • TableSort.alphabetic
  • TableSort.numeric

The column that will used for sorting by default can be denoted by sort_column: true property.

array of data

Array of data should be in the form of nested arrays. These should correspond to the array of columns, ie. the first item in the array (index 0) should correspond to index 0 in array of columns.

	[
		[ 'Rautavaara', '99.73 %' ],
		[ 'Pelkosenniemi', '99.69 %' ],
		[ 'Kiikoinen', '99.68 %' ],
		[ 'Luhanka', '99.63 %' ],
		[ 'Reisjärvi', '99.6 %' ],
		[ 'Savukoski', '99.57 %' ]
	]

Data can also be given in the form of:

	[
		{ attribute1: '...', attribute2: '...', attributeN: '...', data: [ 'Rautavaara', '99.73 %' ] },
		{ attribute1: '...', attribute2: '...', attributeN: '...', data: [ 'Pelkosenniemi', '99.69 %' ] },
		{ attribute1: '...', attribute2: '...', attributeN: '...', data: [ 'Kiikoinen', '99.68 %' ] },
		{ attribute1: '...', attribute2: '...', attributeN: '...', data: [ 'Luhanka', '99.63 %' ] },
		{ attribute1: '...', attribute2: '...', attributeN: '...', data: [ 'Reisjärvi', '99.6 %' ] },
		{ attribute1: '...', attribute2: '...', attributeN: '...', data: [ 'Savukoski', '99.57 %' ] }
	]

.. where attributes will be set to each row (<tr>). For example, you can bind datasets (e.g. data-id) to each row this way.

dimensions

For example:

{ width: '400px', height: '700px' }

Example output

image

Credits

Inspired by, and initial code by: http://devforrest.com/examples/table/table.php

About

Sortable, scrollable table for D3

Resources

License

Stars

Watchers

Forks

Packages

No packages published