dc-datatable
is jquery-free lightweight dc.js addon library to represent data in a tabular format.
You can follow one of the below methods.
npm install dc-datatable
yarn add dc-datatable
Clone the repository
git clone https://github.com/privateOmega/dc-datatable.git
npm run build && npm run build_umd
This library is developed as an ES6 module but output is generated in UMD, systemJS and Common JS formats as well.
import { Datatable } from "dc-datatable";
new Datatable(div, "chartGroup");
<script src="/path/to/dc-datatable.js"></script>
<script>
new dcDatatables.Datatable(div, "chartGroupName");
</script>
dc-datatable
depends externally on dc.js.
To run the example, you have to include d3.js and crossfilter2
Initialization is same as for any other chart in dc.js:
const chart = dcDatatable.Datatable(div, "chartGroupName");
Initialization looks like this:
const chart = dcDatatable.Datatable("#tableview", "chartGroupName");
Get or set the table size which determines the number of rows displayed in a page.
const size = chart.size();
chart.size(25);
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>"
);
}
}
]);
Gets or sets default sort type used in the chart.
chart.order('asc');
Get status or enable/disable sorting.
chart.enableSort(true);
Get status or enable/disable searching.
chart.enableSearch(true);
Get status or enable/disable paging.
chart.enablePaging(true);
Get status or enable/disable scrolling.
chart.enableScrolling(true);
Get or set scrolling options.
chart.scrollY("200px");
Get status or enable/disable paging size change dropdown.
chart.enablePagingSizeChange(true);
Get status or set whether to show or hide header row.
chart.enableHeader(true);
Get status or set whether to show or hide footer row.
chart.enableFooter(true);
Get status or enable/disable automatic column width calculation.
chart.enableAutoWidth(true);
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...
Licensed under MIT license.