dc-datatable

dc-datatable is jquery-free lightweight dc.js addon library to represent data in a tabular format.

Screenshot

Quick start

You can follow one of the below methods.

Install using Npm

npm install dc-datatable

Install from Yarn

yarn add dc-datatable

Using Git repository

Clone the repository

git clone https://github.com/privateOmega/dc-datatable.git

Build from source

npm run build && npm run build_umd

Usage

This library is developed as an ES6 module but output is generated in UMD, systemJS and Common JS formats as well.

Include as a module:

import { Datatable } from "dc-datatable";

new Datatable(div, "chartGroup");

Including files:

<script src="/path/to/dc-datatable.js"></script>
<script>
	new dcDatatables.Datatable(div, "chartGroupName");
</script>

Dependencies:

dc-datatable depends externally on dc.js.

To run the example, you have to include d3.js and crossfilter2

Initialization

Initialization is same as for any other chart in dc.js:

const chart = dcDatatable.Datatable(div, "chartGroupName");

Methods

Initialization looks like this:

const chart = dcDatatable.Datatable("#tableview", "chartGroupName");

int size(int size)

Get or set the table size which determines the number of rows displayed in a page.

const size = chart.size();
chart.size(25);

void columns(object[] options)

Gets or sets column settings to be used. Check out: https://github.com/fiduswriter/Simple-DataTables/wiki/columns

chart.columns([
  // Sort the second column in ascending order
  { select: 1, sort: "asc" },
  // Set the third column as datetime string matching the format "DD/MM/YYY"
  { select: 2, type: "date", format: "DD/MM/YYYY" },
  // Disable sorting on the fourth and fifth columns
  { select: [3, 4], sortable: false },
  // Hide the sixth column
  { select: 5, hidden: true },
  // Append a button to the seventh column
  {
    select: 6,
    render: function(data, cell, row) {
      return (
        data +
        "<button type='button' data-row='" +
        row.dataIndex +
        "'>Select</button>"
      );
    }
  }
]);

void order(string order)

Gets or sets default sort type used in the chart.

chart.order('asc');

bool enableSort(bool enable)

Get status or enable/disable sorting.

chart.enableSort(true);

bool enableSearch(bool enable)

Get status or enable/disable searching.

chart.enableSearch(true);

bool enablePaging(bool enable)

Get status or enable/disable paging.

chart.enablePaging(true);

bool enableScrolling(bool enable)

Get status or enable/disable scrolling.

chart.enableScrolling(true);

string scrollY(string scrollY)

Get or set scrolling options.

chart.scrollY("200px");

bool enablePagingSizeChange(bool enable)

Get status or enable/disable paging size change dropdown.

chart.enablePagingSizeChange(true);

void enableHeader(bool enable)

Get status or set whether to show or hide header row.

chart.enableHeader(true);

void enableFooter(bool enable)

Get status or set whether to show or hide footer row.

chart.enableFooter(true);

bool enableAutoWidth(bool enable)

Get status or enable/disable automatic column width calculation.

chart.enableAutoWidth(true);

Chaining

All of the exposed methods return dc-datatable object so chaining subsequent calls is possible. An example of this would be:

const chart = dc.Datatable(".container", "name");
chart.enableHeader(false).enableAutoWidth(true); // and so on...

Copyright and license

Licensed under MIT license.