dc-js/dc.datatables.js

integration of datatables.js with dc.js

dc.datatables.js

NOTE: This library is archived, as it was an incomplete demo and I (Gordon) have moved on. If you are interested in reviving and maintaining this library in the dc-js organization, please reach out to me via my email in bio.

The intent of this project is to integrate the powerful UI, styling, and plugins of DataTables with dc.js filtered data.

Demo using the dc.js stock example, but displaying the data with a DataTable.

NOTE: dc-tableview has a lot more features than this library, check it out!

Instead of generating an HTML table using dc.dataTable and then converting the DOM elements to a DataTable, use dc.datatables.js to import the data programmatically. This should be faster and less error-prone.

Implementation:

• .render() creates the DataTable object and maps columns defined similar to those in dc.dataTable
• .redraw() pulls all the data (.top(Infinity) from the dimension and puts it into the DataTable using rows.add()
• .dt() fetches the underlying DataTable object for further customization.

For control over column formatting and behavior, use the object form of columns

• columns.type, used for sorting, is 'num' by default; use type to override this
• columns.name, used as a unique id, is read from the label
• columns.title, used to provide heading text, is read from the label and capitalized
• columns.render, used to fetch and format the data, uses the function format

In limited cases, you can also use the string form of columns. This will read the field with that name, use the default numeric ordering

See something missing? File an issue on this repo, or even better, fork this project and file a pull request!

dc.datatables.js's Issues

filterAll is not a function

Can't resolve dc_datatables

I am trying to integrate this package with my existing project but am currently unable to correctly import due to a ' ERROR in ./node_modules/dc.datatables/dc.datatables.js' where it cannot resolve dc_datatables.

By importing in a similar way to dc :
import * as dctable from 'dc.datatables';), i get a 'cannot find module' error.

By importing the file directly:
(import * as dctable from 'dc.datatables/dc.datatables') the 'Can't resolve dc_datatables error is produced.

get library working in IE

It's sad, but we still have to support that old dead browser, despite the fact that Microsoft doesn't.

In dc-js/dc.js#1391 (comment), @sgavathe reported:

https://dc-js.github.io/dc.datatables.js/ this sample not working in IE 11. In order to get it working with your sample, do i need to downgrade DC.JS to lower version?

Uncaught (in promise) ReferenceError: dc_datatables is not defined

Hello everyone,

I'm trying to use dc.datatables.js without success. In my web side code I used keysTable = dc_datatables.datatable('.dc-data-table'); but my browser comes back with the attached error message.

Could someone please help me?

Is it possible to add x-scrolling?

I am wondering if it is possible to enable x-scrolling in dc_datatable? I tried adding it using datatables.js after made a dc_datatables.datatable chart but it seems there is a conflict.

Currently unused _group functionality

What is the reason _group functionality has been disabled for dc.datatables?

In the dc.datatables.js file I can see you have stated this is for compatibility reasons. However, on a project I am currently working on this functionality would be really useful.

Thanks

dc-datatables filterAll()

In the dc-datatables example at https://dc-js.github.io/dc.datatables.js the "Reset all" link gives an error:

Uncaught TypeError: charts[i].filterAll is not a function

Vertical Page Fitting

Suggested Enhancement: Vertical Page Fitting

In datatables you can set the number of records shown per page with the top left drop-down menu. This feature is useful if you adjust the size of the container based on number of rows shown. In a case where the container has a set size and you want the datatable to fill the vertical space I believe it would be of use to have an option to set the table to fill vertically.

I've come across this plug in on datatables.net which fit's the datatable to the vertical size of its container:
https://datatables.net/blog/2015-04-10

Could this be added to the dc.datatables package? I presume the option could be set through the exposed dt object?

Thanks

Jack

Enabling default styling

I have got dc.datatables working within my project, however it appears that there is no default styling being applied? Is this on purpose? I can see in the web folder, you have copied the 'jquery.datatables.css' file from the datatables.net-dt package. Is this the recommended way to apply styling to the dc.datatable as opposed to having a css file within the dc.datatables package which is applied by default but can be overridden?

This is what the datatable looks like with no styling (created using titanic dataset).

dc-datatables size() method

In the dc datatables example at https://dc-js.github.io/dc.datatables.js, changing the value in the .size() method does not change the default length (number of entries) of the datatable.

can you create cdn link for this

Hi Please create CDN @gordonwoodhull

deprecate this library in favor of dc-tableview?

dc-tableview has a lot more features than this library.

I wrote this library as a proof of concept because I didn't think we should add a ton of features to dc.dataTable when datatables.js is a whole ecosystem in itself. I didn't know about dc-tableview at the time.

It was pretty easy to get basic functionality, but there is a lot more that could be done, and it looks like @karenpommeroy has done much more, including #6 grouping.

I haven't done a detailed comparison, but if there are any features here that are missing there, we could contribute them.