|
3 | 3 | The intent of this project is to integrate the powerful UI, styling, and plugins of |
4 | 4 | [DataTables](https://datatables.net/) with dc.js filtered data. |
5 | 5 |
|
6 | | -[Demo](https://dc-js.github.io/dc.datatables.js/) using the dc.js stock example, but with a |
7 | | -DataTable to display the data in a flexible way. |
| 6 | +[Demo](https://dc-js.github.io/dc.datatables.js/) using the dc.js stock example, but displaying the |
| 7 | +data with a DataTable. |
8 | 8 |
|
9 | | -For now the implementation is quite simple: |
| 9 | +Instead of generating an HTML table using `dc.dataTable` and then converting the DOM elements to a |
| 10 | +DataTable, use `dc.datatables.js` to import the data programmatically. This should be faster and |
| 11 | +less error-prone. |
| 12 | + |
| 13 | +Implementation: |
10 | 14 |
|
11 | 15 | * `.render()` creates the DataTable object and maps |
12 | 16 | [columns](https://dc-js.github.io/dc.js/docs/html/dc.dataTable.html#columns__anchor) defined |
13 | 17 | similar to those in `dc.dataTable` |
14 | 18 | * `.redraw()` pulls all the data (`.top(Infinity`) from the dimension and puts it into the |
15 | | - DataTable. |
| 19 | + DataTable using [rows.add()](https://datatables.net/reference/api/rows.add()) |
16 | 20 | * `.dt()` fetches the underlying DataTable object for further customization. |
17 | 21 |
|
18 | | -This method is much faster and more reliable than the old method of generating an HTML table using |
19 | | -`dc.dataTable` and then converting the DOM elements to a DataTable. |
| 22 | +For control over column formatting and behavior, use the object form of columns |
| 23 | + |
| 24 | +* [columns.type](https://datatables.net/reference/option/columns.type), used for sorting, is 'num' |
| 25 | + by default; use `type` to override this |
| 26 | +* [columns.name](https://datatables.net/reference/option/columns.name), used as a unique id, is read |
| 27 | + from the `label` |
| 28 | +* [columns.title](https://datatables.net/reference/option/columns.title), used to provide heading |
| 29 | + text, is read from the `label` and capitalized |
| 30 | +* [columns.render](https://datatables.net/reference/option/columns.render), used to fetch and format |
| 31 | + the data, uses the function `format` |
| 32 | + |
| 33 | +In limited cases, you can also use the string form of columns. This will read the field with that |
| 34 | +name, use the default numeric ordering |
20 | 35 |
|
21 | 36 | See something missing? [File an issue](https://github.com/dc-js/dc.datatables.js/issues) on this |
22 | 37 | repo, or even better, fork this project and file a pull request! |
0 commit comments