From a6935c2bfc7bb65037814bd09a109ac66b14771b Mon Sep 17 00:00:00 2001 From: Marc Wouts Date: Sat, 8 Jun 2024 00:22:13 +0100 Subject: [PATCH] Add the column visibility button --- docs/advanced_parameters.md | 16 +--- docs/changelog.md | 4 + docs/extensions.md | 90 +++++++++++++++++++ packages/dt_for_itables/CHANGELOG.md | 10 +++ packages/dt_for_itables/package-lock.json | 46 +++++----- packages/dt_for_itables/package.json | 13 ++- packages/dt_for_itables/src/index.css | 3 + packages/dt_for_itables/src/index.js | 7 +- .../itables_for_streamlit/package-lock.json | 2 +- src/itables/html/datatables_template.html | 4 +- src/itables/javascript.py | 14 +-- src/itables/utils.py | 4 +- tests/test_javascript.py | 3 +- 13 files changed, 165 insertions(+), 51 deletions(-) create mode 100644 packages/dt_for_itables/src/index.css diff --git a/docs/advanced_parameters.md b/docs/advanced_parameters.md index e490c7ee..b8694536 100644 --- a/docs/advanced_parameters.md +++ b/docs/advanced_parameters.md @@ -59,20 +59,8 @@ You can set additional `tags` on the table like e.g. a [caption](https://datatab show(df, "Countries from the World Bank Database") ``` -The caption appears at the bottom of the table by default (except -in Jupyter Book). This is governed by `caption-side:bottom` -in the [`style` option](style). - -You can also override the location of the caption in the caption tag itself: - -```{code-cell} -:tags: [full-width] - -show( - df, - tags='Countries from the World Bank Database', -) -``` +The caption appears at the bottom of the table by default: this is governed by `caption-side:bottom` +in the [`style` option](style) (but for some reason this is not effective in Jupyter Book 😕). (layout)= ## Table layout diff --git a/docs/changelog.md b/docs/changelog.md index 1c672940..00d23bd3 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -8,6 +8,10 @@ ITables ChangeLog - We have added an explicit `encoding` argument in the calls to `read_text` to address an issue seen on Windows ([#252](https://github.com/mwouts/itables/issues/252)). - We have adjusted the codecov settings ([#280](https://github.com/mwouts/itables/pull/280)) +**Changed** +- We have added a default css on `dt-container` equal to `{max-width:100%}`. +- We have updated `datatables.net-dt` to `2.0.8`, and included the [column visibility button](https://datatables.net/extensions/buttons/examples/column_visibility/simple.html) in the `dt_for_itables` package ([#284](https://github.com/mwouts/itables/issues/284)) + 2.1.0 (2024-05-27) ------------------ diff --git a/docs/extensions.md b/docs/extensions.md index 459f25ac..4b6d9e99 100644 --- a/docs/extensions.md +++ b/docs/extensions.md @@ -102,6 +102,12 @@ show( ) ``` +```{tip} +Only the filtered or selected rows are exported to CSV/Excel. To filter the rows you +can use the simple search box, the [SearchPanes](#searchpanes) and [SearchBuilder](#searchbuilder) +options, or the [select](#row-selection) extension. +``` + ```{warning} At the moment, the CSV and Excel buttons don't work well with large tables in some browsers. Please subscribe to [#251](https://github.com/mwouts/itables/issues/251) if you wish to receive updates on this. @@ -112,6 +118,64 @@ The PDF button is not included in ITables' DataTable bundle. This is because the have a large footprint on the bundle size. Still, you can add it to your custom bundle, see the next chapter. ``` +## Column Visibility + +The [column visibility](https://datatables.net/extensions/buttons/examples/column_visibility/index.html) +buttons of DataTables let you select which columns are visible. + +```{code-cell} +:tags: [full-width] + +show( + # column visibility works best with a flat header + df.reset_index(), + buttons=["columnsToggle"], +) +``` + +```{tip} +The column visibility button is available under many forms. + +Check-out `buttons=["colvis"]` +for a [single](https://datatables.net/extensions/buttons/examples/column_visibility/simple.html) button. +Extend the `colvis` button with the +[collection layout](https://datatables.net/extensions/buttons/examples/column_visibility/layout.html). + +As always, when porting examples from DataTables to ITables, you will +have to convert the JavaScript notation (left) to Python (right) as in the below: +::::{grid} + +:::{grid-item} +:outline: +:columns: 6 +~~~javascript +buttons: [ + { + extend: 'colvis', + collectionLayout: 'fixed columns', + popoverTitle: 'Column visibility control' + } +] +~~~ +::: +:::{grid-item} +:outline: +:columns: 6 +~~~python +buttons = [ + { + "extend": "colvis", + "collectionLayout": "fixed columns", + "popoverTitle": "Column visibility control" + } +] +~~~ +::: + +:::: + +``` + ## SearchPanes [SearchPanes](https://datatables.net/extensions/searchpanes/) is an extension that lets you select rows based on @@ -197,6 +261,32 @@ opt.keys = True The KeyTable extension works in Jupyter Book (try it here in the documentation) but not in JupyterLab. ``` +## Row selection + +The [select](https://datatables.net/extensions/select) extension let you select rows (or cells). When you do so, +only the selected rows are exported + +```{code-cell} +:tags: [full-width] + +show(df, select=True, buttons=["copyHtml5", "csvHtml5", "excelHtml5"]) +``` + +```{tip} +The `select` option accept multiple values, as documented [here](https://datatables.net/extensions/select): +- `select=True` or `select="os"` let you select using single click, shift-click and ctrl-click +- `select="single"` let you select a single row +- `select="multi"` for single click selection of multiple rows, `select="multi+shift"`, ... + +With `select={"style": "os", "items": "cell"}` you can let the user select specific cells, +however cell selection is not taken into account when exporting the data. +``` + +```{tip} +At the moment it is not possible to get the selected rows back in Python. Please subscribe to +[#250](https://github.com/mwouts/itables/issues/250) to get updates on this topic. +``` + ## RowGroup Use the [RowGroup](https://datatables.net/extensions/rowgroup/) extension to group diff --git a/packages/dt_for_itables/CHANGELOG.md b/packages/dt_for_itables/CHANGELOG.md index d889de19..7fccea10 100644 --- a/packages/dt_for_itables/CHANGELOG.md +++ b/packages/dt_for_itables/CHANGELOG.md @@ -1,3 +1,13 @@ +# 2.0.10 (2024-06-08) + +**Added** +- The default css for `dt-container` is `{max-width:100%;}` +- We have included the `colvis` button in the package + +**Changed** +- Updated `datatables.net-dt==2.0.8` and `datatables.net-select-dt==2.0.3` + + # 2.0.7 (2024-05-26) **Added** diff --git a/packages/dt_for_itables/package-lock.json b/packages/dt_for_itables/package-lock.json index f67f1884..9f693675 100644 --- a/packages/dt_for_itables/package-lock.json +++ b/packages/dt_for_itables/package-lock.json @@ -1,12 +1,12 @@ { "name": "dt_for_itables", - "version": "2.0.7", + "version": "2.0.10", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "dt_for_itables", - "version": "2.0.7", + "version": "2.0.10", "license": "MIT", "dependencies": { "datatables.net-buttons": "^3.0.1", @@ -399,9 +399,9 @@ "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==" }, "node_modules/datatables.net": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-2.0.7.tgz", - "integrity": "sha512-cyW+HZwkMzb4bLrao/SS9/i64ZHiw5nYhXl+OwuOPgddG+R9O11iOEke8wYsdiyOQmjv2mE6xkEmRMZwHZc8zw==", + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-2.0.8.tgz", + "integrity": "sha512-4/2dYx4vl975zQqZbyoVEm0huPe61qffjBRby7K7V+y9E+ORq4R8KavkgrNMmIgO6cl85Pg4AvCbVjvPCIT1Yg==", "dependencies": { "jquery": ">=1.7" } @@ -426,11 +426,11 @@ } }, "node_modules/datatables.net-dt": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/datatables.net-dt/-/datatables.net-dt-2.0.7.tgz", - "integrity": "sha512-geClTADRyr/3B4S4eXLspidnkTzwvyLlUivYLQBlmq6M3+AAz1MI7kYXDEuOLC12Q8cvaABXFPI0oQ7Z4VZp4A==", + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/datatables.net-dt/-/datatables.net-dt-2.0.8.tgz", + "integrity": "sha512-9SG5MWJXq2IQSJWuH+2DvK/9AXduZr0wI/lQbrtBBd18Ck5sO8z3EXxy5wYxxjTFZ9Z+wl0lHsO//qR8QYmWIA==", "dependencies": { - "datatables.net": "2.0.7", + "datatables.net": "2.0.8", "jquery": ">=1.7" } }, @@ -454,21 +454,21 @@ } }, "node_modules/datatables.net-keytable": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/datatables.net-keytable/-/datatables.net-keytable-2.12.0.tgz", - "integrity": "sha512-vijxMw7ZIB/fDe5FWGiDqe8CPiPXg3lvqK4lL48vQh1zoiE3+0C3za82qM9g/2zbwtIXmOLwBZc2ivrErNVPkA==", + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/datatables.net-keytable/-/datatables.net-keytable-2.12.1.tgz", + "integrity": "sha512-MR/qvBxVXld3i+YZfLAv/yCMvzh1trEIMpLo7YU0DP/CIWewHhkFeTS0G3tJgLjBes4v4tyR0Zjf6R9aMtMBEw==", "dependencies": { "datatables.net": ">=1.11.0", "jquery": ">=1.7" } }, "node_modules/datatables.net-keytable-dt": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/datatables.net-keytable-dt/-/datatables.net-keytable-dt-2.12.0.tgz", - "integrity": "sha512-FubrNaitx13Mq2cny2fxuV/Nk6bbmGw6VrH9Df81CT/jVfwAEkwIFirETEoL/hZfQDcD76ujj0b1wNDZ5Bsv9Q==", + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/datatables.net-keytable-dt/-/datatables.net-keytable-dt-2.12.1.tgz", + "integrity": "sha512-seg1tgCxulPa5v3StBQ/UPvbsQ1BROl2MoYrNpB9c9GimfPypWPvJQv0IXbb8LR58IAzdDHC6rCvbtmtgHKsqA==", "dependencies": { "datatables.net-dt": ">=1.11.0", - "datatables.net-keytable": "2.12.0", + "datatables.net-keytable": "2.12.1", "jquery": ">=1.7" } }, @@ -530,21 +530,21 @@ } }, "node_modules/datatables.net-select": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/datatables.net-select/-/datatables.net-select-2.0.2.tgz", - "integrity": "sha512-1dFrVfzfudFezcbFM0AE4Nj7U1JeDlffAXwaEu/Ff6O2sBYL0XrSJsz5AIkkDgJmeKeeqDH8rrc3OanFblIWKg==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/datatables.net-select/-/datatables.net-select-2.0.3.tgz", + "integrity": "sha512-Fw7/uAlpOTfz8R8JAXDV4qHfP2MA+4vnNSYjuo9NVbkwrA/71t+KGN2JRugCTTzJuiyQ8YN6thzC9lPBqd/7nA==", "dependencies": { "datatables.net": "^2", "jquery": ">=1.7" } }, "node_modules/datatables.net-select-dt": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/datatables.net-select-dt/-/datatables.net-select-dt-2.0.2.tgz", - "integrity": "sha512-rMqsfl6nQcmMdwU3NNNrIdkjDOGkBuKS9BZ3jin20RRfw7089ghU0M6iqhvdHPY6yvUZ9iQ0RBdaurGXRIshNA==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/datatables.net-select-dt/-/datatables.net-select-dt-2.0.3.tgz", + "integrity": "sha512-iVDm3/SWlOsd2Z9DHs7DIr/5zdBgGO5wdlPLGR7fXsRUKNhnhWv4p1zJwgEDH8Kc9c9w0Z6nkzH4KGPFTYxvjw==", "dependencies": { "datatables.net-dt": "^2", - "datatables.net-select": "2.0.2", + "datatables.net-select": "2.0.3", "jquery": ">=1.7" } }, diff --git a/packages/dt_for_itables/package.json b/packages/dt_for_itables/package.json index 8059f616..b573f706 100644 --- a/packages/dt_for_itables/package.json +++ b/packages/dt_for_itables/package.json @@ -1,9 +1,20 @@ { "name": "dt_for_itables", - "version": "2.0.7", + "version": "2.0.10", "description": "DataTables bundle for itables", "main": "src/index.js", "typings": "src/index.d.js", + "files": [ + "README.md", + "CHANGELOG.md", + "LICENSE", + "dt_bundle.js", + "dt_bundle.css", + "package.json", + "src/index.js", + "src/index.css", + "src/index.d.ts" + ], "scripts": { "build:js": "esbuild src/index.js --format=esm --bundle --outfile=dt_bundle.js --minify", "install:js": "cp dt_bundle.js dt_bundle.css ../../src/itables/html", diff --git a/packages/dt_for_itables/src/index.css b/packages/dt_for_itables/src/index.css new file mode 100644 index 00000000..c6be7e39 --- /dev/null +++ b/packages/dt_for_itables/src/index.css @@ -0,0 +1,3 @@ +.dt-container { + max-width: 100%; +} diff --git a/packages/dt_for_itables/src/index.js b/packages/dt_for_itables/src/index.js index 2a45b62f..592edab5 100644 --- a/packages/dt_for_itables/src/index.js +++ b/packages/dt_for_itables/src/index.js @@ -4,8 +4,9 @@ import DataTable from 'datatables.net-dt'; import 'datatables.net-dt/css/dataTables.dataTables.min.css'; import 'datatables.net-buttons-dt'; -import 'datatables.net-buttons/js/buttons.html5.mjs'; -import 'datatables.net-buttons/js/buttons.print.mjs'; +import 'datatables.net-buttons/js/buttons.html5.min.mjs'; +import 'datatables.net-buttons/js/buttons.print.min.mjs'; +import 'datatables.net-buttons/js/buttons.colVis.min.mjs'; import 'datatables.net-buttons-dt/css/buttons.dataTables.min.css'; DataTable.Buttons.jszip(JSZip); @@ -28,6 +29,8 @@ import 'datatables.net-searchpanes-dt/css/searchPanes.dataTables.min.css'; import 'datatables.net-select-dt'; import 'datatables.net-select-dt/css/select.dataTables.min.css'; +import './index.css'; + export { DataTable, jQuery }; export default DataTable; diff --git a/packages/itables_for_streamlit/package-lock.json b/packages/itables_for_streamlit/package-lock.json index a609db04..290ab28e 100644 --- a/packages/itables_for_streamlit/package-lock.json +++ b/packages/itables_for_streamlit/package-lock.json @@ -20,7 +20,7 @@ } }, "../dt_for_itables": { - "version": "2.0.7", + "version": "2.0.8", "license": "MIT", "dependencies": { "datatables.net-buttons": "^3.0.1", diff --git a/src/itables/html/datatables_template.html b/src/itables/html/datatables_template.html index a13bc801..da686119 100644 --- a/src/itables/html/datatables_template.html +++ b/src/itables/html/datatables_template.html @@ -1,7 +1,7 @@
A
- +