From 6ee2b0316d9415c1ba2e28322eab5a022d67b2f9 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Mon, 13 Jan 2025 16:12:50 +0300 Subject: [PATCH 01/53] [update] localization updated with date formatting info --- docs/guides/loading-exporting-data.md | 80 +--------------- docs/guides/localization.md | 133 ++++++++++++++++++++++++++ 2 files changed, 136 insertions(+), 77 deletions(-) diff --git a/docs/guides/loading-exporting-data.md b/docs/guides/loading-exporting-data.md index cde4c25..ee3c161 100644 --- a/docs/guides/loading-exporting-data.md +++ b/docs/guides/loading-exporting-data.md @@ -80,7 +80,7 @@ You can load JSON data into Pivot from an external file or the server-side scrip To load local data from a separate file, first prepare the source file with data. -### Example +Example: ~~~jsx function getData() { @@ -303,82 +303,6 @@ exportButton.textContent = "Export"; document.body.appendChild(exportButton); ~~~ -## Setting date format - -The Pivot accepts a date that is parsed into the Date object. By default, the `dateFormat` of the current locale is applied. To redefine the format, change the value of the `dateFormat` parameter in the `formats` object of the [`locale`](/api/config/locale-property). The default format is "%d.%m.%Y". - -### Example - -~~~jsx {17} -function setFormat(value) { - table.setConfig({ locale: { formats: { dateFormat: value } } }); -} - -// date string to Date -const dateFields = fields.filter((f) => f.type == "date"); -if (dateFields.length) { - dataset.forEach((item) => { - dateFields.forEach((f) => { - const v = item[f.id]; - if (typeof v == "string") item[f.id] = new Date(v); - }); - }); -} - -const table = new pivot.Pivot("#root", { - locale: { formats: { dateFormat: "%d %M %Y %H:%i" } }, - fields, - data: dataset, - config: { - rows: ["state"], - columns: ["product_line", "product_type"], - values: [ - { - field: "date", - method: "min" - }, - { - field: "profit", - method: "sum" - }, - { - field: "sales", - method: "sum" - } - ] - } -}); -~~~ - -Pivot uses the following characters for setting the date format: - -| Character | Definition |Example | -| :-------- | :------------------------------------------------ |:------------------------| -| %d | day as a number with leading zero | from 01 to 31 | -| %j | day as a number | from 1 to 31 | -| %D | short name of the day (abbreviation) | Su Mo Tu Sat | -| %l | full name of the day | Sunday Monday Tuesday | -| %W | week as a number with leading zero (with Monday as the first day of the week) | from 01 to 52/53 | -| %m | month as a number with leading zero | from 01 to 12 | -| %n | month as a number | from 1 to 12 | -| %M | short name of the month | Jan Feb Mar | -| %F | full name of the month | January February March | -| %y | year as a number, 2 digits | 24 | -| %Y | year as a number, 4 digits | 2024 | -| %h | hours 12-format with leading zero | from 01 to 12 | -| %g | hours 12-format | from 1 to 12 | -| %H | hours 24-format with leading zero | from 00 to 23 | -| %G | hours 24-format | from 0 to 23 | -| %i | minutes with leading zero | from 01 to 59 | -| %s | seconds with leading zero | from 01 to 59 | -| %S | milliseconds | 128 | -| %a | am or pm | am (for time from midnight until noon) and pm (for time from noon until midnight)| -| %A | AM or PM | AM (for time from midnight until noon) and PM (for time from noon until midnight)| -| %c | displays date and time in the ISO 8601 date format| 2024-10-04T05:04:09 | - - -To present the 20th of June, 2024 with the exact time as *2024-09-20 16:47:08.128*, specify "%Y-%m-%d-%H:%i:%s.%u". - ## Example In this snippet you can see how to load JSON and CSV data: @@ -390,3 +314,5 @@ In this snippet you can see how to load JSON and CSV data: - [Pivot 2.0: Date format](https://snippet.dhtmlx.com/shn1l794) - [Pivot 2.0: Different datasets](https://snippet.dhtmlx.com/6xtqge4i) - [Pivot 2.0. Large dataset](https://snippet.dhtmlx.com/e6qwqrys) + +**Related articles**: [Date formatting](/guides/localization#date-formatting) \ No newline at end of file diff --git a/docs/guides/localization.md b/docs/guides/localization.md index e24e863..c75ec33 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -185,6 +185,139 @@ const ko = {...} //object with locale widget.setLocale(ko); ~~~ +## Date formatting + +Pivot accepts a date that is parsed into the Date object. By default, the `dateFormat` of the current locale is applied. To redefine the format for all date fields in Pivot, change the value of the `dateFormat` parameter in the `formats` object of the [`locale`](/api/config/locale-property). The default format is "%d.%m.%Y". + +Example: + +~~~jsx {17} +function setFormat(value) { + table.setConfig({ locale: { formats: { dateFormat: value } } }); +} + +// date string to Date +const dateFields = fields.filter((f) => f.type == "date"); +if (dateFields.length) { + dataset.forEach((item) => { + dateFields.forEach((f) => { + const v = item[f.id]; + if (typeof v == "string") item[f.id] = new Date(v); + }); + }); +} + +const table = new pivot.Pivot("#root", { + locale: { formats: { dateFormat: "%d %M %Y %H:%i" } }, + fields, + data: dataset, + config: { + rows: ["state"], + columns: ["product_line", "product_type"], + values: [ + { + field: "date", + method: "min" + }, + { + field: "profit", + method: "sum" + }, + { + field: "sales", + method: "sum" + } + ] + } +}); +~~~ + +:::info +In case you need to set format to a specific field, use the template parameter of the [`tableShape`](/api/config/tableshape-property) or [`headerShape`](/api/config/headershape-property) +::: + +## Date and time format specification + +Pivot uses the following characters for setting the date format: + +| Character | Definition |Example | +| :-------- | :------------------------------------------------ |:------------------------| +| %d | day as a number with leading zero | from 01 to 31 | +| %j | day as a number | from 1 to 31 | +| %D | short name of the day (abbreviation) | Su Mo Tu Sat | +| %l | full name of the day | Sunday Monday Tuesday | +| %W | week as a number with leading zero (with Monday as the first day of the week) | from 01 to 52/53 | +| %m | month as a number with leading zero | from 01 to 12 | +| %n | month as a number | from 1 to 12 | +| %M | short name of the month | Jan Feb Mar | +| %F | full name of the month | January February March | +| %y | year as a number, 2 digits | 24 | +| %Y | year as a number, 4 digits | 2024 | +| %h | hours 12-format with leading zero | from 01 to 12 | +| %g | hours 12-format | from 1 to 12 | +| %H | hours 24-format with leading zero | from 00 to 23 | +| %G | hours 24-format | from 0 to 23 | +| %i | minutes with leading zero | from 01 to 59 | +| %s | seconds with leading zero | from 01 to 59 | +| %S | milliseconds | 128 | +| %a | am or pm | am (for time from midnight until noon) and pm (for time from noon until midnight)| +| %A | AM or PM | AM (for time from midnight until noon) and PM (for time from noon until midnight)| +| %c | displays date and time in the ISO 8601 date format| 2024-10-04T05:04:09 | + + +To present the 20th of June, 2024 with the exact time as *2024-09-20 16:47:08.128*, specify "%Y-%m-%d-%H:%i:%s.%u". + +## Number formatting + +By default, all fields with the *number** type are localized according to the locale (the value in the `lang` field of the locale). The `Intl.NumberFormat` object enables language-sensitive number formatting. In case you need to disable number formatting of some fields, add the template via the [`tableShape`](/api/config/tableshape-property) property or set the *text* type for this field instead of the *number* type. + +Example: + +~~~jsx + // Define number formatting options + const numOptions = { maximumFractionDigits: 2, minimumFractionDigits: 2 }; + + // Create number formatters + const num = new Intl.NumberFormat("en-US", numOptions); + const eurNum = new Intl.NumberFormat("en-US", { + style: "currency", + currency: "EUR", + ...numOptions, + }); + + // Templates for specific fields + const templates = { + continent: v => (v === "North America" ? "NA" : v), + oil: (v, op) => (v && op != "count" ? num.format(v) : v), + gdp: (v, op) => (v && op != "count" ? eurNum.format(v) : v), + year: v => v, + }; + + // Function to style cells based on field, value, area, and method + function cellStyle(field, value, area, method) { + if (method?.indexOf("count") > -1) return "count"; + } + + const table = new pivot.Pivot("#root", { + data, + fields, + config, + tableShape: { + templates, + cellStyle, + }, + }); + + // Apply styles for count class + const style = document.createElement('style'); + style.innerHTML = ` + .count { + font-weight: 600; + } + `; + document.head.appendChild(style); +~~~ + ## Example In this snippet you can see how to switch between several locales: From ba1eddae98746bd38e54c9635b8da9b84aa9086e Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Mon, 13 Jan 2025 16:19:13 +0300 Subject: [PATCH 02/53] [update] localization updated with date formatting info --- docs/guides/localization.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/guides/localization.md b/docs/guides/localization.md index c75ec33..b660ccb 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -269,15 +269,15 @@ To present the 20th of June, 2024 with the exact time as *2024-09-20 16:47:08.12 ## Number formatting -By default, all fields with the *number** type are localized according to the locale (the value in the `lang` field of the locale). The `Intl.NumberFormat` object enables language-sensitive number formatting. In case you need to disable number formatting of some fields, add the template via the [`tableShape`](/api/config/tableshape-property) property or set the *text* type for this field instead of the *number* type. +By default, all fields with the *number* type are localized according to the locale (the value in the `lang` field of the locale). The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) object enables language-sensitive number formatting. In case you need to disable number formatting of some fields, add the template via the [`tableShape`](/api/config/tableshape-property) property or set the *text* type for this field instead of the *number* type. Example: ~~~jsx // Define number formatting options const numOptions = { maximumFractionDigits: 2, minimumFractionDigits: 2 }; - - // Create number formatters + + // Create number formatters const num = new Intl.NumberFormat("en-US", numOptions); const eurNum = new Intl.NumberFormat("en-US", { style: "currency", From fb3b429e28bf852be49701c0f3c139835ca1ce49 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Tue, 14 Jan 2025 12:57:30 +0300 Subject: [PATCH 03/53] [update] localization updated --- docs/guides/localization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/localization.md b/docs/guides/localization.md index b660ccb..387d168 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -187,7 +187,7 @@ widget.setLocale(ko); ## Date formatting -Pivot accepts a date that is parsed into the Date object. By default, the `dateFormat` of the current locale is applied. To redefine the format for all date fields in Pivot, change the value of the `dateFormat` parameter in the `formats` object of the [`locale`](/api/config/locale-property). The default format is "%d.%m.%Y". +Pivot accepts a date as a Date object (make sure to parse a date to a Date object). By default, the `dateFormat` of the current locale is applied. To redefine the format for all date fields in Pivot, change the value of the `dateFormat` parameter in the `formats` object of the [`locale`](/api/config/locale-property). The default format is "%d.%m.%Y". Example: From e9d74ac5483db9006958c1f9cad166a151e337ee Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Mon, 20 Jan 2025 23:32:42 +0400 Subject: [PATCH 04/53] [update] docs version to v3.7.0 --- package.json | 8 +- yarn.lock | 797 ++++++++++++++++++++++++++------------------------- 2 files changed, 411 insertions(+), 394 deletions(-) diff --git a/package.json b/package.json index 5231deb..fedd10f 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ "write-heading-ids": "docusaurus write-heading-ids" }, "dependencies": { - "@docusaurus/core": "^3.6.2", - "@docusaurus/preset-classic": "^3.6.2", + "@docusaurus/core": "^3.7.0", + "@docusaurus/preset-classic": "^3.7.0", "@easyops-cn/docusaurus-search-local": "^0.44.5", "@mdx-js/react": "^3.0.0", "@svgr/webpack": "^5.5.0", @@ -29,8 +29,8 @@ "url-loader": "^4.1.1" }, "devDependencies": { - "@docusaurus/module-type-aliases": "^3.6.2", - "@docusaurus/types": "^3.6.2", + "@docusaurus/module-type-aliases": "^3.7.0", + "@docusaurus/types": "^3.7.0", "dhx-md-data-parser": "file:local_modules/dhx-md-data-parser", "docusaurus-plugin-sass": "^0.2.5" }, diff --git a/yarn.lock b/yarn.lock index c6dcdf4..8897326 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,158 +2,153 @@ # yarn lockfile v1 -"@algolia/autocomplete-core@1.9.3": - version "1.9.3" - resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz#1d56482a768c33aae0868c8533049e02e8961be7" - integrity sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw== - dependencies: - "@algolia/autocomplete-plugin-algolia-insights" "1.9.3" - "@algolia/autocomplete-shared" "1.9.3" - -"@algolia/autocomplete-plugin-algolia-insights@1.9.3": - version "1.9.3" - resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.9.3.tgz#9b7f8641052c8ead6d66c1623d444cbe19dde587" - integrity sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg== - dependencies: - "@algolia/autocomplete-shared" "1.9.3" - -"@algolia/autocomplete-preset-algolia@1.9.3": - version "1.9.3" - resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.9.3.tgz#64cca4a4304cfcad2cf730e83067e0c1b2f485da" - integrity sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA== - dependencies: - "@algolia/autocomplete-shared" "1.9.3" - -"@algolia/autocomplete-shared@1.9.3": - version "1.9.3" - resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.3.tgz#2e22e830d36f0a9cf2c0ccd3c7f6d59435b77dfa" - integrity sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ== - -"@algolia/cache-browser-local-storage@4.24.0": - version "4.24.0" - resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.24.0.tgz#97bc6d067a9fd932b9c922faa6b7fd6e546e1348" - integrity sha512-t63W9BnoXVrGy9iYHBgObNXqYXM3tYXCjDSHeNwnsc324r4o5UiVKUiAB4THQ5z9U5hTj6qUvwg/Ez43ZD85ww== - dependencies: - "@algolia/cache-common" "4.24.0" +"@algolia/autocomplete-core@1.17.7": + version "1.17.7" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.17.7.tgz#2c410baa94a47c5c5f56ed712bb4a00ebe24088b" + integrity sha512-BjiPOW6ks90UKl7TwMv7oNQMnzU+t/wk9mgIDi6b1tXpUek7MW0lbNOUHpvam9pe3lVCf4xPFT+lK7s+e+fs7Q== + dependencies: + "@algolia/autocomplete-plugin-algolia-insights" "1.17.7" + "@algolia/autocomplete-shared" "1.17.7" + +"@algolia/autocomplete-plugin-algolia-insights@1.17.7": + version "1.17.7" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.17.7.tgz#7d2b105f84e7dd8f0370aa4c4ab3b704e6760d82" + integrity sha512-Jca5Ude6yUOuyzjnz57og7Et3aXjbwCSDf/8onLHSQgw1qW3ALl9mrMWaXb5FmPVkV3EtkD2F/+NkT6VHyPu9A== + dependencies: + "@algolia/autocomplete-shared" "1.17.7" + +"@algolia/autocomplete-preset-algolia@1.17.7": + version "1.17.7" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.17.7.tgz#c9badc0d73d62db5bf565d839d94ec0034680ae9" + integrity sha512-ggOQ950+nwbWROq2MOCIL71RE0DdQZsceqrg32UqnhDz8FlO9rL8ONHNsI2R1MH0tkgVIDKI/D0sMiUchsFdWA== + dependencies: + "@algolia/autocomplete-shared" "1.17.7" + +"@algolia/autocomplete-shared@1.17.7": + version "1.17.7" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.17.7.tgz#105e84ad9d1a31d3fb86ba20dc890eefe1a313a0" + integrity sha512-o/1Vurr42U/qskRSuhBH+VKxMvkkUVTLU6WZQr+L5lGZZLYWyhdzWjW0iGXY7EkwRTjBqvN2EsR81yCTGV/kmg== + +"@algolia/client-abtesting@5.19.0": + version "5.19.0" + resolved "https://registry.yarnpkg.com/@algolia/client-abtesting/-/client-abtesting-5.19.0.tgz#0a6e73da05decc8f1bbcd7e5b9a82a8d876e7bf5" + integrity sha512-dMHwy2+nBL0SnIsC1iHvkBao64h4z+roGelOz11cxrDBrAdASxLxmfVMop8gmodQ2yZSacX0Rzevtxa+9SqxCw== + dependencies: + "@algolia/client-common" "5.19.0" + "@algolia/requester-browser-xhr" "5.19.0" + "@algolia/requester-fetch" "5.19.0" + "@algolia/requester-node-http" "5.19.0" + +"@algolia/client-analytics@5.19.0": + version "5.19.0" + resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-5.19.0.tgz#45e33343fd4517e05a340a97bb37bebb4466000e" + integrity sha512-CDW4RwnCHzU10upPJqS6N6YwDpDHno7w6/qXT9KPbPbt8szIIzCHrva4O9KIfx1OhdsHzfGSI5hMAiOOYl4DEQ== + dependencies: + "@algolia/client-common" "5.19.0" + "@algolia/requester-browser-xhr" "5.19.0" + "@algolia/requester-fetch" "5.19.0" + "@algolia/requester-node-http" "5.19.0" + +"@algolia/client-common@5.19.0": + version "5.19.0" + resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-5.19.0.tgz#efddaaf28f0f478117c2aab22d19c99b06f99761" + integrity sha512-2ERRbICHXvtj5kfFpY5r8qu9pJII/NAHsdgUXnUitQFwPdPL7wXiupcvZJC7DSntOnE8AE0lM7oDsPhrJfj5nQ== + +"@algolia/client-insights@5.19.0": + version "5.19.0" + resolved "https://registry.yarnpkg.com/@algolia/client-insights/-/client-insights-5.19.0.tgz#81ff8eb3df724f6dd8ea3f423966b9ef7d36f903" + integrity sha512-xPOiGjo6I9mfjdJO7Y+p035aWePcbsItizIp+qVyfkfZiGgD+TbNxM12g7QhFAHIkx/mlYaocxPY/TmwPzTe+A== + dependencies: + "@algolia/client-common" "5.19.0" + "@algolia/requester-browser-xhr" "5.19.0" + "@algolia/requester-fetch" "5.19.0" + "@algolia/requester-node-http" "5.19.0" + +"@algolia/client-personalization@5.19.0": + version "5.19.0" + resolved "https://registry.yarnpkg.com/@algolia/client-personalization/-/client-personalization-5.19.0.tgz#9a75230b9dec490a1e0851539a40a9371c8cd987" + integrity sha512-B9eoce/fk8NLboGje+pMr72pw+PV7c5Z01On477heTZ7jkxoZ4X92dobeGuEQop61cJ93Gaevd1of4mBr4hu2A== + dependencies: + "@algolia/client-common" "5.19.0" + "@algolia/requester-browser-xhr" "5.19.0" + "@algolia/requester-fetch" "5.19.0" + "@algolia/requester-node-http" "5.19.0" + +"@algolia/client-query-suggestions@5.19.0": + version "5.19.0" + resolved "https://registry.yarnpkg.com/@algolia/client-query-suggestions/-/client-query-suggestions-5.19.0.tgz#007d1b09818d6a225fbfdf93bbcb2edf8ab17da0" + integrity sha512-6fcP8d4S8XRDtVogrDvmSM6g5g6DndLc0pEm1GCKe9/ZkAzCmM3ZmW1wFYYPxdjMeifWy1vVEDMJK7sbE4W7MA== + dependencies: + "@algolia/client-common" "5.19.0" + "@algolia/requester-browser-xhr" "5.19.0" + "@algolia/requester-fetch" "5.19.0" + "@algolia/requester-node-http" "5.19.0" + +"@algolia/client-search@5.19.0": + version "5.19.0" + resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-5.19.0.tgz#04fc5d7e26d41c99144eb33eedb0ea6f9b1c0056" + integrity sha512-Ctg3xXD/1VtcwmkulR5+cKGOMj4r0wC49Y/KZdGQcqpydKn+e86F6l3tb3utLJQVq4lpEJud6kdRykFgcNsp8Q== + dependencies: + "@algolia/client-common" "5.19.0" + "@algolia/requester-browser-xhr" "5.19.0" + "@algolia/requester-fetch" "5.19.0" + "@algolia/requester-node-http" "5.19.0" -"@algolia/cache-common@4.24.0": - version "4.24.0" - resolved "https://registry.yarnpkg.com/@algolia/cache-common/-/cache-common-4.24.0.tgz#81a8d3a82ceb75302abb9b150a52eba9960c9744" - integrity sha512-emi+v+DmVLpMGhp0V9q9h5CdkURsNmFC+cOS6uK9ndeJm9J4TiqSvPYVu+THUP8P/S08rxf5x2P+p3CfID0Y4g== +"@algolia/events@^4.0.1": + version "4.0.1" + resolved "https://registry.yarnpkg.com/@algolia/events/-/events-4.0.1.tgz#fd39e7477e7bc703d7f893b556f676c032af3950" + integrity sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ== -"@algolia/cache-in-memory@4.24.0": - version "4.24.0" - resolved "https://registry.yarnpkg.com/@algolia/cache-in-memory/-/cache-in-memory-4.24.0.tgz#ffcf8872f3a10cb85c4f4641bdffd307933a6e44" - integrity sha512-gDrt2so19jW26jY3/MkFg5mEypFIPbPoXsQGQWAi6TrCPsNOSEYepBMPlucqWigsmEy/prp5ug2jy/N3PVG/8w== +"@algolia/ingestion@1.19.0": + version "1.19.0" + resolved "https://registry.yarnpkg.com/@algolia/ingestion/-/ingestion-1.19.0.tgz#b481bd2283866a1df18af9babba0ecb3f1d1d675" + integrity sha512-LO7w1MDV+ZLESwfPmXkp+KLeYeFrYEgtbCZG6buWjddhYraPQ9MuQWLhLLiaMlKxZ/sZvFTcZYuyI6Jx4WBhcg== dependencies: - "@algolia/cache-common" "4.24.0" + "@algolia/client-common" "5.19.0" + "@algolia/requester-browser-xhr" "5.19.0" + "@algolia/requester-fetch" "5.19.0" + "@algolia/requester-node-http" "5.19.0" -"@algolia/client-account@4.24.0": - version "4.24.0" - resolved "https://registry.yarnpkg.com/@algolia/client-account/-/client-account-4.24.0.tgz#eba7a921d828e7c8c40a32d4add21206c7fe12f1" - integrity sha512-adcvyJ3KjPZFDybxlqnf+5KgxJtBjwTPTeyG2aOyoJvx0Y8dUQAEOEVOJ/GBxX0WWNbmaSrhDURMhc+QeevDsA== +"@algolia/monitoring@1.19.0": + version "1.19.0" + resolved "https://registry.yarnpkg.com/@algolia/monitoring/-/monitoring-1.19.0.tgz#abc85ac073c25233c7f8dae3000cc0821d582514" + integrity sha512-Mg4uoS0aIKeTpu6iv6O0Hj81s8UHagi5TLm9k2mLIib4vmMtX7WgIAHAcFIaqIZp5D6s5EVy1BaDOoZ7buuJHA== dependencies: - "@algolia/client-common" "4.24.0" - "@algolia/client-search" "4.24.0" - "@algolia/transporter" "4.24.0" + "@algolia/client-common" "5.19.0" + "@algolia/requester-browser-xhr" "5.19.0" + "@algolia/requester-fetch" "5.19.0" + "@algolia/requester-node-http" "5.19.0" -"@algolia/client-analytics@4.24.0": - version "4.24.0" - resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-4.24.0.tgz#9d2576c46a9093a14e668833c505ea697a1a3e30" - integrity sha512-y8jOZt1OjwWU4N2qr8G4AxXAzaa8DBvyHTWlHzX/7Me1LX8OayfgHexqrsL4vSBcoMmVw2XnVW9MhL+Y2ZDJXg== +"@algolia/recommend@5.19.0": + version "5.19.0" + resolved "https://registry.yarnpkg.com/@algolia/recommend/-/recommend-5.19.0.tgz#5898219e9457853c563eb527f0d1cbfcb8998c87" + integrity sha512-PbgrMTbUPlmwfJsxjFhal4XqZO2kpBNRjemLVTkUiti4w/+kzcYO4Hg5zaBgVqPwvFDNQ8JS4SS3TBBem88u+g== dependencies: - "@algolia/client-common" "4.24.0" - "@algolia/client-search" "4.24.0" - "@algolia/requester-common" "4.24.0" - "@algolia/transporter" "4.24.0" + "@algolia/client-common" "5.19.0" + "@algolia/requester-browser-xhr" "5.19.0" + "@algolia/requester-fetch" "5.19.0" + "@algolia/requester-node-http" "5.19.0" -"@algolia/client-common@4.24.0": - version "4.24.0" - resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-4.24.0.tgz#77c46eee42b9444a1d1c1583a83f7df4398a649d" - integrity sha512-bc2ROsNL6w6rqpl5jj/UywlIYC21TwSSoFHKl01lYirGMW+9Eek6r02Tocg4gZ8HAw3iBvu6XQiM3BEbmEMoiA== +"@algolia/requester-browser-xhr@5.19.0": + version "5.19.0" + resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.19.0.tgz#979a340a81a381214c0dbdd235b51204098e3b4a" + integrity sha512-GfnhnQBT23mW/VMNs7m1qyEyZzhZz093aY2x8p0era96MMyNv8+FxGek5pjVX0b57tmSCZPf4EqNCpkGcGsmbw== dependencies: - "@algolia/requester-common" "4.24.0" - "@algolia/transporter" "4.24.0" + "@algolia/client-common" "5.19.0" -"@algolia/client-personalization@4.24.0": - version "4.24.0" - resolved "https://registry.yarnpkg.com/@algolia/client-personalization/-/client-personalization-4.24.0.tgz#8b47789fb1cb0f8efbea0f79295b7c5a3850f6ae" - integrity sha512-l5FRFm/yngztweU0HdUzz1rC4yoWCFo3IF+dVIVTfEPg906eZg5BOd1k0K6rZx5JzyyoP4LdmOikfkfGsKVE9w== +"@algolia/requester-fetch@5.19.0": + version "5.19.0" + resolved "https://registry.yarnpkg.com/@algolia/requester-fetch/-/requester-fetch-5.19.0.tgz#59fe52733a718fc23bde548b377b52baf7228993" + integrity sha512-oyTt8ZJ4T4fYvW5avAnuEc6Laedcme9fAFryMD9ndUTIUe/P0kn3BuGcCLFjN3FDmdrETHSFkgPPf1hGy3sLCw== dependencies: - "@algolia/client-common" "4.24.0" - "@algolia/requester-common" "4.24.0" - "@algolia/transporter" "4.24.0" + "@algolia/client-common" "5.19.0" -"@algolia/client-search@4.24.0": - version "4.24.0" - resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-4.24.0.tgz#75e6c02d33ef3e0f34afd9962c085b856fc4a55f" - integrity sha512-uRW6EpNapmLAD0mW47OXqTP8eiIx5F6qN9/x/7HHO6owL3N1IXqydGwW5nhDFBrV+ldouro2W1VX3XlcUXEFCA== +"@algolia/requester-node-http@5.19.0": + version "5.19.0" + resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-5.19.0.tgz#edbd58158d9dec774d608fbf2b2196d0ca4b257c" + integrity sha512-p6t8ue0XZNjcRiqNkb5QAM0qQRAKsCiebZ6n9JjWA+p8fWf8BvnhO55y2fO28g3GW0Imj7PrAuyBuxq8aDVQwQ== dependencies: - "@algolia/client-common" "4.24.0" - "@algolia/requester-common" "4.24.0" - "@algolia/transporter" "4.24.0" - -"@algolia/events@^4.0.1": - version "4.0.1" - resolved "https://registry.yarnpkg.com/@algolia/events/-/events-4.0.1.tgz#fd39e7477e7bc703d7f893b556f676c032af3950" - integrity sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ== - -"@algolia/logger-common@4.24.0": - version "4.24.0" - resolved "https://registry.yarnpkg.com/@algolia/logger-common/-/logger-common-4.24.0.tgz#28d439976019ec0a46ba7a1a739ef493d4ef8123" - integrity sha512-LLUNjkahj9KtKYrQhFKCzMx0BY3RnNP4FEtO+sBybCjJ73E8jNdaKJ/Dd8A/VA4imVHP5tADZ8pn5B8Ga/wTMA== - -"@algolia/logger-console@4.24.0": - version "4.24.0" - resolved "https://registry.yarnpkg.com/@algolia/logger-console/-/logger-console-4.24.0.tgz#c6ff486036cd90b81d07a95aaba04461da7e1c65" - integrity sha512-X4C8IoHgHfiUROfoRCV+lzSy+LHMgkoEEU1BbKcsfnV0i0S20zyy0NLww9dwVHUWNfPPxdMU+/wKmLGYf96yTg== - dependencies: - "@algolia/logger-common" "4.24.0" - -"@algolia/recommend@4.24.0": - version "4.24.0" - resolved "https://registry.yarnpkg.com/@algolia/recommend/-/recommend-4.24.0.tgz#8a3f78aea471ee0a4836b78fd2aad4e9abcaaf34" - integrity sha512-P9kcgerfVBpfYHDfVZDvvdJv0lEoCvzNlOy2nykyt5bK8TyieYyiD0lguIJdRZZYGre03WIAFf14pgE+V+IBlw== - dependencies: - "@algolia/cache-browser-local-storage" "4.24.0" - "@algolia/cache-common" "4.24.0" - "@algolia/cache-in-memory" "4.24.0" - "@algolia/client-common" "4.24.0" - "@algolia/client-search" "4.24.0" - "@algolia/logger-common" "4.24.0" - "@algolia/logger-console" "4.24.0" - "@algolia/requester-browser-xhr" "4.24.0" - "@algolia/requester-common" "4.24.0" - "@algolia/requester-node-http" "4.24.0" - "@algolia/transporter" "4.24.0" - -"@algolia/requester-browser-xhr@4.24.0": - version "4.24.0" - resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.24.0.tgz#313c5edab4ed73a052e75803855833b62dd19c16" - integrity sha512-Z2NxZMb6+nVXSjF13YpjYTdvV3032YTBSGm2vnYvYPA6mMxzM3v5rsCiSspndn9rzIW4Qp1lPHBvuoKJV6jnAA== - dependencies: - "@algolia/requester-common" "4.24.0" - -"@algolia/requester-common@4.24.0": - version "4.24.0" - resolved "https://registry.yarnpkg.com/@algolia/requester-common/-/requester-common-4.24.0.tgz#1c60c198031f48fcdb9e34c4057a3ea987b9a436" - integrity sha512-k3CXJ2OVnvgE3HMwcojpvY6d9kgKMPRxs/kVohrwF5WMr2fnqojnycZkxPoEg+bXm8fi5BBfFmOqgYztRtHsQA== - -"@algolia/requester-node-http@4.24.0": - version "4.24.0" - resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-4.24.0.tgz#4461593714031d02aa7da221c49df675212f482f" - integrity sha512-JF18yTjNOVYvU/L3UosRcvbPMGT9B+/GQWNWnenIImglzNVGpyzChkXLnrSf6uxwVNO6ESGu6oN8MqcGQcjQJw== - dependencies: - "@algolia/requester-common" "4.24.0" - -"@algolia/transporter@4.24.0": - version "4.24.0" - resolved "https://registry.yarnpkg.com/@algolia/transporter/-/transporter-4.24.0.tgz#226bb1f8af62430374c1972b2e5c8580ab275102" - integrity sha512-86nI7w6NzWxd1Zp9q3413dRshDqAzSbsQjhcDhPIatEFiZrL1/TjnHL8S7jVKFePlIMzDsZWXAXwXzcok9c5oA== - dependencies: - "@algolia/cache-common" "4.24.0" - "@algolia/logger-common" "4.24.0" - "@algolia/requester-common" "4.24.0" + "@algolia/client-common" "5.19.0" "@ampproject/remapping@^2.2.0": version "2.3.0" @@ -2391,25 +2386,25 @@ resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70" integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw== -"@docsearch/css@3.6.1": - version "3.6.1" - resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-3.6.1.tgz#f0a728ecb486c81f2d282650fc1820c914913408" - integrity sha512-VtVb5DS+0hRIprU2CO6ZQjK2Zg4QU5HrDM1+ix6rT0umsYvFvatMAnf97NHZlVWDaaLlx7GRfR/7FikANiM2Fg== +"@docsearch/css@3.8.2": + version "3.8.2" + resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-3.8.2.tgz#7973ceb6892c30f154ba254cd05c562257a44977" + integrity sha512-y05ayQFyUmCXze79+56v/4HpycYF3uFqB78pLPrSV5ZKAlDuIAAJNhaRi8tTdRNXh05yxX/TyNnzD6LwSM89vQ== -"@docsearch/react@^3.5.2": - version "3.6.1" - resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-3.6.1.tgz#0f826df08693293806d64277d6d9c38636211b97" - integrity sha512-qXZkEPvybVhSXj0K7U3bXc233tk5e8PfhoZ6MhPOiik/qUQxYC+Dn9DnoS7CxHQQhHfCvTiN0eY9M12oRghEXw== +"@docsearch/react@^3.8.1": + version "3.8.2" + resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-3.8.2.tgz#7b11d39b61c976c0aa9fbde66e6b73b30f3acd42" + integrity sha512-xCRrJQlTt8N9GU0DG4ptwHRkfnSnD/YpdeaXe02iKfqs97TkZJv60yE+1eq/tjPcVnTW8dP5qLP7itifFVV5eg== dependencies: - "@algolia/autocomplete-core" "1.9.3" - "@algolia/autocomplete-preset-algolia" "1.9.3" - "@docsearch/css" "3.6.1" - algoliasearch "^4.19.1" + "@algolia/autocomplete-core" "1.17.7" + "@algolia/autocomplete-preset-algolia" "1.17.7" + "@docsearch/css" "3.8.2" + algoliasearch "^5.14.2" -"@docusaurus/babel@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/babel/-/babel-3.6.2.tgz#c63dd2d9d7861189fe51950b3b6550477057bcee" - integrity sha512-v8N8TWGXDsb5sxQC3Rcqb1CZr0LlU1OgqqVBUchN6cpIUr7EJuVJs5eHcIu5Ag8mwO/hWN3f7FE9uaHTMapAbg== +"@docusaurus/babel@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/babel/-/babel-3.7.0.tgz#770dd5da525a9d6a2fee7d3212ec62040327f776" + integrity sha512-0H5uoJLm14S/oKV3Keihxvh8RV+vrid+6Gv+2qhuzbqHanawga8tYnsdpjEyt36ucJjqlby2/Md2ObWjA02UXQ== dependencies: "@babel/core" "^7.25.9" "@babel/generator" "^7.25.9" @@ -2421,23 +2416,23 @@ "@babel/runtime" "^7.25.9" "@babel/runtime-corejs3" "^7.25.9" "@babel/traverse" "^7.25.9" - "@docusaurus/logger" "3.6.2" - "@docusaurus/utils" "3.6.2" + "@docusaurus/logger" "3.7.0" + "@docusaurus/utils" "3.7.0" babel-plugin-dynamic-import-node "^2.3.3" fs-extra "^11.1.1" tslib "^2.6.0" -"@docusaurus/bundler@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/bundler/-/bundler-3.6.2.tgz#5bdd46862b40f1eea93f14714b858d07c2dd8c2f" - integrity sha512-YkEifEVs4lV931SrHBB4n6WqRowMw+aM/QPH3z8aU+5t1dWa+1p2OPqARS+tSbh3la9ns+L1zIfSbd8RHi2/PQ== +"@docusaurus/bundler@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/bundler/-/bundler-3.7.0.tgz#d8e7867b3b2c43a1e320ed429f8dfe873c38506d" + integrity sha512-CUUT9VlSGukrCU5ctZucykvgCISivct+cby28wJwCC/fkQFgAHRp/GKv2tx38ZmXb7nacrKzFTcp++f9txUYGg== dependencies: "@babel/core" "^7.25.9" - "@docusaurus/babel" "3.6.2" - "@docusaurus/cssnano-preset" "3.6.2" - "@docusaurus/logger" "3.6.2" - "@docusaurus/types" "3.6.2" - "@docusaurus/utils" "3.6.2" + "@docusaurus/babel" "3.7.0" + "@docusaurus/cssnano-preset" "3.7.0" + "@docusaurus/logger" "3.7.0" + "@docusaurus/types" "3.7.0" + "@docusaurus/utils" "3.7.0" babel-loader "^9.2.1" clean-css "^5.3.2" copy-webpack-plugin "^11.0.0" @@ -2532,18 +2527,18 @@ webpack-merge "^5.9.0" webpackbar "^5.0.2" -"@docusaurus/core@3.6.2", "@docusaurus/core@^3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/core/-/core-3.6.2.tgz#78628790f255555bb4c81e5952d16ea1412c4548" - integrity sha512-irMts/mGLZv8dWcy0WUtbY/U6b5qIfHgQd1/kXMyAxUJo99fL0wFSqhMI+tcxjk0HYy427MXerLMqFJj+Arg1w== - dependencies: - "@docusaurus/babel" "3.6.2" - "@docusaurus/bundler" "3.6.2" - "@docusaurus/logger" "3.6.2" - "@docusaurus/mdx-loader" "3.6.2" - "@docusaurus/utils" "3.6.2" - "@docusaurus/utils-common" "3.6.2" - "@docusaurus/utils-validation" "3.6.2" +"@docusaurus/core@3.7.0", "@docusaurus/core@^3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/core/-/core-3.7.0.tgz#e871586d099093723dfe6de81c1ce610aeb20292" + integrity sha512-b0fUmaL+JbzDIQaamzpAFpTviiaU4cX3Qz8cuo14+HGBCwa0evEK0UYCBFY3n4cLzL8Op1BueeroUD2LYAIHbQ== + dependencies: + "@docusaurus/babel" "3.7.0" + "@docusaurus/bundler" "3.7.0" + "@docusaurus/logger" "3.7.0" + "@docusaurus/mdx-loader" "3.7.0" + "@docusaurus/utils" "3.7.0" + "@docusaurus/utils-common" "3.7.0" + "@docusaurus/utils-validation" "3.7.0" boxen "^6.2.1" chalk "^4.1.2" chokidar "^3.5.3" @@ -2564,13 +2559,12 @@ p-map "^4.0.0" prompts "^2.4.2" react-dev-utils "^12.0.1" - react-helmet-async "^1.3.0" + react-helmet-async "npm:@slorber/react-helmet-async@1.3.0" react-loadable "npm:@docusaurus/react-loadable@6.0.0" react-loadable-ssr-addon-v5-slorber "^1.0.1" react-router "^5.3.4" react-router-config "^5.1.1" react-router-dom "^5.3.4" - rtl-detect "^1.0.4" semver "^7.5.4" serve-handler "^6.1.6" shelljs "^0.8.5" @@ -2591,10 +2585,10 @@ postcss-sort-media-queries "^5.2.0" tslib "^2.6.0" -"@docusaurus/cssnano-preset@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/cssnano-preset/-/cssnano-preset-3.6.2.tgz#007e7150b099ea2e9e874dd48a809614c628a335" - integrity sha512-mBkVa4QMHRwCFCVLYdBlOZuAT1iVVsS7GGSgliSVAeTOagP/AbtlBsCVrBs+keEuDuRF1w/6QEcqDoZe9fa5pw== +"@docusaurus/cssnano-preset@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/cssnano-preset/-/cssnano-preset-3.7.0.tgz#8fe8f2c3acbd32384b69e14983b9a63c98cae34e" + integrity sha512-X9GYgruZBSOozg4w4dzv9uOz8oK/EpPVQXkp0MM6Tsgp/nRIU9hJzJ0Pxg1aRa3xCeEQTOimZHcocQFlLwYajQ== dependencies: cssnano-preset-advanced "^6.1.2" postcss "^8.4.38" @@ -2609,10 +2603,10 @@ chalk "^4.1.2" tslib "^2.6.0" -"@docusaurus/logger@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/logger/-/logger-3.6.2.tgz#4f73f82b33e1d432f3940fc208b3c0646ca5549c" - integrity sha512-1p4IQhhgLyIfsey4UAdAIW69aUE1Ei6O91Nsw30ryZeDWSG5dh4o3zaRGOLxfAX69Ac/yDm6YCwJOafUxL6Vxg== +"@docusaurus/logger@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/logger/-/logger-3.7.0.tgz#07ecc2f460c4d2382df4991f9ce4e348e90af04c" + integrity sha512-z7g62X7bYxCYmeNNuO9jmzxLQG95q9QxINCwpboVcNff3SJiHJbGrarxxOVMVmAh1MsrSfxWkVGv4P41ktnFsA== dependencies: chalk "^4.1.2" tslib "^2.6.0" @@ -2647,14 +2641,14 @@ vfile "^6.0.1" webpack "^5.88.1" -"@docusaurus/mdx-loader@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/mdx-loader/-/mdx-loader-3.6.2.tgz#d240974b0e754d5a5d8eb3f9d0a00a2055fabc68" - integrity sha512-7fbRmNgF3CR96Ja82Ya0/Cdu1OL9UJ/22llNMY8lr5gAbw718Y5ryXMVRIYn0JNLTiSxzgtvW4DIsUWEB8NMpw== +"@docusaurus/mdx-loader@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/mdx-loader/-/mdx-loader-3.7.0.tgz#5890c6e7a5b68cb1d066264ac5290cdcd59d4ecc" + integrity sha512-OFBG6oMjZzc78/U3WNPSHs2W9ZJ723ewAcvVJaqS0VgyeUfmzUV8f1sv+iUHA0DtwiR5T5FjOxj6nzEE8LY6VA== dependencies: - "@docusaurus/logger" "3.6.2" - "@docusaurus/utils" "3.6.2" - "@docusaurus/utils-validation" "3.6.2" + "@docusaurus/logger" "3.7.0" + "@docusaurus/utils" "3.7.0" + "@docusaurus/utils-validation" "3.7.0" "@mdx-js/mdx" "^3.0.0" "@slorber/remark-comment" "^1.0.0" escape-html "^1.0.3" @@ -2690,32 +2684,32 @@ react-helmet-async "*" react-loadable "npm:@docusaurus/react-loadable@6.0.0" -"@docusaurus/module-type-aliases@3.6.2", "@docusaurus/module-type-aliases@^3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/module-type-aliases/-/module-type-aliases-3.6.2.tgz#7432618696668acc9a7cfb47de66c6987cd57680" - integrity sha512-NrJkL2rLTCjHtWOqUvWzwqvJrsKLj0gVJeV6q5yeKdKKgItietcTf2fTRkM9LHKSUN8CBDXxwHABeQvTahvmXQ== +"@docusaurus/module-type-aliases@3.7.0", "@docusaurus/module-type-aliases@^3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/module-type-aliases/-/module-type-aliases-3.7.0.tgz#15c0745b829c6966c5b3b2c2527c72b54830b0e5" + integrity sha512-g7WdPqDNaqA60CmBrr0cORTrsOit77hbsTj7xE2l71YhBn79sxdm7WMK7wfhcaafkbpIh7jv5ef5TOpf1Xv9Lg== dependencies: - "@docusaurus/types" "3.6.2" + "@docusaurus/types" "3.7.0" "@types/history" "^4.7.11" "@types/react" "*" "@types/react-router-config" "*" "@types/react-router-dom" "*" - react-helmet-async "*" + react-helmet-async "npm:@slorber/react-helmet-async@*" react-loadable "npm:@docusaurus/react-loadable@6.0.0" -"@docusaurus/plugin-content-blog@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-blog/-/plugin-content-blog-3.6.2.tgz#b197dd920e380bf1394995215ba7fee8019baa82" - integrity sha512-6bJxr6Or4NslEVH3BJuPH30kUWiqUjDRdGPhvxpHmt9W/RY2/6u72WICG3bW3dLFxJ/2uDLBU92lHnatpvo7Ew== - dependencies: - "@docusaurus/core" "3.6.2" - "@docusaurus/logger" "3.6.2" - "@docusaurus/mdx-loader" "3.6.2" - "@docusaurus/theme-common" "3.6.2" - "@docusaurus/types" "3.6.2" - "@docusaurus/utils" "3.6.2" - "@docusaurus/utils-common" "3.6.2" - "@docusaurus/utils-validation" "3.6.2" +"@docusaurus/plugin-content-blog@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-blog/-/plugin-content-blog-3.7.0.tgz#7bd69de87a1f3adb652e1473ef5b7ccc9468f47e" + integrity sha512-EFLgEz6tGHYWdPU0rK8tSscZwx+AsyuBW/r+tNig2kbccHYGUJmZtYN38GjAa3Fda4NU+6wqUO5kTXQSRBQD3g== + dependencies: + "@docusaurus/core" "3.7.0" + "@docusaurus/logger" "3.7.0" + "@docusaurus/mdx-loader" "3.7.0" + "@docusaurus/theme-common" "3.7.0" + "@docusaurus/types" "3.7.0" + "@docusaurus/utils" "3.7.0" + "@docusaurus/utils-common" "3.7.0" + "@docusaurus/utils-validation" "3.7.0" cheerio "1.0.0-rc.12" feed "^4.2.2" fs-extra "^11.1.1" @@ -2727,20 +2721,20 @@ utility-types "^3.10.0" webpack "^5.88.1" -"@docusaurus/plugin-content-docs@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.6.2.tgz#3a8b4b162a2688e5855c04ed6c4ec0b6951619a0" - integrity sha512-e6WW1g10RIXXLN/rrtqTi/FyJ1Hj3X9Mmgz4V11/0pDCxIGGI8m4ocbAglUlLtgvbLD5viNLefl/NwbOW3JXiQ== - dependencies: - "@docusaurus/core" "3.6.2" - "@docusaurus/logger" "3.6.2" - "@docusaurus/mdx-loader" "3.6.2" - "@docusaurus/module-type-aliases" "3.6.2" - "@docusaurus/theme-common" "3.6.2" - "@docusaurus/types" "3.6.2" - "@docusaurus/utils" "3.6.2" - "@docusaurus/utils-common" "3.6.2" - "@docusaurus/utils-validation" "3.6.2" +"@docusaurus/plugin-content-docs@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.7.0.tgz#297a549e926ee2b1147b5242af6f21532c7b107c" + integrity sha512-GXg5V7kC9FZE4FkUZA8oo/NrlRb06UwuICzI6tcbzj0+TVgjq/mpUXXzSgKzMS82YByi4dY2Q808njcBCyy6tQ== + dependencies: + "@docusaurus/core" "3.7.0" + "@docusaurus/logger" "3.7.0" + "@docusaurus/mdx-loader" "3.7.0" + "@docusaurus/module-type-aliases" "3.7.0" + "@docusaurus/theme-common" "3.7.0" + "@docusaurus/types" "3.7.0" + "@docusaurus/utils" "3.7.0" + "@docusaurus/utils-common" "3.7.0" + "@docusaurus/utils-validation" "3.7.0" "@types/react-router-config" "^5.0.7" combine-promises "^1.1.0" fs-extra "^11.1.1" @@ -2773,115 +2767,130 @@ utility-types "^3.10.0" webpack "^5.88.1" -"@docusaurus/plugin-content-pages@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-pages/-/plugin-content-pages-3.6.2.tgz#49b1a033d41841f7a8bcbbe67511609b402cc80f" - integrity sha512-fo4NyGkw10lYHyHaTxE6TZLYnxNtCfRHeZkNK1N9pBYqe7TT2dBUNAEeVW2U3ed9m6YuB7JKSQsa++GGmcP+6g== - dependencies: - "@docusaurus/core" "3.6.2" - "@docusaurus/mdx-loader" "3.6.2" - "@docusaurus/types" "3.6.2" - "@docusaurus/utils" "3.6.2" - "@docusaurus/utils-validation" "3.6.2" +"@docusaurus/plugin-content-pages@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-pages/-/plugin-content-pages-3.7.0.tgz#c4a8f7237872236aacb77665822c474c0a00e91a" + integrity sha512-YJSU3tjIJf032/Aeao8SZjFOrXJbz/FACMveSMjLyMH4itQyZ2XgUIzt4y+1ISvvk5zrW4DABVT2awTCqBkx0Q== + dependencies: + "@docusaurus/core" "3.7.0" + "@docusaurus/mdx-loader" "3.7.0" + "@docusaurus/types" "3.7.0" + "@docusaurus/utils" "3.7.0" + "@docusaurus/utils-validation" "3.7.0" fs-extra "^11.1.1" tslib "^2.6.0" webpack "^5.88.1" -"@docusaurus/plugin-debug@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-debug/-/plugin-debug-3.6.2.tgz#6983f64954fe69a51b65b2d9431bdf0b5ccf1884" - integrity sha512-T/eS3VvHElpeV5S8uwp7Si4ujEynmgFtJLvA2CSa5pzQuOF1EEghF9nekAIj0cWtDHsqNUDZNr8hK1brivFXSg== +"@docusaurus/plugin-debug@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-debug/-/plugin-debug-3.7.0.tgz#a4fd45132e40cffe96bb51f48e89982a1cb8e194" + integrity sha512-Qgg+IjG/z4svtbCNyTocjIwvNTNEwgRjSXXSJkKVG0oWoH0eX/HAPiu+TS1HBwRPQV+tTYPWLrUypYFepfujZA== dependencies: - "@docusaurus/core" "3.6.2" - "@docusaurus/types" "3.6.2" - "@docusaurus/utils" "3.6.2" + "@docusaurus/core" "3.7.0" + "@docusaurus/types" "3.7.0" + "@docusaurus/utils" "3.7.0" fs-extra "^11.1.1" react-json-view-lite "^1.2.0" tslib "^2.6.0" -"@docusaurus/plugin-google-analytics@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-3.6.2.tgz#4266b4b2273998e87fa733d932d5b464c2a10b21" - integrity sha512-B7ihrr3wz8e4XqW+dIAtq844u3Z83u5CeiL1xrCqzFH+vDCjUZHTamS3zKXNcgi6YVVe6hUQXPG15ltaqQaVPQ== +"@docusaurus/plugin-google-analytics@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-3.7.0.tgz#d20f665e810fb2295d1c1bbfe13398c5ff42eb24" + integrity sha512-otIqiRV/jka6Snjf+AqB360XCeSv7lQC+DKYW+EUZf6XbuE8utz5PeUQ8VuOcD8Bk5zvT1MC4JKcd5zPfDuMWA== dependencies: - "@docusaurus/core" "3.6.2" - "@docusaurus/types" "3.6.2" - "@docusaurus/utils-validation" "3.6.2" + "@docusaurus/core" "3.7.0" + "@docusaurus/types" "3.7.0" + "@docusaurus/utils-validation" "3.7.0" tslib "^2.6.0" -"@docusaurus/plugin-google-gtag@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-3.6.2.tgz#23f70f7a05e61cfb9d9d7ee18dbff3ef2b129f2c" - integrity sha512-V8ijI6qddAAkJ0vd8sjZ7S/apRTLJn9dAwvj/rSMd93witGdKINemL+9TyfLkhcXKTxyqRT8zKdu8ewjPXqKHg== +"@docusaurus/plugin-google-gtag@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-3.7.0.tgz#a48638dfd132858060458b875a440b6cbda6bf8f" + integrity sha512-M3vrMct1tY65ModbyeDaMoA+fNJTSPe5qmchhAbtqhDD/iALri0g9LrEpIOwNaoLmm6lO88sfBUADQrSRSGSWA== dependencies: - "@docusaurus/core" "3.6.2" - "@docusaurus/types" "3.6.2" - "@docusaurus/utils-validation" "3.6.2" + "@docusaurus/core" "3.7.0" + "@docusaurus/types" "3.7.0" + "@docusaurus/utils-validation" "3.7.0" "@types/gtag.js" "^0.0.12" tslib "^2.6.0" -"@docusaurus/plugin-google-tag-manager@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-3.6.2.tgz#36ab95fcd5c1bf96fd18c0cf9b208bb428b81242" - integrity sha512-fnWQ5FdN9f8c8VTgjaQ98208Y+d/JjHhD506rWIIL9rt1cJOf29XElxvOeKpMJadfkgY5KLZSAiHkGt+4qgN4g== +"@docusaurus/plugin-google-tag-manager@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-3.7.0.tgz#0a4390f4b0e760d073bdb1905436bfa7bd71356b" + integrity sha512-X8U78nb8eiMiPNg3jb9zDIVuuo/rE1LjGDGu+5m5CX4UBZzjMy+klOY2fNya6x8ACyE/L3K2erO1ErheP55W/w== dependencies: - "@docusaurus/core" "3.6.2" - "@docusaurus/types" "3.6.2" - "@docusaurus/utils-validation" "3.6.2" + "@docusaurus/core" "3.7.0" + "@docusaurus/types" "3.7.0" + "@docusaurus/utils-validation" "3.7.0" tslib "^2.6.0" -"@docusaurus/plugin-sitemap@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-sitemap/-/plugin-sitemap-3.6.2.tgz#c8ff7cf82bd5d943a13bb8d0ae690080a025029e" - integrity sha512-qcAQAP1Ot0dZpeRoJ0L/Zck5FVDkll2IleVZQLzxeRVDZIw1P9/TK7/Aw1w2pmH7dmw/Cwk/cLSVRvLAmp9k7A== - dependencies: - "@docusaurus/core" "3.6.2" - "@docusaurus/logger" "3.6.2" - "@docusaurus/types" "3.6.2" - "@docusaurus/utils" "3.6.2" - "@docusaurus/utils-common" "3.6.2" - "@docusaurus/utils-validation" "3.6.2" +"@docusaurus/plugin-sitemap@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-sitemap/-/plugin-sitemap-3.7.0.tgz#2c1bf9de26aeda455df6f77748e5887ace39b2d7" + integrity sha512-bTRT9YLZ/8I/wYWKMQke18+PF9MV8Qub34Sku6aw/vlZ/U+kuEuRpQ8bTcNOjaTSfYsWkK4tTwDMHK2p5S86cA== + dependencies: + "@docusaurus/core" "3.7.0" + "@docusaurus/logger" "3.7.0" + "@docusaurus/types" "3.7.0" + "@docusaurus/utils" "3.7.0" + "@docusaurus/utils-common" "3.7.0" + "@docusaurus/utils-validation" "3.7.0" fs-extra "^11.1.1" sitemap "^7.1.1" tslib "^2.6.0" -"@docusaurus/preset-classic@^3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/preset-classic/-/preset-classic-3.6.2.tgz#5ec801fa317123ba8458af3105eca8eac78a49bc" - integrity sha512-r2n5eHdhiNSrJGsrrYcw+WsyStmXxe0ZG3RdA9LVyK5+jBHM8blrUWJEDugnzCNbyhUzhdtcmgCC9fhdAvKuQw== - dependencies: - "@docusaurus/core" "3.6.2" - "@docusaurus/plugin-content-blog" "3.6.2" - "@docusaurus/plugin-content-docs" "3.6.2" - "@docusaurus/plugin-content-pages" "3.6.2" - "@docusaurus/plugin-debug" "3.6.2" - "@docusaurus/plugin-google-analytics" "3.6.2" - "@docusaurus/plugin-google-gtag" "3.6.2" - "@docusaurus/plugin-google-tag-manager" "3.6.2" - "@docusaurus/plugin-sitemap" "3.6.2" - "@docusaurus/theme-classic" "3.6.2" - "@docusaurus/theme-common" "3.6.2" - "@docusaurus/theme-search-algolia" "3.6.2" - "@docusaurus/types" "3.6.2" - -"@docusaurus/theme-classic@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/theme-classic/-/theme-classic-3.6.2.tgz#4c2770d3609176dd2462dfb0cb4d0b3d3010404b" - integrity sha512-bCdOPqPNezhLx+hgNVO2Cf+8/1AHa9uHDOqTx/CKAx2I0J/jV9G+6JiMtpSRKGNfBoLT1O+56/7+WtkOf54xTw== - dependencies: - "@docusaurus/core" "3.6.2" - "@docusaurus/logger" "3.6.2" - "@docusaurus/mdx-loader" "3.6.2" - "@docusaurus/module-type-aliases" "3.6.2" - "@docusaurus/plugin-content-blog" "3.6.2" - "@docusaurus/plugin-content-docs" "3.6.2" - "@docusaurus/plugin-content-pages" "3.6.2" - "@docusaurus/theme-common" "3.6.2" - "@docusaurus/theme-translations" "3.6.2" - "@docusaurus/types" "3.6.2" - "@docusaurus/utils" "3.6.2" - "@docusaurus/utils-common" "3.6.2" - "@docusaurus/utils-validation" "3.6.2" +"@docusaurus/plugin-svgr@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-svgr/-/plugin-svgr-3.7.0.tgz#018e89efd615d5fde77b891a8c2aadf203013f5d" + integrity sha512-HByXIZTbc4GV5VAUkZ2DXtXv1Qdlnpk3IpuImwSnEzCDBkUMYcec5282hPjn6skZqB25M1TYCmWS91UbhBGxQg== + dependencies: + "@docusaurus/core" "3.7.0" + "@docusaurus/types" "3.7.0" + "@docusaurus/utils" "3.7.0" + "@docusaurus/utils-validation" "3.7.0" + "@svgr/core" "8.1.0" + "@svgr/webpack" "^8.1.0" + tslib "^2.6.0" + webpack "^5.88.1" + +"@docusaurus/preset-classic@^3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/preset-classic/-/preset-classic-3.7.0.tgz#f6656a04ae6a4877523dbd04f7c491632e4003b9" + integrity sha512-nPHj8AxDLAaQXs+O6+BwILFuhiWbjfQWrdw2tifOClQoNfuXDjfjogee6zfx6NGHWqshR23LrcN115DmkHC91Q== + dependencies: + "@docusaurus/core" "3.7.0" + "@docusaurus/plugin-content-blog" "3.7.0" + "@docusaurus/plugin-content-docs" "3.7.0" + "@docusaurus/plugin-content-pages" "3.7.0" + "@docusaurus/plugin-debug" "3.7.0" + "@docusaurus/plugin-google-analytics" "3.7.0" + "@docusaurus/plugin-google-gtag" "3.7.0" + "@docusaurus/plugin-google-tag-manager" "3.7.0" + "@docusaurus/plugin-sitemap" "3.7.0" + "@docusaurus/plugin-svgr" "3.7.0" + "@docusaurus/theme-classic" "3.7.0" + "@docusaurus/theme-common" "3.7.0" + "@docusaurus/theme-search-algolia" "3.7.0" + "@docusaurus/types" "3.7.0" + +"@docusaurus/theme-classic@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/theme-classic/-/theme-classic-3.7.0.tgz#b483bd8e2923b6994b5f47238884b9f8984222c5" + integrity sha512-MnLxG39WcvLCl4eUzHr0gNcpHQfWoGqzADCly54aqCofQX6UozOS9Th4RK3ARbM9m7zIRv3qbhggI53dQtx/hQ== + dependencies: + "@docusaurus/core" "3.7.0" + "@docusaurus/logger" "3.7.0" + "@docusaurus/mdx-loader" "3.7.0" + "@docusaurus/module-type-aliases" "3.7.0" + "@docusaurus/plugin-content-blog" "3.7.0" + "@docusaurus/plugin-content-docs" "3.7.0" + "@docusaurus/plugin-content-pages" "3.7.0" + "@docusaurus/theme-common" "3.7.0" + "@docusaurus/theme-translations" "3.7.0" + "@docusaurus/types" "3.7.0" + "@docusaurus/utils" "3.7.0" + "@docusaurus/utils-common" "3.7.0" + "@docusaurus/utils-validation" "3.7.0" "@mdx-js/react" "^3.0.0" clsx "^2.0.0" copy-text-to-clipboard "^3.2.0" @@ -2914,15 +2923,15 @@ tslib "^2.6.0" utility-types "^3.10.0" -"@docusaurus/theme-common@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/theme-common/-/theme-common-3.6.2.tgz#a520d9053b6ea0fa913d42898d35f73ed5ca3b9b" - integrity sha512-lfgsL064KEHpCkgGUc0OYoUPCpYfzggp6Hof8sz59UuKiLvb/Z7raewE9/NfocrJ2HZI17rLgMX3SQlRDh/5gg== +"@docusaurus/theme-common@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/theme-common/-/theme-common-3.7.0.tgz#18bf5c6b149a701f4bd865715ee8b595aa40b354" + integrity sha512-8eJ5X0y+gWDsURZnBfH0WabdNm8XMCXHv8ENy/3Z/oQKwaB/EHt5lP9VsTDTf36lKEp0V6DjzjFyFIB+CetL0A== dependencies: - "@docusaurus/mdx-loader" "3.6.2" - "@docusaurus/module-type-aliases" "3.6.2" - "@docusaurus/utils" "3.6.2" - "@docusaurus/utils-common" "3.6.2" + "@docusaurus/mdx-loader" "3.7.0" + "@docusaurus/module-type-aliases" "3.7.0" + "@docusaurus/utils" "3.7.0" + "@docusaurus/utils-common" "3.7.0" "@types/history" "^4.7.11" "@types/react" "*" "@types/react-router-config" "*" @@ -2932,21 +2941,21 @@ tslib "^2.6.0" utility-types "^3.10.0" -"@docusaurus/theme-search-algolia@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.6.2.tgz#b03b7d35a385004d089d000be764abdfb3fa5721" - integrity sha512-SFLS+Rq8Cg2yepnHucA9sRpIR97yHvZWlCgMzBLunV3KHbB6hD2h5HPhFV39wYHYCjJUAOH1lX9poJ1qKYuSvg== - dependencies: - "@docsearch/react" "^3.5.2" - "@docusaurus/core" "3.6.2" - "@docusaurus/logger" "3.6.2" - "@docusaurus/plugin-content-docs" "3.6.2" - "@docusaurus/theme-common" "3.6.2" - "@docusaurus/theme-translations" "3.6.2" - "@docusaurus/utils" "3.6.2" - "@docusaurus/utils-validation" "3.6.2" - algoliasearch "^4.18.0" - algoliasearch-helper "^3.13.3" +"@docusaurus/theme-search-algolia@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.7.0.tgz#2108ddf0b300b82de7c2b9ff9fcf62121b66ea37" + integrity sha512-Al/j5OdzwRU1m3falm+sYy9AaB93S1XF1Lgk9Yc6amp80dNxJVplQdQTR4cYdzkGtuQqbzUA8+kaoYYO0RbK6g== + dependencies: + "@docsearch/react" "^3.8.1" + "@docusaurus/core" "3.7.0" + "@docusaurus/logger" "3.7.0" + "@docusaurus/plugin-content-docs" "3.7.0" + "@docusaurus/theme-common" "3.7.0" + "@docusaurus/theme-translations" "3.7.0" + "@docusaurus/utils" "3.7.0" + "@docusaurus/utils-validation" "3.7.0" + algoliasearch "^5.17.1" + algoliasearch-helper "^3.22.6" clsx "^2.0.0" eta "^2.2.0" fs-extra "^11.1.1" @@ -2954,10 +2963,10 @@ tslib "^2.6.0" utility-types "^3.10.0" -"@docusaurus/theme-translations@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/theme-translations/-/theme-translations-3.6.2.tgz#ff6d2588aa9bf9fb1e07465def067529d5668665" - integrity sha512-LIWrYoDUsOTKmb0c7IQzawiPUTAaczBs5IOx6srxOWoTHVUMLzJCkl5Y6whfuRrnul8G05qv2vk238bN5Ko62g== +"@docusaurus/theme-translations@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/theme-translations/-/theme-translations-3.7.0.tgz#0891aedc7c7040afcb3a1b34051d3a69096d0d25" + integrity sha512-Ewq3bEraWDmienM6eaNK7fx+/lHMtGDHQyd1O+4+3EsDxxUmrzPkV7Ct3nBWTuE0MsoZr3yNwQVKjllzCMuU3g== dependencies: fs-extra "^11.1.1" tslib "^2.6.0" @@ -2985,17 +2994,17 @@ webpack "^5.88.1" webpack-merge "^5.9.0" -"@docusaurus/types@3.6.2", "@docusaurus/types@^3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-3.6.2.tgz#bd69c4c99b535b67f01276dc186622e0b1fc1305" - integrity sha512-117Wsk6xXrWEAsCYCXS3TGJv5tkdIZDcd7T/V0UJvKYmY0gyVPPcEQChy8yTdjbIkbB2q4fa7Jpox72Qv86mqQ== +"@docusaurus/types@3.7.0", "@docusaurus/types@^3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-3.7.0.tgz#3f5a68a60f80ecdcb085666da1d68f019afda943" + integrity sha512-kOmZg5RRqJfH31m+6ZpnwVbkqMJrPOG5t0IOl4i/+3ruXyNfWzZ0lVtVrD0u4ONc/0NOsS9sWYaxxWNkH1LdLQ== dependencies: "@mdx-js/mdx" "^3.0.0" "@types/history" "^4.7.11" "@types/react" "*" commander "^5.1.0" joi "^17.9.2" - react-helmet-async "^1.3.0" + react-helmet-async "npm:@slorber/react-helmet-async@1.3.0" utility-types "^3.10.0" webpack "^5.95.0" webpack-merge "^5.9.0" @@ -3007,12 +3016,12 @@ dependencies: tslib "^2.6.0" -"@docusaurus/utils-common@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/utils-common/-/utils-common-3.6.2.tgz#3367572d72090b7f17e721af7f020f8e39931662" - integrity sha512-dr5wK+OyU2QAWxG7S5siD2bPgS7+ZeqWHfgLNHZ5yalaZf8TbeNNLqydfngukAY56BGZN0NbMkX6jGIr7ZF0sA== +"@docusaurus/utils-common@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/utils-common/-/utils-common-3.7.0.tgz#1bef52837d321db5dd2361fc07f3416193b5d029" + integrity sha512-IZeyIfCfXy0Mevj6bWNg7DG7B8G+S6o6JVpddikZtWyxJguiQ7JYr0SIZ0qWd8pGNuMyVwriWmbWqMnK7Y5PwA== dependencies: - "@docusaurus/types" "3.6.2" + "@docusaurus/types" "3.7.0" tslib "^2.6.0" "@docusaurus/utils-validation@3.5.2", "@docusaurus/utils-validation@^2 || ^3": @@ -3029,14 +3038,14 @@ lodash "^4.17.21" tslib "^2.6.0" -"@docusaurus/utils-validation@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/utils-validation/-/utils-validation-3.6.2.tgz#62b97a0d72694c85fa63928c494dd238a84c991f" - integrity sha512-Y3EwblDz72KOcobb5t2zlhHSmrfE8EaHusPJ96Kx2JYtNXL2omqCoOb6FpaXWhES75wvjUpkFLYfiNqAqEov8g== +"@docusaurus/utils-validation@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/utils-validation/-/utils-validation-3.7.0.tgz#dc0786fb633ae5cef8e93337bf21c2a826c7ecbd" + integrity sha512-w8eiKk8mRdN+bNfeZqC4nyFoxNyI1/VExMKAzD9tqpJfLLbsa46Wfn5wcKH761g9WkKh36RtFV49iL9lh1DYBA== dependencies: - "@docusaurus/logger" "3.6.2" - "@docusaurus/utils" "3.6.2" - "@docusaurus/utils-common" "3.6.2" + "@docusaurus/logger" "3.7.0" + "@docusaurus/utils" "3.7.0" + "@docusaurus/utils-common" "3.7.0" fs-extra "^11.2.0" joi "^17.9.2" js-yaml "^4.1.0" @@ -3069,15 +3078,14 @@ utility-types "^3.10.0" webpack "^5.88.1" -"@docusaurus/utils@3.6.2": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@docusaurus/utils/-/utils-3.6.2.tgz#727299c2051eee04c1b431bc6ccd55fd4e5a0d52" - integrity sha512-oxnpUcFZGE3uPCDoXr8GJriB3VWM9sFjPedFidX3Fsz87l1NZNc1wtbKPfQ7GYFDMYo2IGlAv5+47Me9RkM6lg== +"@docusaurus/utils@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@docusaurus/utils/-/utils-3.7.0.tgz#dfdebd63524c52b498f36b2907a3b2261930b9bb" + integrity sha512-e7zcB6TPnVzyUaHMJyLSArKa2AG3h9+4CfvKXKKWNx6hRs+p0a+u7HHTJBgo6KW2m+vqDnuIHK4X+bhmoghAFA== dependencies: - "@docusaurus/logger" "3.6.2" - "@docusaurus/types" "3.6.2" - "@docusaurus/utils-common" "3.6.2" - "@svgr/webpack" "^8.1.0" + "@docusaurus/logger" "3.7.0" + "@docusaurus/types" "3.7.0" + "@docusaurus/utils-common" "3.7.0" escape-string-regexp "^4.0.0" file-loader "^6.2.0" fs-extra "^11.1.1" @@ -4237,33 +4245,31 @@ ajv@^8.0.0, ajv@^8.9.0: json-schema-traverse "^1.0.0" require-from-string "^2.0.2" -algoliasearch-helper@^3.13.3: - version "3.22.4" - resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.22.4.tgz#a9de9b69a79528c65d0149978c0d5bece7240484" - integrity sha512-fvBCywguW9f+939S6awvRMstqMF1XXcd2qs1r1aGqL/PJ1go/DqN06tWmDVmhCDqBJanm++imletrQWf0G2S1g== +algoliasearch-helper@^3.22.6: + version "3.23.0" + resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.23.0.tgz#638e766bf6be2308b8dcda3282e47aff66438712" + integrity sha512-8CK4Gb/ju4OesAYcS+mjBpNiVA7ILWpg7D2vhBZohh0YkG8QT1KZ9LG+8+EntQBUGoKtPy06OFhiwP4f5zzAQg== dependencies: "@algolia/events" "^4.0.1" -algoliasearch@^4.18.0, algoliasearch@^4.19.1: - version "4.24.0" - resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.24.0.tgz#b953b3e2309ef8f25da9de311b95b994ac918275" - integrity sha512-bf0QV/9jVejssFBmz2HQLxUadxk574t4iwjCKp5E7NBzwKkrDEhKPISIIjAU/p6K5qDx3qoeh4+26zWN1jmw3g== - dependencies: - "@algolia/cache-browser-local-storage" "4.24.0" - "@algolia/cache-common" "4.24.0" - "@algolia/cache-in-memory" "4.24.0" - "@algolia/client-account" "4.24.0" - "@algolia/client-analytics" "4.24.0" - "@algolia/client-common" "4.24.0" - "@algolia/client-personalization" "4.24.0" - "@algolia/client-search" "4.24.0" - "@algolia/logger-common" "4.24.0" - "@algolia/logger-console" "4.24.0" - "@algolia/recommend" "4.24.0" - "@algolia/requester-browser-xhr" "4.24.0" - "@algolia/requester-common" "4.24.0" - "@algolia/requester-node-http" "4.24.0" - "@algolia/transporter" "4.24.0" +algoliasearch@^5.14.2, algoliasearch@^5.17.1: + version "5.19.0" + resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-5.19.0.tgz#2a1490bb46a937515797fac30b2d1503fb028536" + integrity sha512-zrLtGhC63z3sVLDDKGW+SlCRN9eJHFTgdEmoAOpsVh6wgGL1GgTTDou7tpCBjevzgIvi3AIyDAQO3Xjbg5eqZg== + dependencies: + "@algolia/client-abtesting" "5.19.0" + "@algolia/client-analytics" "5.19.0" + "@algolia/client-common" "5.19.0" + "@algolia/client-insights" "5.19.0" + "@algolia/client-personalization" "5.19.0" + "@algolia/client-query-suggestions" "5.19.0" + "@algolia/client-search" "5.19.0" + "@algolia/ingestion" "1.19.0" + "@algolia/monitoring" "1.19.0" + "@algolia/recommend" "5.19.0" + "@algolia/requester-browser-xhr" "5.19.0" + "@algolia/requester-fetch" "5.19.0" + "@algolia/requester-node-http" "5.19.0" ansi-align@^3.0.1: version "3.0.1" @@ -9605,6 +9611,17 @@ react-helmet-async@^1.3.0: react-fast-compare "^3.2.0" shallowequal "^1.1.0" +"react-helmet-async@npm:@slorber/react-helmet-async@*", "react-helmet-async@npm:@slorber/react-helmet-async@1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@slorber/react-helmet-async/-/react-helmet-async-1.3.0.tgz#11fbc6094605cf60aa04a28c17e0aab894b4ecff" + integrity sha512-e9/OK8VhwUSc67diWI8Rb3I0YgI9/SBQtnhe9aEuK6MhZm7ntZZimXgwXnd8W96YTmSOb9M4d8LwhRZyhWr/1A== + dependencies: + "@babel/runtime" "^7.12.5" + invariant "^2.2.4" + prop-types "^15.7.2" + react-fast-compare "^3.2.0" + shallowequal "^1.1.0" + react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" From 0d5873e5a4381cf5993765b191157bd935bce084 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Tue, 28 Jan 2025 16:57:05 +0300 Subject: [PATCH 05/53] [update] tableShape, localization, styling updated --- docs/api/config/tableshape-property.md | 9 ++++- docs/guides/localization.md | 2 +- docs/guides/stylization.md | 47 ++++++++++++++++++++++++++ 3 files changed, 56 insertions(+), 2 deletions(-) diff --git a/docs/api/config/tableshape-property.md b/docs/api/config/tableshape-property.md index a945ecb..67776e3 100644 --- a/docs/api/config/tableshape-property.md +++ b/docs/api/config/tableshape-property.md @@ -37,7 +37,8 @@ tableShape?: { cleanRows?: boolean, split?: { left?: boolean - } + }, + cellStyle?: (field: string, value: any, area: string, method?: string) => string, }; ~~~ @@ -53,6 +54,12 @@ tableShape?: { - `headerHeight` - (optional) the header height in pixels; the default value is 30 - `footerHeight` - (optional) the footer height in pixels; the default value is 30 - `colWidth` - (optional) the column width in pixels; the default value is 150 +- `cellStyle` - (optional) the function that applies a custom style to a cell; the function has the next parameters: + - `field` - (required) a string representing the field name for which the style is applied + - `value` - (required) the value of the cell (the actual data for that particular row and column) + - `area` - (required) a string indicating the area of the table where a cell resides ("rows", "columns" or "values" area) + - `method` - (optional) a string that can represent the operation performed on a cell (e.g., "sum", "count", etc.). + The `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell. - `tree` - (optional) if set to **true**, enables the tree mode when data can be presented with expandable rows; the default value is **false**; more information with examples see here [Switching to the tree mode](/guides/configuration/#enabling-the-tree-mode) - `totalColumn` - (optional) enables generating the total column with total values for rows. The default value is **false**; - `totalRow` - (optional) enables generating the footer with total values (if set to **true**) the default value is **false** diff --git a/docs/guides/localization.md b/docs/guides/localization.md index 387d168..88100e5 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -238,7 +238,7 @@ In case you need to set format to a specific field, use the template parameter o ## Date and time format specification -Pivot uses the following characters for setting the date format: +Pivot uses the following characters for setting the date and time format: | Character | Definition |Example | | :-------- | :------------------------------------------------ |:------------------------| diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index 9539b05..ca1a1df 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -100,6 +100,45 @@ You can also apply a custom style to the scroll bar of Pivot. For this, you can ## Cell style +To apply a CSS class to a cell, use the `cellStyle` parameter of the [`tableShape`](/api/properties/tableshape-property) property. The `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell. In the example provided, if the `method` contains "count", it will return the string "count", which is associated with a CSS class *.count* that has the font-weight of 600. In the example we also apply number formatters: +- `numOptions` ensures that numbers are displayed with exactly two decimal places, regardless of their value +- `new Intl.NumberFormat("en-US", numOptions)` creates a number formatter for the US locale ("en-US") using the options defined in `numOptions`. It also creates another number formatter specifically for formatting numbers as Euro currency (currency: "EUR") in the US locale with two decimal places. More about number formatting, see here: [Number formatting](/guides/localization/#number-formatting). + +~~~jsx + // Number formatting options + const numOptions = { maximumFractionDigits: 2, minimumFractionDigits: 2 }; + const num = new Intl.NumberFormat("en-US", numOptions); + const eurNum = new Intl.NumberFormat("en-US", { + style: "currency", + currency: "EUR", + ...numOptions, + }); + + // Cell style function + const cellStyle = (field, value, area, method) => { + if (method?.indexOf("count") > -1) return "count"; + }; + + const table = new pivot.Pivot("#root", { + fields, + data, + config, + tableShape: { + cellStyle // Apply the cellStyle function + } + }); +~~~ + +~~~html title="index.html" + +~~~ + +## Marking cells + The widget API allows marking cells with the required values. You can do it by applying the `marks` parameter of the [`tableShape`](/api/config/tableshape-property) property. You need to do the following: - create a CSS class to be applied to the marked cell - add the CSS class name as the parameter of the `marks` object @@ -156,6 +195,14 @@ const table = new pivot.Pivot("#root", { ~~~ +## Aligning numbers in a cell + +By default, numbers are justified against the end of a cell (aligned to the right) and the number alignment is not applied in headers and in the tree mode (when `tree` is set to **true** for the [`tableShape`](/api/config/tableshape-property) property). If you want to change the number alignment in a cell, except for the cases mentioned, use the global `wx-number` class. + +tbd + + + ## Example In this snippet you can see how to apply a custom style to Pivot From 9b03b59ff3f35128fcd93f6a56621039e23066d2 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Fri, 31 Jan 2025 16:55:59 +0300 Subject: [PATCH 06/53] [update] stylization updated --- docs/guides/stylization.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index ca1a1df..ddc3c6b 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -197,9 +197,15 @@ const table = new pivot.Pivot("#root", { ## Aligning numbers in a cell -By default, numbers are justified against the end of a cell (aligned to the right) and the number alignment is not applied in headers and in the tree mode (when `tree` is set to **true** for the [`tableShape`](/api/config/tableshape-property) property). If you want to change the number alignment in a cell, except for the cases mentioned, use the global `wx-number` class. +By default, numbers are justified against the end of a cell (aligned to the right) and the number alignment is not applied in headers and in the tree mode (when `tree` is set to **true** for the [`tableShape`](/api/config/tableshape-property) property). If you want to change the number alignment in a cell, except for the cases mentioned, use the `wx-number` CSS class. -tbd +~~~html + +~~~ From 70036d9a17e6e5fa0f7a903fe1acd8e235ad59cd Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Mon, 3 Feb 2025 14:11:00 +0300 Subject: [PATCH 07/53] [update] links fixed --- docs/api/config/tableshape-property.md | 2 +- docs/guides/stylization.md | 3 +-- docs/news/migration.md | 2 +- docs/news/whats-new.md | 2 +- 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/docs/api/config/tableshape-property.md b/docs/api/config/tableshape-property.md index 67776e3..fa99bdb 100644 --- a/docs/api/config/tableshape-property.md +++ b/docs/api/config/tableshape-property.md @@ -54,7 +54,7 @@ tableShape?: { - `headerHeight` - (optional) the header height in pixels; the default value is 30 - `footerHeight` - (optional) the footer height in pixels; the default value is 30 - `colWidth` - (optional) the column width in pixels; the default value is 150 -- `cellStyle` - (optional) the function that applies a custom style to a cell; the function has the next parameters: +- `cellStyle` - (optional) a function that applies a custom style to a cell; the function has the next parameters: - `field` - (required) a string representing the field name for which the style is applied - `value` - (required) the value of the cell (the actual data for that particular row and column) - `area` - (required) a string indicating the area of the table where a cell resides ("rows", "columns" or "values" area) diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index ddc3c6b..eda1362 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -100,7 +100,7 @@ You can also apply a custom style to the scroll bar of Pivot. For this, you can ## Cell style -To apply a CSS class to a cell, use the `cellStyle` parameter of the [`tableShape`](/api/properties/tableshape-property) property. The `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell. In the example provided, if the `method` contains "count", it will return the string "count", which is associated with a CSS class *.count* that has the font-weight of 600. In the example we also apply number formatters: +To apply a CSS class to a cell, use the `cellStyle` parameter of the [`tableShape`](/api/config/tableshape-property) property. The `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell. In the example provided, if the `method` contains "count", it will return the string "count", which is associated with a CSS class *.count* that has the font-weight of 600. In the example we also apply number formatters: - `numOptions` ensures that numbers are displayed with exactly two decimal places, regardless of their value - `new Intl.NumberFormat("en-US", numOptions)` creates a number formatter for the US locale ("en-US") using the options defined in `numOptions`. It also creates another number formatter specifically for formatting numbers as Euro currency (currency: "EUR") in the US locale with two decimal places. More about number formatting, see here: [Number formatting](/guides/localization/#number-formatting). @@ -208,7 +208,6 @@ By default, numbers are justified against the end of a cell (aligned to the righ ~~~ - ## Example In this snippet you can see how to apply a custom style to Pivot diff --git a/docs/news/migration.md b/docs/news/migration.md index 38d5b6d..9f21397 100644 --- a/docs/news/migration.md +++ b/docs/news/migration.md @@ -43,7 +43,7 @@ New properties do not fully duplicate the previous ones but provide more extende - Sorting: [sorting fields](https://docs.dhtmlx.com/pivot/1-5/guides__configuration.html#configuringfields) -> [sorting data](/guides/working-with-data#sorting-data) - Tree mode: [gridMode](https://docs.dhtmlx.com/pivot/1-5/guides__configuration.html#gridmode) -> [enabling tree mode](/guides/configuration#enabling-the-tree-mode) - Date format: [configuring date fields](https://docs.dhtmlx.com/pivot/1-5/guides__configuration.html#configuringdatefields) -> -[setting date format](/guides/loading-exporting-data#setting-date-format) +[setting date format](/guides/localization#date-formatting) - Customization: - [cells formatting](https://docs.dhtmlx.com/pivot/1-5/guides__customization.html#conditionalformattingofcells) -> [cells style](/guides/stylization#cell-style) - [templates for headers](https://docs.dhtmlx.com/pivot/1-5/guides__customization.html#settingtemplatesforheaders) -> diff --git a/docs/news/whats-new.md b/docs/news/whats-new.md index 8e509cb..9e57296 100644 --- a/docs/news/whats-new.md +++ b/docs/news/whats-new.md @@ -63,6 +63,6 @@ For tips about migration to the new version, check the [Migration](/news/migrati - [limiting loaded data](/guides/working-with-data#limiting-loaded-data) - more [operations with data](/guides/working-with-data#applying-maths-methods) are available - [processing data with predicates](/guides/working-with-data#processing-data-with-predicates) - applying custom pre-processing functions for data - - [setting date format via locale](/guides/loading-exporting-data#setting-date-format) + - [setting date format via locale](/guides/localization#date-formatting) - New methods are added: [`getTable()`](/api/methods/gettable-method), [`setConfig()`](/api/methods/setconfig-method), [`setLocale()`](/api/methods/setlocale-method), [`showConfigPanel()`](/api/methods/showconfigpanel-method) - New events are added: [`add-field`](/api/events/add-field-event), [`delete-field`](/api/events/delete-field-event), [`open-filter`](/api/events/open-filter-event), [`render-table`](/api/events/render-table-event), [`move-field`](/api/events/move-field-event), [`show-config-panel`](/api/events/show-config-panel-event), [`show-config-panel`](/api/events/show-config-panel-event), [`update-config`](/api/events/update-config-event), [`update-value`](/api/events/update-value-event). From 43b554d8bcc3ab88ce309772abefd43d5b8c12a4 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Tue, 25 Mar 2025 19:30:24 +0300 Subject: [PATCH 08/53] [update] split.right info added --- docs/api/config/tableshape-property.md | 7 ++- docs/guides/configuration.md | 71 +++++++++++++++++++++++++- docs/guides/working-with-data.md | 2 +- 3 files changed, 76 insertions(+), 4 deletions(-) diff --git a/docs/api/config/tableshape-property.md b/docs/api/config/tableshape-property.md index fa99bdb..dd95c78 100644 --- a/docs/api/config/tableshape-property.md +++ b/docs/api/config/tableshape-property.md @@ -36,7 +36,8 @@ tableShape?: { tree?:boolean, cleanRows?: boolean, split?: { - left?: boolean + left?: boolean, + right?: boolean, }, cellStyle?: (field: string, value: any, area: string, method?: string) => string, }; @@ -64,7 +65,9 @@ tableShape?: { - `totalColumn` - (optional) enables generating the total column with total values for rows. The default value is **false**; - `totalRow` - (optional) enables generating the footer with total values (if set to **true**) the default value is **false** - `cleanRows` - (optional) if set to **true**, the duplicate values in scale columns are hidden in the table view. The default value is **false** -- `split` - (optional) if set to **true**, fixes the columns from the left, which makes columns static and visible while scrolling; the number of columns that are split is equal to the number of the rows fields that are defined in the [`config`](/api/config/config-property) property. +- `split` - (optional) allows freezing columns on the right or left depending on the parameter specified (refer to [Freezing columns](/guides/configuration/#freezing-columns)): + - `left` (boolean) - if set to **true** (**false** is set by default), fixes the columns from the left, which makes columns static and visible while scrolling; the number of columns that are split is equal to the number of the rows fields that are defined in the [`config`](/api/config/config-property) property. + - `right` (boolean) - fixes total columns on the right; default value is **false** By default, `tableShape` is undefined, implying that no total row, no total column is present, no templates and marks are applied, the data is shown as a table and not a tree, and left columns are not fixed during scroll. diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 021951a..648fcef 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -235,7 +235,9 @@ const table = new pivot.Pivot("#root", { ## Freezing columns -The widget allows freezing columns on the left side, which makes the leftmost columns static and visible while scrolling. To freeze columns, apply the **split** parameter of the [`tableShape`](/api/config/tableshape-property) property by setting the value of the `left` property to **true**. +The widget allows freezing columns on the left or right side, which makes the columns static and visible while scrolling. To freeze columns, apply the **split** parameter of the [`tableShape`](/api/config/tableshape-property) property by setting the value of the `left` or `right` property to **true**. + +### Fixing columns on the left :::info The number of columns that are split is equal to the number of the rows fields that are defined in the [`config`](/api/config/config-property) property. 2 columns are fixed by default. In the **tree** mode only one columns gets frozen regardless of the number of the rows fields that are defined. @@ -304,6 +306,73 @@ table.api.on("render-table", (tableConfig) => { }); ~~~ +### Fixing columns on the right + +The `right` parameter of the [`tableShape`](/api/config/tableshape-property) property allows fixing total columns on the right. + +~~~jsx +const widget = new pivot.Pivot("#pivot", { + fields, + data: dataset, + tableShape:{ + split: {right: true},// fixes total columns + totalColumn: true, + }, + config: { + rows: [ + "hobbies" + ], + columns: [ + "relationship_status" + ], + values: [ + { + field: "age", + method: "min" + }, + { + field: "age", + method: "max" + } + ] + } +}); +~~~ + +To fix custom columns on the right, you need to apply the table API via the [`render-table`](/api/events/render-table-event) event. + +~~~jsx +const widget = new pivot.Pivot("#pivot", { + fields, + data: dataset, + config: { + rows: [ + "hobbies" + ], + columns: [ + "relationship_status" + ], + values: [ + { + field: "age", + method: "min" + }, + { + field: "age", + method: "max" + } + ] + } +}); + +widget.api.on("render-table", ({ config: tableConfig }) => { + const { config } = widget.api.getState(); + tableConfig.split = { + right: config.values.length, + } +}) +~~~ + ## Sorting in columns The sorting functionality is enabled by default. A user can click the column's header to sort data. To disable/enable sorting, apply the `sort` parameter of the [`columnShape`](/api/config/columnshape-property) property. In the example below we disable sorting. diff --git a/docs/guides/working-with-data.md b/docs/guides/working-with-data.md index 67f3165..8235c65 100644 --- a/docs/guides/working-with-data.md +++ b/docs/guides/working-with-data.md @@ -532,7 +532,7 @@ To enable generating the rightmost column with total values, apply the [`tableSh To enable generating the footer with totals, apply the [`tableShape`](/api/config/tableshape-property)property and set the value of the `totalRow` parameter to **true**. -### Example +**Example:** ~~~jsx {2-5} const table = new pivot.Pivot("#root", { From f4ed89d1bfb6c0d128bc3bac74cf0d9e4acabb89 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Tue, 25 Mar 2025 20:02:17 +0300 Subject: [PATCH 09/53] [update] formatting fixed --- docs/guides/configuration.md | 70 ++++++++++++++++++------------------ 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 648fcef..272ee4c 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -235,7 +235,7 @@ const table = new pivot.Pivot("#root", { ## Freezing columns -The widget allows freezing columns on the left or right side, which makes the columns static and visible while scrolling. To freeze columns, apply the **split** parameter of the [`tableShape`](/api/config/tableshape-property) property by setting the value of the `left` or `right` property to **true**. +The widget allows freezing columns on the left or right side, which makes the columns static and visible while scrolling. To freeze columns, apply the **split** parameter of the [`tableShape`](/api/config/tableshape-property) property by setting the value of the `left` or `right` parameter to **true**. More details with examples, see below. ### Fixing columns on the left @@ -312,29 +312,29 @@ The `right` parameter of the [`tableShape`](/api/config/tableshape-property) pro ~~~jsx const widget = new pivot.Pivot("#pivot", { - fields, + fields, data: dataset, tableShape:{ split: {right: true},// fixes total columns totalColumn: true, }, config: { - rows: [ - "hobbies" - ], - columns: [ - "relationship_status" - ], - values: [ - { - field: "age", - method: "min" - }, - { - field: "age", - method: "max" - } - ] + rows: [ + "hobbies" + ], + columns: [ + "relationship_status" + ], + values: [ + { + field: "age", + method: "min" + }, + { + field: "age", + method: "max" + } + ] } }); ~~~ @@ -343,25 +343,25 @@ To fix custom columns on the right, you need to apply the table API via the [`re ~~~jsx const widget = new pivot.Pivot("#pivot", { - fields, + fields, data: dataset, config: { - rows: [ - "hobbies" - ], - columns: [ - "relationship_status" - ], - values: [ - { - field: "age", - method: "min" - }, - { - field: "age", - method: "max" - } - ] + rows: [ + "hobbies" + ], + columns: [ + "relationship_status" + ], + values: [ + { + field: "age", + method: "min" + }, + { + field: "age", + method: "max" + } + ] } }); From a3b5b2df812e648388d0d0d54b879951aba66d80 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Thu, 27 Mar 2025 15:59:31 +0300 Subject: [PATCH 10/53] [update] what's new added, export updated --- docs/guides/configuration.md | 2 +- docs/guides/loading-exporting-data.md | 6 +++++- docs/news/whats-new.md | 19 ++++++++++++++++++- 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 272ee4c..385a49f 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -240,7 +240,7 @@ The widget allows freezing columns on the left or right side, which makes the co ### Fixing columns on the left :::info -The number of columns that are split is equal to the number of the rows fields that are defined in the [`config`](/api/config/config-property) property. 2 columns are fixed by default. In the **tree** mode only one columns gets frozen regardless of the number of the rows fields that are defined. +The number of columns that are split is equal to the number of the rows fields that are defined in the [`config`](/api/config/config-property) property. 2 columns are fixed by default. In the **tree** mode only one column gets frozen regardless of the number of the rows fields that are defined. ::: ~~~jsx {18-22} diff --git a/docs/guides/loading-exporting-data.md b/docs/guides/loading-exporting-data.md index ee3c161..5882d0f 100644 --- a/docs/guides/loading-exporting-data.md +++ b/docs/guides/loading-exporting-data.md @@ -12,7 +12,7 @@ The following types of information can be loaded into Pivot: - [`data`](/api/config/data-property) - an array of objects, where each object represents the data row -### Example +**Example:** ~~~jsx const data = [ @@ -303,6 +303,10 @@ exportButton.textContent = "Export"; document.body.appendChild(exportButton); ~~~ +:::info +Raw values are exported for date and number fields with visible formatting, but if a template is defined for a field, it exports the rendered value defined by that template. +::: + ## Example In this snippet you can see how to load JSON and CSV data: diff --git a/docs/news/whats-new.md b/docs/news/whats-new.md index 9e57296..aaa6920 100644 --- a/docs/news/whats-new.md +++ b/docs/news/whats-new.md @@ -8,6 +8,23 @@ description: You can explore what's new in DHTMLX Pivot and its release history If you are updating Pivot from an older version, check [Migration to newer versions](news/migration.md) for details. +## Version 2.1 + +### New functionality + +- [Ability to freeze columns on the right](/guides/configuration/#freezing-columns) +- [Numbers are formatted](/guides/localization/#number-formatting) according to the current locale with possibility to define custom number formats within templates +- [Ability to change the number alignment in a cell](/guides/stylization/#aligning-numbers-in-a-cell) +- [Ability to style cells](/guides/stylization/#cell-style) +- Text fields and numbers are exported as they are seen in grid cells. If a template is applied to a cell, the rendered value is exported. + +### Fixes + +- Total columns are not sorted +- Values are converted to numbers during export +- Predicate template is not applied to rows/columns + + ## Version 2.0.3 Released on November 29, 2024 @@ -18,7 +35,7 @@ Released on November 29, 2024 - exported columns with autowidth are too narrow in the resulting Excel file - incorrect position of a popup with filters - incorrect behaviour after changing configuration with the setConfig method -- more presize type definitions +- more precise type definitions ## Version 2.0.2 From 7ebb0c7515ef0f3dd45c774b55db42098e9c0c9b Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Fri, 28 Mar 2025 16:15:25 +0300 Subject: [PATCH 11/53] [update] tableshape updated --- docs/api/config/tableshape-property.md | 10 +++++----- docs/news/whats-new.md | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/api/config/tableshape-property.md b/docs/api/config/tableshape-property.md index dd95c78..6fcdcdc 100644 --- a/docs/api/config/tableshape-property.md +++ b/docs/api/config/tableshape-property.md @@ -20,8 +20,8 @@ tableShape?: { operation: string ) => any; }, - totalRow?: boolean, - totalColumn?: boolean, + totalRow?: boolean | "sumOnly", + totalColumn?: boolean | "sumOnly", marks?: { [cssClass: string]: ((v: any, columnData: any, rowData: any) => boolean) | "max" @@ -62,14 +62,14 @@ tableShape?: { - `method` - (optional) a string that can represent the operation performed on a cell (e.g., "sum", "count", etc.). The `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell. - `tree` - (optional) if set to **true**, enables the tree mode when data can be presented with expandable rows; the default value is **false**; more information with examples see here [Switching to the tree mode](/guides/configuration/#enabling-the-tree-mode) -- `totalColumn` - (optional) enables generating the total column with total values for rows. The default value is **false**; -- `totalRow` - (optional) enables generating the footer with total values (if set to **true**) the default value is **false** +- `totalColumn` - (optional) if **true**, enables generating the total column with total values for rows (**false** is set by default); if the value is set to "sumOnly", the column with the total sum value will be generated (available only for sum operations) +- `totalRow` - (optional) if **true**, enables generating the footer with total values (**false** is set by default); if the value is set to "sumOnly", the row with the total row value will be generated (available only for sum operations) - `cleanRows` - (optional) if set to **true**, the duplicate values in scale columns are hidden in the table view. The default value is **false** - `split` - (optional) allows freezing columns on the right or left depending on the parameter specified (refer to [Freezing columns](/guides/configuration/#freezing-columns)): - `left` (boolean) - if set to **true** (**false** is set by default), fixes the columns from the left, which makes columns static and visible while scrolling; the number of columns that are split is equal to the number of the rows fields that are defined in the [`config`](/api/config/config-property) property. - `right` (boolean) - fixes total columns on the right; default value is **false** -By default, `tableShape` is undefined, implying that no total row, no total column is present, no templates and marks are applied, the data is shown as a table and not a tree, and left columns are not fixed during scroll. +By default, `tableShape` is undefined, implying that no total row, no total column is present, no templates and marks are applied, the data is shown as a table and not a tree, and columns are not fixed during scroll. ## Example diff --git a/docs/news/whats-new.md b/docs/news/whats-new.md index aaa6920..9977d84 100644 --- a/docs/news/whats-new.md +++ b/docs/news/whats-new.md @@ -17,6 +17,7 @@ If you are updating Pivot from an older version, check [Migration to newer versi - [Ability to change the number alignment in a cell](/guides/stylization/#aligning-numbers-in-a-cell) - [Ability to style cells](/guides/stylization/#cell-style) - Text fields and numbers are exported as they are seen in grid cells. If a template is applied to a cell, the rendered value is exported. +- Cell navigation with a focus frame ### Fixes @@ -24,7 +25,6 @@ If you are updating Pivot from an older version, check [Migration to newer versi - Values are converted to numbers during export - Predicate template is not applied to rows/columns - ## Version 2.0.3 Released on November 29, 2024 From 104c0a4cb26f9e2ef7ad7b409cba7bdf02d3b841 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Mon, 31 Mar 2025 16:09:44 +0300 Subject: [PATCH 12/53] [update] split updated --- docs/guides/configuration.md | 32 +++++++++++--------------------- 1 file changed, 11 insertions(+), 21 deletions(-) diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 385a49f..e2d54ff 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -237,13 +237,13 @@ const table = new pivot.Pivot("#root", { The widget allows freezing columns on the left or right side, which makes the columns static and visible while scrolling. To freeze columns, apply the **split** parameter of the [`tableShape`](/api/config/tableshape-property) property by setting the value of the `left` or `right` parameter to **true**. More details with examples, see below. -### Fixing columns on the left +### Freezing columns on the left :::info The number of columns that are split is equal to the number of the rows fields that are defined in the [`config`](/api/config/config-property) property. 2 columns are fixed by default. In the **tree** mode only one column gets frozen regardless of the number of the rows fields that are defined. ::: -~~~jsx {18-22} +~~~jsx {19} const table = new pivot.Pivot("#root", { fields, data, @@ -262,9 +262,7 @@ const table = new pivot.Pivot("#root", { ] }, tableShape: { - split: { - left: true //freezes all fields from rows on the left side - } + split: {left: true } //freezes all fields from rows on the left side } }); ~~~ @@ -306,25 +304,21 @@ table.api.on("render-table", (tableConfig) => { }); ~~~ -### Fixing columns on the right +### Freezing columns on the right The `right` parameter of the [`tableShape`](/api/config/tableshape-property) property allows fixing total columns on the right. -~~~jsx +~~~jsx {4-7} const widget = new pivot.Pivot("#pivot", { fields, data: dataset, tableShape:{ - split: {right: true},// fixes total columns + split: {right: true}, totalColumn: true, }, config: { - rows: [ - "hobbies" - ], - columns: [ - "relationship_status" - ], + rows: ["hobbies"], + columns: ["relationship_status"], values: [ { field: "age", @@ -341,17 +335,13 @@ const widget = new pivot.Pivot("#pivot", { To fix custom columns on the right, you need to apply the table API via the [`render-table`](/api/events/render-table-event) event. -~~~jsx +~~~jsx {20-25} const widget = new pivot.Pivot("#pivot", { fields, data: dataset, config: { - rows: [ - "hobbies" - ], - columns: [ - "relationship_status" - ], + rows: ["hobbies"], + columns: ["relationship_status"], values: [ { field: "age", From f6f2452b29804b8aacb18dcbba29dcce3cc6fd2f Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Mon, 31 Mar 2025 16:25:47 +0300 Subject: [PATCH 13/53] [update] formatng fixed --- docs/guides/configuration.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index e2d54ff..f8805f9 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -329,7 +329,7 @@ const widget = new pivot.Pivot("#pivot", { method: "max" } ] - } + } }); ~~~ @@ -352,7 +352,7 @@ const widget = new pivot.Pivot("#pivot", { method: "max" } ] - } + } }); widget.api.on("render-table", ({ config: tableConfig }) => { From 16f7ac13d180b48142a5380b5febc8059b0097d2 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Wed, 2 Apr 2025 17:32:37 +0300 Subject: [PATCH 14/53] [update] format to fields added --- docs/api/config/fields-property.md | 19 ++++++++++++++++++- docs/guides/localization.md | 4 ++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/docs/api/config/fields-property.md b/docs/api/config/fields-property.md index 0547c27..2a8621e 100644 --- a/docs/api/config/fields-property.md +++ b/docs/api/config/fields-property.md @@ -19,7 +19,8 @@ fields?: [{ id: string, label?: string, type: "number" | "date" | "text", - sort?: "asc" | "desc" | ((a: any, b: any) => number) + sort?: "asc" | "desc" | ((a: any, b: any) => number), + format?: string | boolean | numberFormatOptions{} }]; ~~~ @@ -33,6 +34,20 @@ Each object in the `fields` array should have the following properties: - `label` - (optional) the field label to be displayed in GUI - `type` - (required) data type in a field ( "number", "date", or "string") - `sort` - (optional) defines the default sorting order for the field. Accepts "asc", "desc", or a custom sorting function +- `format` - (optional) allows customizing the format of numbers and dates in a cell; by default, the format is taken from locale; the format will be also applied during export + - `string` - (optional) the format for dates + - `boolean` - (optional) defines if date or number should be formatted: **false** (not formatted) or **true** (formatted); useful for numeric values like years + - `numberFormatOptions` - (optional) an object with options for formatting: + - `minimumIntegerDigits`(number) - (optional) the minimum number of integer digits to use; possible values are from 1 to 21; the default is 1; + - `minimumFractionDigits`(number) - (optional) the minimum number of fraction digits to use; possible values are from 0 to 100; the default is 1; + - `maximumFractionDigits`(number) - (optional) the maximum number of fraction digits to use; possible values are from 0 to 100; the default is 3; + For more details about digit options refer to [Digit options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits) + - `prefix` (string) - (optional) a string (before a number) for additional symbols like currency + - `suffix` (string) - (optional) a string (after a number) for additional symbols like currency + +:::info +If a template is applied via the [`tableShape`](/api/config/tableshape-property) property, it will override the `format` settings. +::: ### Example @@ -88,3 +103,5 @@ const table = new pivot.Pivot("#root", { } }); ~~~ + +**Related article**: [Number formatting](/guides/localization/#number-formatting) \ No newline at end of file diff --git a/docs/guides/localization.md b/docs/guides/localization.md index 88100e5..a42a82b 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -271,6 +271,10 @@ To present the 20th of June, 2024 with the exact time as *2024-09-20 16:47:08.12 By default, all fields with the *number* type are localized according to the locale (the value in the `lang` field of the locale). The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) object enables language-sensitive number formatting. In case you need to disable number formatting of some fields, add the template via the [`tableShape`](/api/config/tableshape-property) property or set the *text* type for this field instead of the *number* type. +:::info +Number and date formats can also be set via the `format` parameter of the [`fields`](/api/config/fields-property) property. If both the template (via the [`tableShape`](/api/config/tableshape-property) property) and format are set, the template will override the format settings. +::: + Example: ~~~jsx From cc088ea329ba55c3c1b66e00c17c7a534d4e0a83 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Wed, 2 Apr 2025 17:38:03 +0300 Subject: [PATCH 15/53] [update] format to fields added --- docs/api/config/fields-property.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/config/fields-property.md b/docs/api/config/fields-property.md index 2a8621e..96e0383 100644 --- a/docs/api/config/fields-property.md +++ b/docs/api/config/fields-property.md @@ -34,7 +34,7 @@ Each object in the `fields` array should have the following properties: - `label` - (optional) the field label to be displayed in GUI - `type` - (required) data type in a field ( "number", "date", or "string") - `sort` - (optional) defines the default sorting order for the field. Accepts "asc", "desc", or a custom sorting function -- `format` - (optional) allows customizing the format of numbers and dates in a cell; by default, the format is taken from locale; the format will be also applied during export +- `format` - (optional) allows customizing the format of numbers and dates in a field; by default, the format is taken from locale; the format will be also applied during export - `string` - (optional) the format for dates - `boolean` - (optional) defines if date or number should be formatted: **false** (not formatted) or **true** (formatted); useful for numeric values like years - `numberFormatOptions` - (optional) an object with options for formatting: From 96721b6ad4aab7bb6b0f9abbba99c8d0396d6281 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Thu, 3 Apr 2025 14:13:18 +0300 Subject: [PATCH 16/53] [update] format updated --- docs/api/config/fields-property.md | 11 ++++++----- docs/news/whats-new.md | 1 + 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/api/config/fields-property.md b/docs/api/config/fields-property.md index 96e0383..ba6b40e 100644 --- a/docs/api/config/fields-property.md +++ b/docs/api/config/fields-property.md @@ -35,16 +35,17 @@ Each object in the `fields` array should have the following properties: - `type` - (required) data type in a field ( "number", "date", or "string") - `sort` - (optional) defines the default sorting order for the field. Accepts "asc", "desc", or a custom sorting function - `format` - (optional) allows customizing the format of numbers and dates in a field; by default, the format is taken from locale; the format will be also applied during export - - `string` - (optional) the format for dates - - `boolean` - (optional) defines if date or number should be formatted: **false** (not formatted) or **true** (formatted); useful for numeric values like years + - `string` - (optional) the format for dates (by default, Pivot uses `dateFormat` from locale) + - `boolean` - (optional) if set to **false**, a number is displayed as is, without any formatting - `numberFormatOptions` - (optional) an object with options for formatting: - - `minimumIntegerDigits`(number) - (optional) the minimum number of integer digits to use; possible values are from 1 to 21; the default is 1; - - `minimumFractionDigits`(number) - (optional) the minimum number of fraction digits to use; possible values are from 0 to 100; the default is 1; - - `maximumFractionDigits`(number) - (optional) the maximum number of fraction digits to use; possible values are from 0 to 100; the default is 3; + - `minimumIntegerDigits`(number) - (optional) the minimum number of integer (for example, if the value is set to 2, the number 1 will be shown as "01"); the default is 1; + - `minimumFractionDigits`(number) - (optional) the minimum number of fraction digits to use (for example, if the value is set to 2, the number 10.5 will be shown as "10.50"); the default is 1; + - `maximumFractionDigits`(number) - (optional) the maximum number of fraction digits to use (for example, if the value is set to 2, the number 10.3333... will be shown as "10.33" ); the default is 3; For more details about digit options refer to [Digit options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits) - `prefix` (string) - (optional) a string (before a number) for additional symbols like currency - `suffix` (string) - (optional) a string (after a number) for additional symbols like currency + :::info If a template is applied via the [`tableShape`](/api/config/tableshape-property) property, it will override the `format` settings. ::: diff --git a/docs/news/whats-new.md b/docs/news/whats-new.md index 9977d84..ac137a0 100644 --- a/docs/news/whats-new.md +++ b/docs/news/whats-new.md @@ -16,6 +16,7 @@ If you are updating Pivot from an older version, check [Migration to newer versi - [Numbers are formatted](/guides/localization/#number-formatting) according to the current locale with possibility to define custom number formats within templates - [Ability to change the number alignment in a cell](/guides/stylization/#aligning-numbers-in-a-cell) - [Ability to style cells](/guides/stylization/#cell-style) +- `format` added to the [`fields`](/api/config/fields-property) - Text fields and numbers are exported as they are seen in grid cells. If a template is applied to a cell, the rendered value is exported. - Cell navigation with a focus frame From 539cf4ae79f511f9c6bff332455541447827a38e Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Thu, 3 Apr 2025 16:31:52 +0300 Subject: [PATCH 17/53] [update] exporting data added, links fixed --- docs/api/config/fields-property.md | 5 +- docs/api/methods/gettable-method.md | 2 +- docs/guides/exporting-data.md | 100 ++++++++++++++++++ ...ding-exporting-data.md => loading-data.md} | 53 +--------- docs/guides/working-with-data.md | 2 +- docs/news/migration.md | 2 +- sidebars.js | 3 +- 7 files changed, 110 insertions(+), 57 deletions(-) create mode 100644 docs/guides/exporting-data.md rename docs/guides/{loading-exporting-data.md => loading-data.md} (80%) diff --git a/docs/api/config/fields-property.md b/docs/api/config/fields-property.md index ba6b40e..da7ff0e 100644 --- a/docs/api/config/fields-property.md +++ b/docs/api/config/fields-property.md @@ -34,18 +34,17 @@ Each object in the `fields` array should have the following properties: - `label` - (optional) the field label to be displayed in GUI - `type` - (required) data type in a field ( "number", "date", or "string") - `sort` - (optional) defines the default sorting order for the field. Accepts "asc", "desc", or a custom sorting function -- `format` - (optional) allows customizing the format of numbers and dates in a field; by default, the format is taken from locale; the format will be also applied during export +- `format` - (optional) allows customizing the format of numbers and dates in a field; the format will be also applied during [export](/guides/exporting-data) - `string` - (optional) the format for dates (by default, Pivot uses `dateFormat` from locale) - `boolean` - (optional) if set to **false**, a number is displayed as is, without any formatting - `numberFormatOptions` - (optional) an object with options for formatting: - `minimumIntegerDigits`(number) - (optional) the minimum number of integer (for example, if the value is set to 2, the number 1 will be shown as "01"); the default is 1; - `minimumFractionDigits`(number) - (optional) the minimum number of fraction digits to use (for example, if the value is set to 2, the number 10.5 will be shown as "10.50"); the default is 1; - - `maximumFractionDigits`(number) - (optional) the maximum number of fraction digits to use (for example, if the value is set to 2, the number 10.3333... will be shown as "10.33" ); the default is 3; + - `maximumFractionDigits`(number) - (optional) the maximum number of fraction digits to use (for example, if the value is set to 2, the number 10.3333... will be shown as "10.33"); the default is 3; For more details about digit options refer to [Digit options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits) - `prefix` (string) - (optional) a string (before a number) for additional symbols like currency - `suffix` (string) - (optional) a string (after a number) for additional symbols like currency - :::info If a template is applied via the [`tableShape`](/api/config/tableshape-property) property, it will override the `format` settings. ::: diff --git a/docs/api/methods/gettable-method.md b/docs/api/methods/gettable-method.md index db6cd9e..d2aaff5 100644 --- a/docs/api/methods/gettable-method.md +++ b/docs/api/methods/gettable-method.md @@ -10,7 +10,7 @@ description: You can learn about the getTable method in the documentation of the @short: Gets access to the underlying Table widget instance in the Pivot table -This method is used when there's a need to access the underlying Table widget instance in Pivot. It provides direct access to the Table functionality allowing for operations such as data serialization and exporting in various formats. The Table API has its own `api.exec()` method that can call the `open-row`, `close-row`, `export` events. Usage examples with the events you can see here: [Expanding/collapsing all rows](/guides/configuration#expandingcollapsing-all-rows), [Exporting data](/guides/loading-exporting-data#exporting-data) +This method is used when there's a need to access the underlying Table widget instance in Pivot. It provides direct access to the Table functionality allowing for operations such as data serialization and exporting in various formats. The Table API has its own `api.exec()` method that can call the `open-row`, `close-row`, `export` events. Usage examples with the events you can see here: [Expanding/collapsing all rows](/guides/configuration#expandingcollapsing-all-rows), [Exporting data](/guides/exporting-data). ### Usage diff --git a/docs/guides/exporting-data.md b/docs/guides/exporting-data.md new file mode 100644 index 0000000..c6e3f08 --- /dev/null +++ b/docs/guides/exporting-data.md @@ -0,0 +1,100 @@ +--- +sidebar_label: Exporting data +title: Exporting data +description: You can explore how to export data in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot. +--- + +# Exporting data + +To export the table data to the XLSX or CSV format, it's necessary to get access to the underlying Table widget instance inside Pivot and apply its API to export data. To do this, you should use the [`getTable`](/api/methods/gettable-method) method and execute the `export` action: + +```js +"export": ({ + options: {}, + result: any +}) => boolean|void; +``` + +The `export` action of the Table widget has the next parameters that you can configure to your needs: + +- `options` - an object with the export options; options differ depending on the format type: + - `format` (string) - (optional) the export format that can be "csv" or "xlsx" + **Options for "xlsx" format:** + - `fileName` (string) - (optional) a name of .xlsx file ("data" by default) + - `sheetName` (string) - a name of Excel sheet ( "data" by default) + - `styles` - custom styles for cells in the header, body, and footer. Can be configured using a hash of style properties: + ~~~ + header: { /* style properties for header cells */ } + // Names of style properties should be written in camelCase, for example: + //header: { borderBottom: "0.5px solid #dfdfdf", borderRight: "0.5px solid #dfdfdf" }, + lastHeaderCell: { /* style properties for the last row of header cells ( optional ) */ }, + cell: { /* style properties for body cells */ }, + firstFooterCell: { /*style properties for the first row of footer cells ( optional ) */ }, + footer: { /* style properties for footer cells */ } + ~~~ + If `styles` is set to **false**, grid will be exported without any styling. + - `cellTemplate` - a function to customize the export value of each cell. It takes the value, row, and column objects as parameters and returns the custom value to be exported: `(value, rowObj, columnObj) => string` + - `headerCellTemplate` - a function that customizes the value of a header or footer cell during export. It is called with the text, header cell object, column object, and cell type ("header" or "footer"). This allows users to modify the exported header/footer values: `(text, headerCell, columnObj, type: "header"| "footer") => string` + - `cellStyle` - a function that allows customizing the style and format of individual cells during export. It takes the value, row, and column objects as parameters and should return an object with style properties (e.g., alignment or format): `(value, rowObj, columnObj) => any | null` + - `headerCellStyle` - similar to cellStyle, but specifically for the header and footer cells. This function takes the text, header cell object, column object, and type ("header" or "footer") and returns style properties: `(text, headerCell, columnObj, type: "header"| "footer") => any | null` + - `header` (boolean) - (optional) defines if a header should be exported (**true** by default) + - `footer` (boolean) - (optional) defines if a footer should be exported (**true** by default) + - `download` (boolean) - (optional) defines whether to download a file. **true** is set by default. if set to **false**, the file will not be downloaded, Excel data (Blob) will be available as `ev.result` + **Options for "csv" format:** + - `fileName` (string) - (optional) a file name ("data" by default) + - `rows` (string) - (optional) rows delimiter, "\n" by default + - `cols` (string) - (optional) columns delimiter, "\t" by default + - `header` (boolean) - (optional) defines if a header should be exported (**true** by default) + - `footer` (boolean) - (optional) defines if a footer should be exported (**true** by default) + - `download` (boolean) - (optional) defines whether to download a file. **true** is set by default. if set to **false**, the file will not be downloaded, CSV data (Blob) will be available as `ev.result` +- `result` - the exported data result (usually Blob or file depending on the `download` option) + +In the example below we get access to the Table instance and trigger the `export`action on the button click using the [`api.exec()`](/api/internal/exec-method) method. + +~~~jsx +const table = new pivot.Pivot("#root", { + fields, + data: dataset, + config: { + rows: ["studio", "genre"], + columns: [], + values: [ + { + id: "title", + method: "count" + }, + { + id: "score", + method: "max" + } + ] + } +}); + +function toCSV() { + table.api.getTable().exec("export", { + options: { + format: "csv", + cols: ";" + } + }); +} + +const exportButton = document.createElement("button"); +exportButton.addEventListener("click", toCSV); +exportButton.textContent = "Export"; + +document.body.appendChild(exportButton); +~~~ + +:::info +Raw values are exported for date and number fields with visible formatting, but if a template is defined for a field, it exports the rendered value defined by that template. You can also configure the export settings via the `format` parameter of the [`fields`](/api/config/fields-property) property. In case both the template and format are set, the template settings will override the format ones. +::: + +## Example + +In this snippet you can see how to export data: + + + +**Related articles**: [Date formatting](/guides/localization#date-formatting) \ No newline at end of file diff --git a/docs/guides/loading-exporting-data.md b/docs/guides/loading-data.md similarity index 80% rename from docs/guides/loading-exporting-data.md rename to docs/guides/loading-data.md index 5882d0f..e2bd328 100644 --- a/docs/guides/loading-exporting-data.md +++ b/docs/guides/loading-data.md @@ -1,7 +1,7 @@ --- -sidebar_label: Loading and exporting data -title: Loading and exporting data -description: You can explore how to load and export data in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot. +sidebar_label: Loading data +title: Loading data +description: You can explore how to load data in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot. --- ## Preparing data for loading @@ -261,52 +261,6 @@ importButton.textContent = "Import"; document.body.appendChild(importButton); ~~~ -## Exporting data - -To export the table data to the XLSX or CSV format, it's necessary to get access to the underlying Table widget instance inside Pivot and apply its API to export data. To do this, you should use the [`getTable`](/api/methods/gettable-method) method. - -In the example below we get access to the Table instance and trigger the `export`action on the button click using the [`api.exec()`](/api/internal/exec-method) method. - -~~~jsx -const table = new pivot.Pivot("#root", { - fields, - data: dataset, - config: { - rows: ["studio", "genre"], - columns: [], - values: [ - { - id: "title", - method: "count" - }, - { - id: "score", - method: "max" - } - ] - } -}); - -function toCSV() { - table.api.getTable().exec("export", { - options: { - format: "csv", - cols: ";" - } - }); -} - -const exportButton = document.createElement("button"); -exportButton.addEventListener("click", toCSV); -exportButton.textContent = "Export"; - -document.body.appendChild(exportButton); -~~~ - -:::info -Raw values are exported for date and number fields with visible formatting, but if a template is defined for a field, it exports the rendered value defined by that template. -::: - ## Example In this snippet you can see how to load JSON and CSV data: @@ -314,7 +268,6 @@ In this snippet you can see how to load JSON and CSV data: **Related samples:** -- [Pivot 2.0. Export to XLSX, CSV](https://snippet.dhtmlx.com/zjuloqxd) - [Pivot 2.0: Date format](https://snippet.dhtmlx.com/shn1l794) - [Pivot 2.0: Different datasets](https://snippet.dhtmlx.com/6xtqge4i) - [Pivot 2.0. Large dataset](https://snippet.dhtmlx.com/e6qwqrys) diff --git a/docs/guides/working-with-data.md b/docs/guides/working-with-data.md index 8235c65..e8615b8 100644 --- a/docs/guides/working-with-data.md +++ b/docs/guides/working-with-data.md @@ -6,7 +6,7 @@ description: You can explore how to work with Data in the documentation of the D # Working with data -This page describes how to aggregate data in Pivot. For the instructions about loading and exporting data refer to [Loading and exporting data](/guides/loading-exporting-data). +This page describes how to aggregate data in Pivot. For the instructions about loading and exporting data refer to [Loading data](/guides/loading-data) and [Exporting data](/guides/exporting-data). ## Defining fields diff --git a/docs/news/migration.md b/docs/news/migration.md index 9f21397..aa513e7 100644 --- a/docs/news/migration.md +++ b/docs/news/migration.md @@ -39,7 +39,7 @@ New properties do not fully duplicate the previous ones but provide more extende ### Important features -- Exporting data: [previous export option](https://docs.dhtmlx.com/pivot/1-5/guides__export.html) -> [new export option](/guides/loading-exporting-data#exporting-data) +- Exporting data: [previous export option](https://docs.dhtmlx.com/pivot/1-5/guides__export.html) -> [new export option](/guides/exporting-data) - Sorting: [sorting fields](https://docs.dhtmlx.com/pivot/1-5/guides__configuration.html#configuringfields) -> [sorting data](/guides/working-with-data#sorting-data) - Tree mode: [gridMode](https://docs.dhtmlx.com/pivot/1-5/guides__configuration.html#gridmode) -> [enabling tree mode](/guides/configuration#enabling-the-tree-mode) - Date format: [configuring date fields](https://docs.dhtmlx.com/pivot/1-5/guides__configuration.html#configuringdatefields) -> diff --git a/sidebars.js b/sidebars.js index 08878e4..e6d3041 100644 --- a/sidebars.js +++ b/sidebars.js @@ -181,7 +181,8 @@ module.exports = { items: [ "guides/initialization", "guides/configuration", - "guides/loading-exporting-data", + "guides/exporting-data", + "guides/loading-data", "guides/localization", "guides/stylization", "guides/typescript-support", From f7fe728345bbf5cc123545af1ae731eb25cf81a5 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Thu, 3 Apr 2025 17:10:02 +0300 Subject: [PATCH 18/53] [update] whats_new updated --- docs/news/whats-new.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/news/whats-new.md b/docs/news/whats-new.md index ac137a0..119c27e 100644 --- a/docs/news/whats-new.md +++ b/docs/news/whats-new.md @@ -10,13 +10,15 @@ If you are updating Pivot from an older version, check [Migration to newer versi ## Version 2.1 +Released on ... + ### New functionality - [Ability to freeze columns on the right](/guides/configuration/#freezing-columns) - [Numbers are formatted](/guides/localization/#number-formatting) according to the current locale with possibility to define custom number formats within templates - [Ability to change the number alignment in a cell](/guides/stylization/#aligning-numbers-in-a-cell) - [Ability to style cells](/guides/stylization/#cell-style) -- `format` added to the [`fields`](/api/config/fields-property) +- `format` added to the [`fields`](/api/config/fields-property) property - Text fields and numbers are exported as they are seen in grid cells. If a template is applied to a cell, the rendered value is exported. - Cell navigation with a focus frame From f2633c69d6cb57e33b948e8d229b8ac4b1c7e434 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Mon, 7 Apr 2025 18:16:41 +0300 Subject: [PATCH 19/53] [update] exporting_data updated --- docs/guides/exporting-data.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/docs/guides/exporting-data.md b/docs/guides/exporting-data.md index c6e3f08..bcf3f14 100644 --- a/docs/guides/exporting-data.md +++ b/docs/guides/exporting-data.md @@ -14,12 +14,14 @@ To export the table data to the XLSX or CSV format, it's necessary to get access result: any }) => boolean|void; ``` - The `export` action of the Table widget has the next parameters that you can configure to your needs: - `options` - an object with the export options; options differ depending on the format type: - `format` (string) - (optional) the export format that can be "csv" or "xlsx" **Options for "xlsx" format:** + :::info + By default, for the "xlsx" format, date and number fields are exported as raw values with default format or the format defined via the [`fields`](/api/config/fields-property) property. But if a template is defined for a field (see the [`tableShape`](/api/config/tableshape-property) property), it exports the rendered value defined by that template. In case both the template and `format` are set, the template settings will override the format ones. + ::: - `fileName` (string) - (optional) a name of .xlsx file ("data" by default) - `sheetName` (string) - a name of Excel sheet ( "data" by default) - `styles` - custom styles for cells in the header, body, and footer. Can be configured using a hash of style properties: @@ -34,7 +36,7 @@ The `export` action of the Table widget has the next parameters that you can con ~~~ If `styles` is set to **false**, grid will be exported without any styling. - `cellTemplate` - a function to customize the export value of each cell. It takes the value, row, and column objects as parameters and returns the custom value to be exported: `(value, rowObj, columnObj) => string` - - `headerCellTemplate` - a function that customizes the value of a header or footer cell during export. It is called with the text, header cell object, column object, and cell type ("header" or "footer"). This allows users to modify the exported header/footer values: `(text, headerCell, columnObj, type: "header"| "footer") => string` + - `headerCellTemplate` - a function that customizes the value of a header or footer cell during export. It is called with the text, header cell object, column object, and cell type ("header" or "footer"). This allows users to modify the exported header/footer values. `(text, headerCell, columnObj, type: "header"| "footer") => string` - `cellStyle` - a function that allows customizing the style and format of individual cells during export. It takes the value, row, and column objects as parameters and should return an object with style properties (e.g., alignment or format): `(value, rowObj, columnObj) => any | null` - `headerCellStyle` - similar to cellStyle, but specifically for the header and footer cells. This function takes the text, header cell object, column object, and type ("header" or "footer") and returns style properties: `(text, headerCell, columnObj, type: "header"| "footer") => any | null` - `header` (boolean) - (optional) defines if a header should be exported (**true** by default) @@ -87,10 +89,6 @@ exportButton.textContent = "Export"; document.body.appendChild(exportButton); ~~~ -:::info -Raw values are exported for date and number fields with visible formatting, but if a template is defined for a field, it exports the rendered value defined by that template. You can also configure the export settings via the `format` parameter of the [`fields`](/api/config/fields-property) property. In case both the template and format are set, the template settings will override the format ones. -::: - ## Example In this snippet you can see how to export data: From df038fd93197415db8310eebd016fbc3e7eacb7a Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Thu, 10 Apr 2025 14:26:29 +0300 Subject: [PATCH 20/53] [update] links to new snippets added --- docs/api/config/columnshape-property.md | 4 ++-- docs/api/config/headershape-property.md | 6 +++--- docs/api/config/limits-property.md | 2 +- docs/api/config/methods-property.md | 2 +- docs/api/config/predicates-property.md | 2 +- docs/api/config/readonly-property.md | 2 +- docs/api/config/tableshape-property.md | 8 +++++--- docs/guides/configuration.md | 6 ++++-- docs/guides/loading-data.md | 6 +++--- docs/guides/stylization.md | 6 +++++- docs/guides/working-with-data.md | 5 +++-- 11 files changed, 29 insertions(+), 20 deletions(-) diff --git a/docs/api/config/columnshape-property.md b/docs/api/config/columnshape-property.md index f34ef8f..70ce62f 100644 --- a/docs/api/config/columnshape-property.md +++ b/docs/api/config/columnshape-property.md @@ -78,5 +78,5 @@ const table = new pivot.Pivot("#root", { ~~~ **Related samples:** -- [Pivot 2.0. Auto width. Sizing columns to content](https://snippet.dhtmlx.com/tn1yw14m) -- [Pivot 2.0. Set columns width](https://snippet.dhtmlx.com/ceu34kkn) +- [Pivot 2. Auto width. Sizing columns to content](https://snippet.dhtmlx.com/tn1yw14m) +- [Pivot 2. Set columns width](https://snippet.dhtmlx.com/ceu34kkn) diff --git a/docs/api/config/headershape-property.md b/docs/api/config/headershape-property.md index d6f7567..03b8bfb 100644 --- a/docs/api/config/headershape-property.md +++ b/docs/api/config/headershape-property.md @@ -58,8 +58,8 @@ const table = new pivot.Pivot("#root", { ~~~ **Related samples**: -- [Pivot 2.0: Vertical orientation of text in grid headers](https://snippet.dhtmlx.com/4qroi8ka) -- [Pivot 2.0: Collapsible columns](https://snippet.dhtmlx.com/pt2ljmcm) -- [Pivot 2.0. Headers template](https://snippet.dhtmlx.com/g89r9ryw) +- [Pivot 2. Vertical orientation of text in grid headers](https://snippet.dhtmlx.com/4qroi8ka) +- [Pivot 2. Collapsible columns](https://snippet.dhtmlx.com/pt2ljmcm) +- [Pivot 2. Headers template](https://snippet.dhtmlx.com/g89r9ryw) **Related article**: [Configuration](/guides/configuration) diff --git a/docs/api/config/limits-property.md b/docs/api/config/limits-property.md index 0b443ba..6bb997f 100644 --- a/docs/api/config/limits-property.md +++ b/docs/api/config/limits-property.md @@ -58,4 +58,4 @@ const table = new pivot.Pivot("#root", { }); ~~~ -**Related sample:** [Pivot 2.0. Data limits](https://snippet.dhtmlx.com/7ryns8oe) +**Related sample:** [Pivot 2. Data limits](https://snippet.dhtmlx.com/7ryns8oe) diff --git a/docs/api/config/methods-property.md b/docs/api/config/methods-property.md index c8385e0..f8b6c93 100644 --- a/docs/api/config/methods-property.md +++ b/docs/api/config/methods-property.md @@ -158,6 +158,6 @@ const table = new pivot.Pivot("#root", { }); ~~~ -**Related sample:** [Pivot 2.0: Custom math methods](https://snippet.dhtmlx.com/lv90d8q2) +**Related sample:** [Pivot 2. Custom maths methods](https://snippet.dhtmlx.com/lv90d8q2) **Related article**: [Applying maths methods](/guides/working-with-data#applying-maths-methods) diff --git a/docs/api/config/predicates-property.md b/docs/api/config/predicates-property.md index 172b02b..e014e43 100644 --- a/docs/api/config/predicates-property.md +++ b/docs/api/config/predicates-property.md @@ -112,4 +112,4 @@ const table = new pivot.Pivot("#pivot", { **Related article**: [Processing data with predicates](/guides/working-with-data#processing-data-with-predicates) -**Related sample**: [Pivot 2.0: Custom predicates](https://snippet.dhtmlx.com/mhymus00) +**Related sample**: [Pivot 2. Custom predicates](https://snippet.dhtmlx.com/mhymus00) diff --git a/docs/api/config/readonly-property.md b/docs/api/config/readonly-property.md index 9e2b504..f29b4ad 100644 --- a/docs/api/config/readonly-property.md +++ b/docs/api/config/readonly-property.md @@ -49,4 +49,4 @@ const table = new pivot.Pivot("#root", { }); ~~~ -**Related sample:** [Pivot 2.0. Readonly mode](https://snippet.dhtmlx.com/0k0mvycv) \ No newline at end of file +**Related sample:** [Pivot 2. Readonly mode](https://snippet.dhtmlx.com/0k0mvycv) \ No newline at end of file diff --git a/docs/api/config/tableshape-property.md b/docs/api/config/tableshape-property.md index 6fcdcdc..c9ac64a 100644 --- a/docs/api/config/tableshape-property.md +++ b/docs/api/config/tableshape-property.md @@ -108,8 +108,10 @@ const table = new pivot.Pivot("#root", { ~~~ **Related samples:** -- [Pivot 2.0: Tree mode](https://snippet.dhtmlx.com/6ylkoukn) -- [Pivot 2.0. Frozen (fixed) columns](https://snippet.dhtmlx.com/lahf729o) -- [Pivot 2.0. Set row, header, footer height and all columns width](https://snippet.dhtmlx.com/x46uyfy9) + +- [Pivot 2. Tree mode](https://snippet.dhtmlx.com/6ylkoukn) +- [Pivot 2. Frozen (fixed) columns](https://snippet.dhtmlx.com/lahf729o) +- [Pivot 2. Set row, header, footer height and all columns width](https://snippet.dhtmlx.com/x46uyfy9) +- [Pivot 2. Clean rows](https://snippet.dhtmlx.com/rwwhgv2w?tag=pivot) **Related article**: [Configuration](/guides/configuration) diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index f8805f9..005cc1c 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -635,5 +635,7 @@ In this snippet you can see how to apply templates to the Pivot cells: **Related samples:** -- [Pivot 2.0: Sorting](https://snippet.dhtmlx.com/j7vtief6) -- [Pivot 2.0. Expand and collapse all rows](https://snippet.dhtmlx.com/i4mi6ejn) +- [Pivot 2. Sorting](https://snippet.dhtmlx.com/j7vtief6) +- [Pivot 2. Expand and collapse all rows](https://snippet.dhtmlx.com/i4mi6ejn) +- [Pivot 2. Frozen(fixed) columns on the left and right](https://snippet.dhtmlx.com/lahf729o) +- [Pivot 2. Custom frozen (fixed) columns (your number)](https://snippet.dhtmlx.com/53erlmgp) diff --git a/docs/guides/loading-data.md b/docs/guides/loading-data.md index e2bd328..1b055c2 100644 --- a/docs/guides/loading-data.md +++ b/docs/guides/loading-data.md @@ -268,8 +268,8 @@ In this snippet you can see how to load JSON and CSV data: **Related samples:** -- [Pivot 2.0: Date format](https://snippet.dhtmlx.com/shn1l794) -- [Pivot 2.0: Different datasets](https://snippet.dhtmlx.com/6xtqge4i) -- [Pivot 2.0. Large dataset](https://snippet.dhtmlx.com/e6qwqrys) +- [Pivot 2. Date format](https://snippet.dhtmlx.com/shn1l794) +- [Pivot 2. Different datasets](https://snippet.dhtmlx.com/6xtqge4i) +- [Pivot 2. Large dataset](https://snippet.dhtmlx.com/e6qwqrys) **Related articles**: [Date formatting](/guides/localization#date-formatting) \ No newline at end of file diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index eda1362..4cd6fe8 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -214,4 +214,8 @@ In this snippet you can see how to apply a custom style to Pivot -**Related sample**: [Pivot 2.0. Min/max and custom marks for cells (conditional format)](https://snippet.dhtmlx.com/4cm4asbd) +**Related samples**: + +- [Pivot 2. Styling (custom CSS) for total column](https://snippet.dhtmlx.com/9lkdbzmm) +- [Pivot 2. Min/max and custom marks for cells (conditional format)](https://snippet.dhtmlx.com/4cm4asbd) +- [Pivot 2. Alternate row color (striped rows, zebra-striping)](https://snippet.dhtmlx.com/0cm0uko2) diff --git a/docs/guides/working-with-data.md b/docs/guides/working-with-data.md index e8615b8..d0adc8c 100644 --- a/docs/guides/working-with-data.md +++ b/docs/guides/working-with-data.md @@ -574,5 +574,6 @@ In this snippet you can see how to apply custom maths operations: **Related samples:** -- [Pivot 2.0: Grand total for columns and rows](https://snippet.dhtmlx.com/f0ag0t9t) -- [Pivot 2.0. Dataset with aliases](https://snippet.dhtmlx.com/7vc68rqd) +- [Pivot 2. Grand total for columns and rows](https://snippet.dhtmlx.com/f0ag0t9t) +- [Pivot 2. Dataset with aliases](https://snippet.dhtmlx.com/7vc68rqd) +- [Pivot 2. External filter](https://snippet.dhtmlx.com/s7tc9g4z) From 91fabdbe9fc7c0de7746ee0aa84b7e451484b7ff Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Wed, 16 Apr 2025 15:54:47 +0300 Subject: [PATCH 21/53] [update] colWidth renamed to columnWidth, whats_new updated --- docs/api/config/columnshape-property.md | 2 +- docs/api/config/tableshape-property.md | 4 ++-- docs/api/events/render-table-event.md | 2 +- docs/guides/configuration.md | 5 +++-- docs/news/whats-new.md | 7 +++++-- 5 files changed, 12 insertions(+), 8 deletions(-) diff --git a/docs/api/config/columnshape-property.md b/docs/api/config/columnshape-property.md index 70ce62f..f864244 100644 --- a/docs/api/config/columnshape-property.md +++ b/docs/api/config/columnshape-property.md @@ -36,7 +36,7 @@ columnShape?: { - `autoWidth` - (optional) an object that defines how column width should be calculated automatically. The default configuration uses 20 rows, and the width is calculated based on the header and data, with each field analyzed only once. The object parameters are the following: - `columns` - (optional) an object where each key is a field id and the boolean value defines whether column width should be calculated automatically - `auto` - (required) if set to **header**, adjusts the width to the header text; if set to **data**, adjusts the width to the cell with the widest content; if set to **true**, the width is adjusted to the content of both headers and cell. - If autowidth is set to **false**, the `width` value is set or the value of the `colWidth` from the [`tableShape`](/api/config/tableshape-property) property is applied. + If autowidth is set to **false**, the `width` value is set or the value of the `columnWidth` from the [`tableShape`](/api/config/tableshape-property) property is applied. - `maxRows` - (optional) the number of rows to be processed for the autoWidth calculation - `firstOnly` - (optional) if set to **true** (default), each field of the same data is analyzed only once to calculate the column width; in case of multiple columns based on the same data (e.g., the *oil* field with the *count* operation and the *oil* field with the *sum* operation), only data in the first one will be analyzed and the others will inherit this width diff --git a/docs/api/config/tableshape-property.md b/docs/api/config/tableshape-property.md index c9ac64a..e1cfef4 100644 --- a/docs/api/config/tableshape-property.md +++ b/docs/api/config/tableshape-property.md @@ -30,7 +30,7 @@ tableShape?: { sizes?: { rowHeight?: number, headerHeight?: number, - colWidth?: number, + columnWidth?: number, footerHeight?: number }, tree?:boolean, @@ -54,7 +54,7 @@ tableShape?: { - `rowHeight` - (optional) the row height in the Pivot table in pixels; the default value is 34 - `headerHeight` - (optional) the header height in pixels; the default value is 30 - `footerHeight` - (optional) the footer height in pixels; the default value is 30 - - `colWidth` - (optional) the column width in pixels; the default value is 150 + - `columnWidth` - (optional) the column width in pixels; the default value is 150 - `cellStyle` - (optional) a function that applies a custom style to a cell; the function has the next parameters: - `field` - (required) a string representing the field name for which the style is applied - `value` - (required) the value of the cell (the actual data for that particular row and column) diff --git a/docs/api/events/render-table-event.md b/docs/api/events/render-table-event.md index 0f636c8..2c491c0 100644 --- a/docs/api/events/render-table-event.md +++ b/docs/api/events/render-table-event.md @@ -45,7 +45,7 @@ The callback of the action takes the `config` object with the following paramete - `template` - (optional) the template that is defined via the [`tableShape`](/api/config/tableshape-property) property - `data` - (optional) an array of objects with data for the table; each object represents a row - `footer` - (optional) if it's set to **true**, the table footer is displayed at the bottom of the table; it's set to **false** and invisible by default -- `sizes` - (optional) an object with table sizes settings, namely, colWidth, footerHeight, headerHeight, rowHeight +- `sizes` - (optional) an object with table sizes settings, namely, columnWidth, footerHeight, headerHeight, rowHeight - `split` - (optional) the number of columns to be fixed from the left during the scrolling process - `tree` - (optional) the boolean value with the tree mode setting (**true** if the tree mode is enabled) - `cellStyle` - (optional) an object where each key is the field id and the value is a function that returns a string. All columns based on the specified field will have the related template applied. diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 005cc1c..8a8279a 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -40,7 +40,7 @@ const sizes = { rowHeight: 34, headerHeight: 30, footerHeight: 30, - colWidth: 150 + columnWidth: 150 }; ~~~ @@ -55,7 +55,7 @@ const table = new pivot.Pivot("#root", { rowHeight: 44, headerHeight: 60, footerHeight: 30, - colWidth: 170 + columnWidth: 170 } }, config: { @@ -639,3 +639,4 @@ In this snippet you can see how to apply templates to the Pivot cells: - [Pivot 2. Expand and collapse all rows](https://snippet.dhtmlx.com/i4mi6ejn) - [Pivot 2. Frozen(fixed) columns on the left and right](https://snippet.dhtmlx.com/lahf729o) - [Pivot 2. Custom frozen (fixed) columns (your number)](https://snippet.dhtmlx.com/53erlmgp) + diff --git a/docs/news/whats-new.md b/docs/news/whats-new.md index 119c27e..e250959 100644 --- a/docs/news/whats-new.md +++ b/docs/news/whats-new.md @@ -15,10 +15,9 @@ Released on ... ### New functionality - [Ability to freeze columns on the right](/guides/configuration/#freezing-columns) -- [Numbers are formatted](/guides/localization/#number-formatting) according to the current locale with possibility to define custom number formats within templates +- [Numbers are formatted](/guides/localization/#number-formatting) according to the current locale with possibility to define custom number formats within templates. `format` added to the [`fields`](/api/config/fields-property) property - [Ability to change the number alignment in a cell](/guides/stylization/#aligning-numbers-in-a-cell) - [Ability to style cells](/guides/stylization/#cell-style) -- `format` added to the [`fields`](/api/config/fields-property) property - Text fields and numbers are exported as they are seen in grid cells. If a template is applied to a cell, the rendered value is exported. - Cell navigation with a focus frame @@ -28,6 +27,10 @@ Released on ... - Values are converted to numbers during export - Predicate template is not applied to rows/columns +### Breaking changes + +- `colWidth` parameter of the `sizes` object in the `tableShape` property renamed to `columnWidth` + ## Version 2.0.3 Released on November 29, 2024 From a3634857d7cea28c39de0ecb4b8b3a6b4a4ba611 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Fri, 18 Apr 2025 19:32:48 +0300 Subject: [PATCH 22/53] [update] exporting_data updated --- docs/guides/exporting-data.md | 78 +++++++++++++++++++++++++---------- 1 file changed, 57 insertions(+), 21 deletions(-) diff --git a/docs/guides/exporting-data.md b/docs/guides/exporting-data.md index bcf3f14..777bde3 100644 --- a/docs/guides/exporting-data.md +++ b/docs/guides/exporting-data.md @@ -10,35 +10,74 @@ To export the table data to the XLSX or CSV format, it's necessary to get access ```js "export": ({ - options: {}, - result: any + options: { + format: "csv" | "xlsx"; + fileName?: string; + sheetName?: string; + header?: boolean; + footer?: boolean; + download?: boolean; + + /* XLSX settings*/ + styles?: boolean | { + header?: { + fontWeight?: "bold"; + color?: string; + background?: string; + align?: "left"|"right"|"center"; + borderBottom?: string; + borderRight?: string; + } + lastHeaderCell?: { /* same as header */ }; + cell?: { /* same as header */ }; + firstFooterCell?: { /* same as header */ }; + footer?: {/* same as header */}; + } + cellTemplate?: (value: any, row: any, column: object ) + => string | null; + headerCellTemplate?: (text: string, cell: object, column: object, type: "header"| "footer") + => string | null; + cellStyle?: (value: any, row: any, column: object) + => { format: string; align: "left"|"right"|"center" } | null; + headerCellStyle?: (text: string, cell: object, column: object, type: "header"| "footer") + => { format: string; align: "left"|"right"|"center" } | null; + + /* CSV settings */ + rows: string; + cols: string; + }, + result?: any; }) => boolean|void; ``` The `export` action of the Table widget has the next parameters that you can configure to your needs: - `options` - an object with the export options; options differ depending on the format type: + - `header` (boolean) - (optional) defines if a header should be exported (**true** by default) + - `footer` (boolean) - (optional) defines if a footer should be exported (**true** by default) + - `download` (boolean) - (optional) defines whether to download a file. **true** is set by default. if set to **false**, the file will not be downloaded, CSV data (Blob) will be available as `ev.result` - `format` (string) - (optional) the export format that can be "csv" or "xlsx" **Options for "xlsx" format:** - :::info + :::note By default, for the "xlsx" format, date and number fields are exported as raw values with default format or the format defined via the [`fields`](/api/config/fields-property) property. But if a template is defined for a field (see the [`tableShape`](/api/config/tableshape-property) property), it exports the rendered value defined by that template. In case both the template and `format` are set, the template settings will override the format ones. ::: - `fileName` (string) - (optional) a name of .xlsx file ("data" by default) - `sheetName` (string) - a name of Excel sheet ( "data" by default) - - `styles` - custom styles for cells in the header, body, and footer. Can be configured using a hash of style properties: - ~~~ - header: { /* style properties for header cells */ } - // Names of style properties should be written in camelCase, for example: - //header: { borderBottom: "0.5px solid #dfdfdf", borderRight: "0.5px solid #dfdfdf" }, - lastHeaderCell: { /* style properties for the last row of header cells ( optional ) */ }, - cell: { /* style properties for body cells */ }, - firstFooterCell: { /*style properties for the first row of footer cells ( optional ) */ }, - footer: { /* style properties for footer cells */ } - ~~~ - If `styles` is set to **false**, grid will be exported without any styling. - - `cellTemplate` - a function to customize the export value of each cell. It takes the value, row, and column objects as parameters and returns the custom value to be exported: `(value, rowObj, columnObj) => string` - - `headerCellTemplate` - a function that customizes the value of a header or footer cell during export. It is called with the text, header cell object, column object, and cell type ("header" or "footer"). This allows users to modify the exported header/footer values. `(text, headerCell, columnObj, type: "header"| "footer") => string` - - `cellStyle` - a function that allows customizing the style and format of individual cells during export. It takes the value, row, and column objects as parameters and should return an object with style properties (e.g., alignment or format): `(value, rowObj, columnObj) => any | null` - - `headerCellStyle` - similar to cellStyle, but specifically for the header and footer cells. This function takes the text, header cell object, column object, and type ("header" or "footer") and returns style properties: `(text, headerCell, columnObj, type: "header"| "footer") => any | null` + - `styles` (boolean or object) - if set to **false**, grid will be exported without any styling; an object includes parameters for custom styles for cells in the header, body, and footer. Can be configured using a hash of style properties: + - header - style properties for header cells with the next properties: + - `fontWeight` (string) - (optional) can set to "bold" or if not set, the font will be normal + - `color` (string) - (optional) text color in header + - `background` (string) - (optional) background color for header + - `align` - (optional) text alignment that can be "left"|"right"|"center"; if not set, alignment set in Excel will be applied + - `borderBottom` (string) - (optional) the style of the bottom border + - `borderRight` (string) - (optional) the style of the right border (e.g., *borderRight: "0.5px solid #dfdfdf"* ) + - lastHeaderCell - style properties for the last row of header cells; properties are the same as for *header* + - cell - style properties for body cells; properties are the same as for *header* + - firstFooterCell - style properties for the first row of footer cells; properties are the same as for *header* + - footer - style properties for footer cells; properties are the same as for *header* + - `cellTemplate` - a function to customize the export value of each cell. It takes the value, row, and column objects as parameters and returns the custom value to be exported; + - `headerCellTemplate` - a function that customizes the value of a header or footer cell during export. It is called with the text, header cell object, column object, and cell type ("header" or "footer"). This allows users to modify the exported header/footer values. + - `cellStyle` - a function that allows customizing the style and format of individual cells during export. It takes the value, row, and column objects as parameters and should return an object with style properties (e.g., alignment or format) + - `headerCellStyle` - similar to cellStyle, but specifically for the header and footer cells. This function takes the text, header cell object, column object, and type ("header" or "footer") and returns style properties - `header` (boolean) - (optional) defines if a header should be exported (**true** by default) - `footer` (boolean) - (optional) defines if a footer should be exported (**true** by default) - `download` (boolean) - (optional) defines whether to download a file. **true** is set by default. if set to **false**, the file will not be downloaded, Excel data (Blob) will be available as `ev.result` @@ -46,9 +85,6 @@ The `export` action of the Table widget has the next parameters that you can con - `fileName` (string) - (optional) a file name ("data" by default) - `rows` (string) - (optional) rows delimiter, "\n" by default - `cols` (string) - (optional) columns delimiter, "\t" by default - - `header` (boolean) - (optional) defines if a header should be exported (**true** by default) - - `footer` (boolean) - (optional) defines if a footer should be exported (**true** by default) - - `download` (boolean) - (optional) defines whether to download a file. **true** is set by default. if set to **false**, the file will not be downloaded, CSV data (Blob) will be available as `ev.result` - `result` - the exported data result (usually Blob or file depending on the `download` option) In the example below we get access to the Table instance and trigger the `export`action on the button click using the [`api.exec()`](/api/internal/exec-method) method. From dc3669c5ceb7df71c9151cdb235658dbb68b40ae Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Fri, 18 Apr 2025 19:33:24 +0300 Subject: [PATCH 23/53] [update] exporting_data updated --- docs/guides/exporting-data.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/guides/exporting-data.md b/docs/guides/exporting-data.md index 777bde3..f46fe4b 100644 --- a/docs/guides/exporting-data.md +++ b/docs/guides/exporting-data.md @@ -49,6 +49,7 @@ To export the table data to the XLSX or CSV format, it's necessary to get access result?: any; }) => boolean|void; ``` + The `export` action of the Table widget has the next parameters that you can configure to your needs: - `options` - an object with the export options; options differ depending on the format type: @@ -64,7 +65,7 @@ The `export` action of the Table widget has the next parameters that you can con - `sheetName` (string) - a name of Excel sheet ( "data" by default) - `styles` (boolean or object) - if set to **false**, grid will be exported without any styling; an object includes parameters for custom styles for cells in the header, body, and footer. Can be configured using a hash of style properties: - header - style properties for header cells with the next properties: - - `fontWeight` (string) - (optional) can set to "bold" or if not set, the font will be normal + - `fontWeight` (string) - (optional) can be set to "bold" or if not set, the font will be normal - `color` (string) - (optional) text color in header - `background` (string) - (optional) background color for header - `align` - (optional) text alignment that can be "left"|"right"|"center"; if not set, alignment set in Excel will be applied From 1f1e5ffd7d8520a129003ffebd1e86fbc87f7f01 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Fri, 18 Apr 2025 21:40:32 +0300 Subject: [PATCH 24/53] [update] format desc updated --- docs/api/config/fields-property.md | 2 +- docs/guides/localization.md | 30 +++++++++++++++++++++++++----- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/docs/api/config/fields-property.md b/docs/api/config/fields-property.md index da7ff0e..336bd9d 100644 --- a/docs/api/config/fields-property.md +++ b/docs/api/config/fields-property.md @@ -37,7 +37,7 @@ Each object in the `fields` array should have the following properties: - `format` - (optional) allows customizing the format of numbers and dates in a field; the format will be also applied during [export](/guides/exporting-data) - `string` - (optional) the format for dates (by default, Pivot uses `dateFormat` from locale) - `boolean` - (optional) if set to **false**, a number is displayed as is, without any formatting - - `numberFormatOptions` - (optional) an object with options for formatting: + - `numberFormatOptions` - (optional) an object with options for formatting numeric fields; by default, numbers will be shown with a maximum of 3 decimal digits and group separation for the integer part is applied. - `minimumIntegerDigits`(number) - (optional) the minimum number of integer (for example, if the value is set to 2, the number 1 will be shown as "01"); the default is 1; - `minimumFractionDigits`(number) - (optional) the minimum number of fraction digits to use (for example, if the value is set to 2, the number 10.5 will be shown as "10.50"); the default is 1; - `maximumFractionDigits`(number) - (optional) the maximum number of fraction digits to use (for example, if the value is set to 2, the number 10.3333... will be shown as "10.33"); the default is 3; diff --git a/docs/guides/localization.md b/docs/guides/localization.md index a42a82b..94a3d1e 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -236,7 +236,7 @@ const table = new pivot.Pivot("#root", { In case you need to set format to a specific field, use the template parameter of the [`tableShape`](/api/config/tableshape-property) or [`headerShape`](/api/config/headershape-property) ::: -## Date and time format specification +## Date and time format specification Pivot uses the following characters for setting the date and time format: @@ -271,10 +271,6 @@ To present the 20th of June, 2024 with the exact time as *2024-09-20 16:47:08.12 By default, all fields with the *number* type are localized according to the locale (the value in the `lang` field of the locale). The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) object enables language-sensitive number formatting. In case you need to disable number formatting of some fields, add the template via the [`tableShape`](/api/config/tableshape-property) property or set the *text* type for this field instead of the *number* type. -:::info -Number and date formats can also be set via the `format` parameter of the [`fields`](/api/config/fields-property) property. If both the template (via the [`tableShape`](/api/config/tableshape-property) property) and format are set, the template will override the format settings. -::: - Example: ~~~jsx @@ -322,6 +318,30 @@ Example: document.head.appendChild(style); ~~~ +## Applying custom format to numeric and date fields + +You can apply a custom format to the date and numeric fields using the `format` parameter of the [`fields`](/api/config/fields-property) property. + +You can add text before and after numeric values using the `prefix` and `suffix` parameters. For example, to convert the value *12.345* to "12.35 EUR", `format` should contain the " EUR" suffix and maximumFractionDigits of 2: + +~~~js +const fields = [ + { id: "sales", type: "number", format: {suffix: " EUR", maximumFractionDigits: 2}}, +]; +~~~ + +By default, the format for numeric values limits fraction digits to 3 and applies group separation for the integer part. The `format` parameter allows you to display numeric values without group separation (for example, years): + +~~~js +const fields = [ + { id: "year", label: "Year", type: "number", format: false}, +]; +~~~ + +:::info +If both the template (via the [`tableShape`](/api/config/tableshape-property) property) and `format` are set, the template will override the format settings. +::: + ## Example In this snippet you can see how to switch between several locales: From 374ba7d4c2d263d9a66218baa1e1757aec21c267 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Tue, 22 Apr 2025 19:02:31 +0300 Subject: [PATCH 25/53] [update] draft description added to render-table and configuration guide to document 1980 task in tracker --- docs/api/events/render-table-event.md | 52 +++++++++++----- docs/guides/configuration.md | 89 ++++++++++++++++++++++++++- docs/guides/localization.md | 4 +- 3 files changed, 128 insertions(+), 17 deletions(-) diff --git a/docs/api/events/render-table-event.md b/docs/api/events/render-table-event.md index 2c491c0..bc7f370 100644 --- a/docs/api/events/render-table-event.md +++ b/docs/api/events/render-table-event.md @@ -17,15 +17,21 @@ It allows you to alter the final table configuration on the fly or prevent the r ~~~jsx "render-table": ({ config: { - columns?: [], - data: [], + columns?: any[], + data?: any[], footer?: boolean, - sizes: {}, + sizes?: { + rowHeight?: number, + headerHeight?: number, + columnWidth?: number, + footerHeight?: number + }, split?: { - left?: number + left?: number; + right?: number; }, tree?: boolean, - cellStyle?: (row: any, col: any) => string + cellStyle?: (row: any, col: any) => string, } }) => boolean | void; ~~~ @@ -35,19 +41,37 @@ It allows you to alter the final table configuration on the fly or prevent the r The callback of the action takes the `config` object with the following parameters: - `columns` - (optional) columns array with the next parameters for each object: - - `id` (number) - (optional) the id of a column - - `header`- (optional) an object with header settings: - - `text` (string) - (optional) a header label - - `rowspan` (number) - (optional) the number of rows a header should span - - `colspan` (number) - (optional) the number of columns a header should span + - `cell` (any) - (optional) a template with the cell content (и ссылка на статью про cell templates) + - `fields` (array) - (optional) defines fields in the hierarchical column in the tree mode. Reflects fields displayed in this column on different levels + - `method` (string) - (optional) a method, if defined for a field in this column + - `methods` (array) - (optional) defines methods applied to fields in the hierarchical column in the tree mode + - `format` (string or object) - date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) + - `isNumeric` (boolean) - (optional) defines whether a column contains numeric values + - `isTotal` (boolean) - (optional) defines whether it is a total column + - `id` (number) - (optional) the id of a column + - `area` (string) - (optional) an area where the column is rendered: "rows", "columns", "values" + - `header`- (optional) an array of header cells with the next properties for each cell: + - `text` (string) - (optional) cell text, or formatted value, or processed with a predicate template + - `rowspan` (number) - (optional) the number of rows a header should span + - `colspan` (number) - (optional) the number of columns a header should span + - `value` (any) - raw value, if a cell belongs to "columns" area + - `field` (string) - field, which value is displayed, if a cell belongs to "columns" area + - `method` (string) - field predicate, if a cell belongs to "columns" area and predicate is defined + - `format` (string or object) - date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) - `footer` - (optional) a header label or an object with footer settings which are the same as the header settings - `field` - (optional) it's a string which is the id of a field - `template` - (optional) the template that is defined via the [`tableShape`](/api/config/tableshape-property) property -- `data` - (optional) an array of objects with data for the table; each object represents a row +- `data` - (optional) an array of objects with data for the table; each object represents a row: + - `id` (number) - row id + - `values` (array) - an array with row data + - `open` (boolean)- (optional) branch state + - `$level` (boolean)- (optional) branch index - `footer` - (optional) if it's set to **true**, the table footer is displayed at the bottom of the table; it's set to **false** and invisible by default - `sizes` - (optional) an object with table sizes settings, namely, columnWidth, footerHeight, headerHeight, rowHeight -- `split` - (optional) the number of columns to be fixed from the left during the scrolling process -- `tree` - (optional) the boolean value with the tree mode setting (**true** if the tree mode is enabled) +- `split` (object) - (optional) an object with the next properties: + - `left` (number) - the number of fixed columns from the left + - `right` (number) - the number of fixed columns from the right +- `tree` - (optional) defines if the tree mode is enabled (**true** if enabled) - `cellStyle` - (optional) an object where each key is the field id and the value is a function that returns a string. All columns based on the specified field will have the related template applied. :::info @@ -149,4 +173,4 @@ function closeAll() { See also how to configure the split feature using the `render-table` event: [Freezing columns](/guides/configuration#freezing-columns). -**Related sample:** [Pivot 2.0. Custom frozen (fixed) columns (your number)](https://snippet.dhtmlx.com/53erlmgp) +**Related sample:** [Pivot 2. Custom frozen (fixed) columns (your number)](https://snippet.dhtmlx.com/53erlmgp) diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 8a8279a..5264f6d 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -129,6 +129,8 @@ const table = new pivot.Pivot("#root", { ## Applying templates to cells +### Adding templates via tableShape + To set a template to cells, use the `templates` parameter of the [`tableShape`](/api/config/tableshape-property) property. It's an object where each key is a field id and the value is a function that returns a string. All columns based on the specified field will have the related template applied. In the example below we apply the template to the *score* values to display 2 digits after the decimal point for these values and we add the "€" sign to the *price* values. @@ -166,16 +168,60 @@ const table = new pivot.Pivot("#root", { }); ~~~ +### Adding a templates via the template helper + +You can also define HTML templates using the `pivot.template` helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `cell` parameter inside `columns` array. Define the template via the `pivot.template` helper. + +The example shows how you can add icons to body cells based on their field (id, user_score): + +~~~js +function cellTemplate(value, method, row, column) { + const field = column.fields ? column.fields[row.$level] : column.field; + + if (field === "id") { + return idTemplate(value); + } + + if (field === "user_score") { + return scoreTemplate(value); + } + + return value; +} + +function idTemplate(value) { + const name = value?.toString().split("-")[0]; + return ` ${value}`; +} + +function scoreTemplate(value) { + return ` ${value}`; +} + +widget.api.intercept("render-table", ({ config: tableConfig }) => { + tableConfig.columns = tableConfig.columns.map((c) => { + if (c.area === "rows") { + // Apply a template to body cells in row fields + c.cell = pivot.template(({ value, method, row, column }) => cellTemplate(value, method, row, column)); + } + return c; + }); +}); +~~~ + ## Applying templates to headers +### Adding templates via headerShape + To define the format of text in headers, apply the `template` parameter of the [`headerShape`](/api/config/headershape-property) property. The parameter is the function that: + - takes the field id, label and sublabel (the name of a method if any is applied) - returns the processed value A default template is as follows: *template: (label, id, subLabel) => label + (subLabel ? `(${subLabel})` : "")*. By default, for the fields applied as values the label and method are shown (e.g., *Oil(count)*). If no other template is applied to columns, the value of the `label` parameter is displayed. If any [`predicates`](/api/config/predicates-property) template is applied, it will override the template of the `headerShape` property. -### Example +Example In the example below for the **values** fields the header will display the method name (subLabel) and the label: @@ -205,6 +251,47 @@ const table = new pivot.Pivot("#root", { }); ~~~ +### Adding templates via the template helper + +You can also define HTML templates using the `pivot.template` helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `header` parameter inside `columns` array. Define the template via the `pivot.template` helper. + +The example below shows how to add icons to: + +- the row header labels based on the field name +- the column headers based on the value + +~~~jsx +function rowsHeaderTemplate(value, field) { + let icon = ""; + if (field === "id") icon = ""; + if (field === "user_score") icon = ""; + return `${value} ${icon}`; +} + +function statusTemplate(value) { + let icon = ""; + if (value === "Up") icon = ""; + if (value === "Down") icon = ""; + return `${value} ${icon}`; +} + +widget.api.intercept("render-table", ({ config: tableConfig }) => { + tableConfig.columns = tableConfig.columns.map((c) => { + if (c.area === "rows") { + // Apply a template to the first header row of row fields + c.header[0].cell = pivot.template(({ value, field }) => rowsHeaderTemplate(value, field)); + } else { + // For headers in columns (like "status") + const headerCell = c.header.find((h) => h.field === "status"); + if (headerCell) { + headerCell.cell = pivot.template(({ value }) => statusTemplate(value)); + } + } + return c; + }); +}); +~~~ + ## Making columns collapsible It's possible to collapse/expand columns that are under one header. To make columns collapsible, use the value of the `collapsible` parameter of the [`headerShape`](/api/config/headershape-property) property by setting it to **true**. diff --git a/docs/guides/localization.md b/docs/guides/localization.md index 94a3d1e..5b3a469 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -326,7 +326,7 @@ You can add text before and after numeric values using the `prefix` and `suffix` ~~~js const fields = [ - { id: "sales", type: "number", format: {suffix: " EUR", maximumFractionDigits: 2}}, + { id: "sales", type: "number", format: {suffix: " EUR", maximumFractionDigits: 2}}, ]; ~~~ @@ -334,7 +334,7 @@ By default, the format for numeric values limits fraction digits to 3 and applie ~~~js const fields = [ - { id: "year", label: "Year", type: "number", format: false}, + { id: "year", label: "Year", type: "number", format: false}, ]; ~~~ From b68c26766f70ebb628700816eb239bfefd251aa3 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Wed, 23 Apr 2025 18:45:59 +0300 Subject: [PATCH 26/53] [update] template helper added --- docs/api/events/render-table-event.md | 2 +- docs/api/helpers/template.md | 84 +++++++++++++++++++++++++++ docs/guides/configuration.md | 10 ++-- sidebars.js | 15 +++++ 4 files changed, 104 insertions(+), 7 deletions(-) create mode 100644 docs/api/helpers/template.md diff --git a/docs/api/events/render-table-event.md b/docs/api/events/render-table-event.md index bc7f370..582ded1 100644 --- a/docs/api/events/render-table-event.md +++ b/docs/api/events/render-table-event.md @@ -41,7 +41,7 @@ It allows you to alter the final table configuration on the fly or prevent the r The callback of the action takes the `config` object with the following parameters: - `columns` - (optional) columns array with the next parameters for each object: - - `cell` (any) - (optional) a template with the cell content (и ссылка на статью про cell templates) + - `cell` (any) - (optional) a template with the cell content (please, refer to [Applying templates to cells](/guides/configuration/#applying-templates-to-cells)) - `fields` (array) - (optional) defines fields in the hierarchical column in the tree mode. Reflects fields displayed in this column on different levels - `method` (string) - (optional) a method, if defined for a field in this column - `methods` (array) - (optional) defines methods applied to fields in the hierarchical column in the tree mode diff --git a/docs/api/helpers/template.md b/docs/api/helpers/template.md new file mode 100644 index 0000000..71f85ad --- /dev/null +++ b/docs/api/helpers/template.md @@ -0,0 +1,84 @@ +--- +sidebar_label: template +title: template +description: You can learn about the Pivot template helper in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot. +--- + + draft + +## template + +### Description + +The `template` function allows applying a template to the table header and body cells. + +### Usage + +For body cells: + +~~~jsx +pivot.template({value, method, row, column}) => string; +~~~ + +For header cells: + +~~~jsx +pivot.template({text, field, method, cell, column}) => string; +~~~ + +### Parameters + +For body cells the function takes the next parameters: + +- `value` (any) - (required) raw cell value +- `method` (string) - (required) a method or predicate used for a column +- `row` - (required) an object with row data: + - `id` (number) - row id + - `values` (array) - an array with row data + - `open` (boolean)- (optional) branch state + - `$level` (boolean)- (optional) branch index +- `column` - (required) an object with column data: + - `cell` (any) - (optional) a template with the cell content (please, refer to [Applying templates to cells](/guides/configuration/#applying-templates-to-cells)) + - `fields` (array) - (optional) defines fields in the hierarchical column in the tree mode. Reflects fields displayed in this column on different levels + - `method` (string) - (optional) a method, if defined for a field in this column + - `methods` (array) - (optional) defines methods applied to fields in the hierarchical column in the tree mode + - `format` (string or object) - date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) + - `isNumeric` (boolean) - (optional) defines whether a column contains numeric values + - `isTotal` (boolean) - (optional) defines whether it is a total column + - `id` (number) - (optional) the id of a column + - `area` (string) - (optional) an area where the column is rendered: "rows", "columns", "values" + - `header`- (optional) an array of header cells with the next properties for each cell: + - `text` (string) - (optional) cell text, or formatted value, or processed with a predicate template + - `rowspan` (number) - (optional) the number of rows a header should span + - `colspan` (number) - (optional) the number of columns a header should span + - `value` (any) - raw value, if a cell belongs to "columns" area + - `field` (string) - field, which value is displayed, if a cell belongs to "columns" area + - `method` (string) - field predicate, if a cell belongs to "columns" area and predicate is defined + - `format` (string or object) - date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) + +For header cells the function parameters are the following: + +- `value` (any) - (required) raw cell value +- `method` (string) - (optional) a predicate used for a column +- `field` (string) - (optional) a field which value is displayed in a cell +- `cell` - (required) an object with cell data: + - `text` (string) - (optional) cell text, or formatted value, or processed with a predicate template + - `rowspan` (number) - (optional) the number of rows a header should span + - `colspan` (number) - (optional) the number of columns a header should span + - `value` (any) - raw value, if a cell belongs to "columns" area + - `field` (string) - field, which value is displayed, if a cell belongs to "columns" area + - `method` (string) - field predicate, if a cell belongs to "columns" area and predicate is defined + - `format` (string or object) - date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) +- `column` - (required) an object with column data (the same as for the body cell) + +### Example + +The snippet below shows how to define templates via the `pivot.template` helper. The helper is applied right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. The table's config is modified, namely the `cell` and `header` parameters inside `columns` array. + +The snippet demonstrates how you can add icons to: + +- body cells based on their field (id, user_score) (the template adds the flag and star icons) +- the header labels based on the field name (for example, if the field is "id", it adds the globe icon next to the header value) +- the column headers based on the value (colored arrow indicators are added) + + \ No newline at end of file diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 5264f6d..efdb811 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -168,11 +168,11 @@ const table = new pivot.Pivot("#root", { }); ~~~ -### Adding a templates via the template helper +### Adding a template via the template helper You can also define HTML templates using the `pivot.template` helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `cell` parameter inside `columns` array. Define the template via the `pivot.template` helper. -The example shows how you can add icons to body cells based on their field (id, user_score): +The example shows how you can add icons (star or flag icon) to body cells based on their field (id, user_score): ~~~js function cellTemplate(value, method, row, column) { @@ -221,8 +221,6 @@ To define the format of text in headers, apply the `template` parameter of the [ A default template is as follows: *template: (label, id, subLabel) => label + (subLabel ? `(${subLabel})` : "")*. By default, for the fields applied as values the label and method are shown (e.g., *Oil(count)*). If no other template is applied to columns, the value of the `label` parameter is displayed. If any [`predicates`](/api/config/predicates-property) template is applied, it will override the template of the `headerShape` property. -Example - In the example below for the **values** fields the header will display the method name (subLabel) and the label: ~~~jsx {19-22} @@ -257,8 +255,8 @@ You can also define HTML templates using the `pivot.template` helper. You need t The example below shows how to add icons to: -- the row header labels based on the field name -- the column headers based on the value +- the header labels based on the field name (for example, if the field is "id", it adds the globe icon next to the header value) +- the column headers based on the value (colored arrow indicators are added) ~~~jsx function rowsHeaderTemplate(value, field) { diff --git a/sidebars.js b/sidebars.js index e6d3041..a6aa24b 100644 --- a/sidebars.js +++ b/sidebars.js @@ -149,6 +149,21 @@ module.exports = { } ] }, + { + type: "category", + label: "Helpers", + collapsible: true, + collapsed: true, + link: { + type: 'generated-index', + }, + + items: [ + { + type: "doc", + id: "api/helpers/template", + + },]}, //start Framework integration { type: "category", From d766efa68ee0f23f0b16e8d46c5abaf86c5aa756 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Thu, 24 Apr 2025 13:30:04 +0300 Subject: [PATCH 27/53] [update] template helper info updated --- docs/api/events/render-table-event.md | 14 ++++++------- docs/api/helpers/template.md | 30 +++++++++++++-------------- docs/guides/configuration.md | 4 ++-- 3 files changed, 23 insertions(+), 25 deletions(-) diff --git a/docs/api/events/render-table-event.md b/docs/api/events/render-table-event.md index 582ded1..60de56e 100644 --- a/docs/api/events/render-table-event.md +++ b/docs/api/events/render-table-event.md @@ -41,29 +41,29 @@ It allows you to alter the final table configuration on the fly or prevent the r The callback of the action takes the `config` object with the following parameters: - `columns` - (optional) columns array with the next parameters for each object: + - `id` (number) - (required) the id of a column - `cell` (any) - (optional) a template with the cell content (please, refer to [Applying templates to cells](/guides/configuration/#applying-templates-to-cells)) - `fields` (array) - (optional) defines fields in the hierarchical column in the tree mode. Reflects fields displayed in this column on different levels - `method` (string) - (optional) a method, if defined for a field in this column - `methods` (array) - (optional) defines methods applied to fields in the hierarchical column in the tree mode - - `format` (string or object) - date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) + - `format` (string or object) - (required) date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) - `isNumeric` (boolean) - (optional) defines whether a column contains numeric values - `isTotal` (boolean) - (optional) defines whether it is a total column - - `id` (number) - (optional) the id of a column - `area` (string) - (optional) an area where the column is rendered: "rows", "columns", "values" - `header`- (optional) an array of header cells with the next properties for each cell: - `text` (string) - (optional) cell text, or formatted value, or processed with a predicate template - `rowspan` (number) - (optional) the number of rows a header should span - `colspan` (number) - (optional) the number of columns a header should span - - `value` (any) - raw value, if a cell belongs to "columns" area - - `field` (string) - field, which value is displayed, if a cell belongs to "columns" area - - `method` (string) - field predicate, if a cell belongs to "columns" area and predicate is defined + - `value` (any) - (required) raw value, if a cell belongs to "columns" area + - `field` (string) - (required) a field, which value is displayed, if a cell belongs to "columns" area + - `method` (string) - (required) the field predicate, if a cell belongs to "columns" area and predicate is defined - `format` (string or object) - date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) - `footer` - (optional) a header label or an object with footer settings which are the same as the header settings - `field` - (optional) it's a string which is the id of a field - `template` - (optional) the template that is defined via the [`tableShape`](/api/config/tableshape-property) property - `data` - (optional) an array of objects with data for the table; each object represents a row: - - `id` (number) - row id - - `values` (array) - an array with row data + - `id` (number) - (required) row id + - `values` (array) - (required) an array with row data - `open` (boolean)- (optional) branch state - `$level` (boolean)- (optional) branch index - `footer` - (optional) if it's set to **true**, the table footer is displayed at the bottom of the table; it's set to **false** and invisible by default diff --git a/docs/api/helpers/template.md b/docs/api/helpers/template.md index 71f85ad..d397fff 100644 --- a/docs/api/helpers/template.md +++ b/docs/api/helpers/template.md @@ -4,8 +4,6 @@ title: template description: You can learn about the Pivot template helper in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot. --- - draft - ## template ### Description @@ -23,7 +21,7 @@ pivot.template({value, method, row, column}) => string; For header cells: ~~~jsx -pivot.template({text, field, method, cell, column}) => string; +pivot.template({value, field, method, cell, column}) => string; ~~~ ### Parameters @@ -33,28 +31,28 @@ For body cells the function takes the next parameters: - `value` (any) - (required) raw cell value - `method` (string) - (required) a method or predicate used for a column - `row` - (required) an object with row data: - - `id` (number) - row id - - `values` (array) - an array with row data + - `id` (number) - (required) row id + - `values` (array) - (required) an array with row data - `open` (boolean)- (optional) branch state - `$level` (boolean)- (optional) branch index - `column` - (required) an object with column data: + - `id` (number) - (required) the id of a column - `cell` (any) - (optional) a template with the cell content (please, refer to [Applying templates to cells](/guides/configuration/#applying-templates-to-cells)) - `fields` (array) - (optional) defines fields in the hierarchical column in the tree mode. Reflects fields displayed in this column on different levels - `method` (string) - (optional) a method, if defined for a field in this column - `methods` (array) - (optional) defines methods applied to fields in the hierarchical column in the tree mode - - `format` (string or object) - date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) + - `format` (string or object) - (required) date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) - `isNumeric` (boolean) - (optional) defines whether a column contains numeric values - `isTotal` (boolean) - (optional) defines whether it is a total column - - `id` (number) - (optional) the id of a column - `area` (string) - (optional) an area where the column is rendered: "rows", "columns", "values" - `header`- (optional) an array of header cells with the next properties for each cell: - `text` (string) - (optional) cell text, or formatted value, or processed with a predicate template - `rowspan` (number) - (optional) the number of rows a header should span - `colspan` (number) - (optional) the number of columns a header should span - - `value` (any) - raw value, if a cell belongs to "columns" area - - `field` (string) - field, which value is displayed, if a cell belongs to "columns" area - - `method` (string) - field predicate, if a cell belongs to "columns" area and predicate is defined - - `format` (string or object) - date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) + - `value` (any) - (required) raw value, if a cell belongs to "columns" area + - `field` (string) - (required) a field, which value is displayed, if a cell belongs to "columns" area + - `method` (string) - (required) a field predicate, if a cell belongs to "columns" area and predicate is defined + - `format` (string or object) - (required) date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) For header cells the function parameters are the following: @@ -65,15 +63,15 @@ For header cells the function parameters are the following: - `text` (string) - (optional) cell text, or formatted value, or processed with a predicate template - `rowspan` (number) - (optional) the number of rows a header should span - `colspan` (number) - (optional) the number of columns a header should span - - `value` (any) - raw value, if a cell belongs to "columns" area - - `field` (string) - field, which value is displayed, if a cell belongs to "columns" area - - `method` (string) - field predicate, if a cell belongs to "columns" area and predicate is defined - - `format` (string or object) - date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) + - `value` (any) - (required) raw value, if a cell belongs to "columns" area + - `field` (string) - (required) a field, which value is displayed, if a cell belongs to "columns" area + - `method` (string) - (required) a field predicate, if a cell belongs to "columns" area and predicate is defined + - `format` (string or object) - (required) date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) - `column` - (required) an object with column data (the same as for the body cell) ### Example -The snippet below shows how to define templates via the `pivot.template` helper. The helper is applied right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. The table's config is modified, namely the `cell` and `header` parameters inside `columns` array. +The snippet below shows how to define templates via the `pivot.template` helper. The helper is applied right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. The snippet demonstrates how you can add icons to: diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index efdb811..5c72d9e 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -170,7 +170,7 @@ const table = new pivot.Pivot("#root", { ### Adding a template via the template helper -You can also define HTML templates using the `pivot.template` helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `cell` parameter inside `columns` array. Define the template via the `pivot.template` helper. +You can also define HTML templates using the [`pivot.template`](/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `columns` array. Define the template via the `pivot.template` helper. The example shows how you can add icons (star or flag icon) to body cells based on their field (id, user_score): @@ -251,7 +251,7 @@ const table = new pivot.Pivot("#root", { ### Adding templates via the template helper -You can also define HTML templates using the `pivot.template` helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `header` parameter inside `columns` array. Define the template via the `pivot.template` helper. +You can also define HTML templates using the [`pivot.template`](/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `header` parameter in the `columns` array. Define the template via the `pivot.template` helper. The example below shows how to add icons to: From 7078a4d604aed915021f9907a0f8dec92d115436 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Thu, 24 Apr 2025 14:15:31 +0300 Subject: [PATCH 28/53] [update] links fixed --- docs/api/events/render-table-event.md | 2 ++ docs/api/helpers/template.md | 9 ++++++++- docs/guides/configuration.md | 4 ++-- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/docs/api/events/render-table-event.md b/docs/api/events/render-table-event.md index 60de56e..387f2e7 100644 --- a/docs/api/events/render-table-event.md +++ b/docs/api/events/render-table-event.md @@ -173,4 +173,6 @@ function closeAll() { See also how to configure the split feature using the `render-table` event: [Freezing columns](/guides/configuration#freezing-columns). +**Related article:** [pivot.template helper](/api/helpers/template) + **Related sample:** [Pivot 2. Custom frozen (fixed) columns (your number)](https://snippet.dhtmlx.com/53erlmgp) diff --git a/docs/api/helpers/template.md b/docs/api/helpers/template.md index d397fff..9378d16 100644 --- a/docs/api/helpers/template.md +++ b/docs/api/helpers/template.md @@ -79,4 +79,11 @@ The snippet demonstrates how you can add icons to: - the header labels based on the field name (for example, if the field is "id", it adds the globe icon next to the header value) - the column headers based on the value (colored arrow indicators are added) - \ No newline at end of file + + + +**Related articles:** + +- [`render-table` event](/api/events/render-table-event) +- [Applying templates to cells](/guides/configuration/#applying-templates-to-cells) +- [Applying templates to headers](/guides/configuration/#applying-templates-to-headers) \ No newline at end of file diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 5c72d9e..ab34da5 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -170,7 +170,7 @@ const table = new pivot.Pivot("#root", { ### Adding a template via the template helper -You can also define HTML templates using the [`pivot.template`](/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `columns` array. Define the template via the `pivot.template` helper. +You can also define HTML templates using the [`pivot.template`](/api/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `columns` array. Define the template via the `pivot.template` helper. The example shows how you can add icons (star or flag icon) to body cells based on their field (id, user_score): @@ -251,7 +251,7 @@ const table = new pivot.Pivot("#root", { ### Adding templates via the template helper -You can also define HTML templates using the [`pivot.template`](/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `header` parameter in the `columns` array. Define the template via the `pivot.template` helper. +You can also define HTML templates using the [`pivot.template`](/api/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `header` parameter in the `columns` array. Define the template via the `pivot.template` helper. The example below shows how to add icons to: From b36c190110a0a8b8c2dc012f9b5536fcec6f0439 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Thu, 24 Apr 2025 20:20:23 +0300 Subject: [PATCH 29/53] [update] number formatting updated --- docs/api/events/render-table-event.md | 4 +- docs/api/helpers/template.md | 6 +- docs/guides/localization.md | 111 ++++++++++++-------------- 3 files changed, 58 insertions(+), 63 deletions(-) diff --git a/docs/api/events/render-table-event.md b/docs/api/events/render-table-event.md index 387f2e7..6ccfd8a 100644 --- a/docs/api/events/render-table-event.md +++ b/docs/api/events/render-table-event.md @@ -46,7 +46,7 @@ The callback of the action takes the `config` object with the following paramete - `fields` (array) - (optional) defines fields in the hierarchical column in the tree mode. Reflects fields displayed in this column on different levels - `method` (string) - (optional) a method, if defined for a field in this column - `methods` (array) - (optional) defines methods applied to fields in the hierarchical column in the tree mode - - `format` (string or object) - (required) date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) + - `format` (string or object) - (required) [date format](/guides/localization/#date-formatting) or [number format](/guides/localization/#number-formatting) - `isNumeric` (boolean) - (optional) defines whether a column contains numeric values - `isTotal` (boolean) - (optional) defines whether it is a total column - `area` (string) - (optional) an area where the column is rendered: "rows", "columns", "values" @@ -57,7 +57,7 @@ The callback of the action takes the `config` object with the following paramete - `value` (any) - (required) raw value, if a cell belongs to "columns" area - `field` (string) - (required) a field, which value is displayed, if a cell belongs to "columns" area - `method` (string) - (required) the field predicate, if a cell belongs to "columns" area and predicate is defined - - `format` (string or object) - date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) + - `format` (string or object) - [date format](/guides/localization/#date-formatting) or [number format](/guides/localization/#number-formatting) - `footer` - (optional) a header label or an object with footer settings which are the same as the header settings - `field` - (optional) it's a string which is the id of a field - `template` - (optional) the template that is defined via the [`tableShape`](/api/config/tableshape-property) property diff --git a/docs/api/helpers/template.md b/docs/api/helpers/template.md index 9378d16..a7f53bd 100644 --- a/docs/api/helpers/template.md +++ b/docs/api/helpers/template.md @@ -41,7 +41,7 @@ For body cells the function takes the next parameters: - `fields` (array) - (optional) defines fields in the hierarchical column in the tree mode. Reflects fields displayed in this column on different levels - `method` (string) - (optional) a method, if defined for a field in this column - `methods` (array) - (optional) defines methods applied to fields in the hierarchical column in the tree mode - - `format` (string or object) - (required) date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) + - `format` (string or object) - (required) [date format](/guides/localization/#date-formatting) or [number format](/guides/localization/#number-formatting) - `isNumeric` (boolean) - (optional) defines whether a column contains numeric values - `isTotal` (boolean) - (optional) defines whether it is a total column - `area` (string) - (optional) an area where the column is rendered: "rows", "columns", "values" @@ -52,7 +52,7 @@ For body cells the function takes the next parameters: - `value` (any) - (required) raw value, if a cell belongs to "columns" area - `field` (string) - (required) a field, which value is displayed, if a cell belongs to "columns" area - `method` (string) - (required) a field predicate, if a cell belongs to "columns" area and predicate is defined - - `format` (string or object) - (required) date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) + - `format` (string or object) - (required) [date format](/guides/localization/#date-formatting) or [number format](/guides/localization/#number-formatting) For header cells the function parameters are the following: @@ -66,7 +66,7 @@ For header cells the function parameters are the following: - `value` (any) - (required) raw value, if a cell belongs to "columns" area - `field` (string) - (required) a field, which value is displayed, if a cell belongs to "columns" area - `method` (string) - (required) a field predicate, if a cell belongs to "columns" area and predicate is defined - - `format` (string or object) - (required) date or number [format](/guides/localization/#applying-custom-format-to-numeric-and-date-fields) + - `format` (string or object) - (required) [date format](/guides/localization/#date-formatting) or [number format](/guides/localization/#number-formatting) - `column` - (required) an object with column data (the same as for the body cell) ### Example diff --git a/docs/guides/localization.md b/docs/guides/localization.md index 5b3a469..59625c0 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -232,9 +232,7 @@ const table = new pivot.Pivot("#root", { }); ~~~ -:::info -In case you need to set format to a specific field, use the template parameter of the [`tableShape`](/api/config/tableshape-property) or [`headerShape`](/api/config/headershape-property) -::: +In case you need to set a custom format to a specific field, use the `format` parameter of the [`fields`](/api/config/fields-property) property. ## Date and time format specification @@ -269,60 +267,7 @@ To present the 20th of June, 2024 with the exact time as *2024-09-20 16:47:08.12 ## Number formatting -By default, all fields with the *number* type are localized according to the locale (the value in the `lang` field of the locale). The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) object enables language-sensitive number formatting. In case you need to disable number formatting of some fields, add the template via the [`tableShape`](/api/config/tableshape-property) property or set the *text* type for this field instead of the *number* type. - -Example: - -~~~jsx - // Define number formatting options - const numOptions = { maximumFractionDigits: 2, minimumFractionDigits: 2 }; - - // Create number formatters - const num = new Intl.NumberFormat("en-US", numOptions); - const eurNum = new Intl.NumberFormat("en-US", { - style: "currency", - currency: "EUR", - ...numOptions, - }); - - // Templates for specific fields - const templates = { - continent: v => (v === "North America" ? "NA" : v), - oil: (v, op) => (v && op != "count" ? num.format(v) : v), - gdp: (v, op) => (v && op != "count" ? eurNum.format(v) : v), - year: v => v, - }; - - // Function to style cells based on field, value, area, and method - function cellStyle(field, value, area, method) { - if (method?.indexOf("count") > -1) return "count"; - } - - const table = new pivot.Pivot("#root", { - data, - fields, - config, - tableShape: { - templates, - cellStyle, - }, - }); - - // Apply styles for count class - const style = document.createElement('style'); - style.innerHTML = ` - .count { - font-weight: 600; - } - `; - document.head.appendChild(style); -~~~ - -## Applying custom format to numeric and date fields - -You can apply a custom format to the date and numeric fields using the `format` parameter of the [`fields`](/api/config/fields-property) property. - -You can add text before and after numeric values using the `prefix` and `suffix` parameters. For example, to convert the value *12.345* to "12.35 EUR", `format` should contain the " EUR" suffix and maximumFractionDigits of 2: +By default, all fields with the *number* type are localized according to the locale (the value in the `lang` field of the locale). The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) object enables language-sensitive number formatting. In case you need to set a custom format to a specific field, use the `format` parameter of the [`fields`](/api/config/fields-property) property. You can add text before and after numeric values using the `prefix` and `suffix` parameters. For example, to convert the value *12.345* to "12.35 EUR", `format` should contain the " EUR" suffix and maximumFractionDigits of 2: ~~~js const fields = [ @@ -338,8 +283,58 @@ const fields = [ ]; ~~~ +In the example below, fields like marketing, profit, and sales are identified as currency-related. A formatting object is applied to these fields with: + +- prefix: "$" to display a dollar sign +- *minimumFractionDigits* and *maximumFractionDigits* set to 2 for consistent decimal formatting + +~~~jsx +const dataset = [...]; // your dataset array +const fields = [ + { id: "profit", type: "number" }, + { id: "sales", type: "number" }, + { id: "marketing", type: "number" }, + { id: "date", type: "date" }, + // other fields... +]; + +// Apply custom formatting +const currencyFields = ["marketing", "profit", "sales"]; + +fields.forEach(field => { + if (currencyFields.includes(field.id)) { + // Apply currency formatting + field.format = { + prefix: "$", + minimumFractionDigits: 2, + maximumFractionDigits: 2 + }; + } else if (field.type === "date") { + // Apply date formatting + field.format = "%M %d, %Y"; + } +}); + +// Initialize pivot with pre-defined dataset and fields +new pivot.Pivot("#pivot", { + data: dataset, + config: { + rows: ["state", "product_type"], + columns: [], + values: [ + { field: "profit", method: "sum" }, + { field: "sales", method: "sum" }, + { field: "marketing", method: "sum" }, + { field: "date", method: "min" }, + { field: "cogs", method: "sum" }, + ], + }, + fields +}); +~~~ + :::info -If both the template (via the [`tableShape`](/api/config/tableshape-property) property) and `format` are set, the template will override the format settings. +In case you need to disable number formatting of some fields, set the `format` parameter of the [`fields`](/api/config/fields-property) property to *false*. ::: ## Example From a7dee382ef2de2df207028be5e0b125cfaefed3f Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Thu, 24 Apr 2025 21:24:52 +0300 Subject: [PATCH 30/53] [update] custom formatting added --- docs/api/events/render-table-event.md | 4 +- docs/api/helpers/template.md | 10 +- docs/guides/custom-formatting.md | 150 ++++++++++++++++++++++++++ docs/guides/localization.md | 62 +---------- docs/guides/stylization.md | 21 +--- sidebars.js | 1 + 6 files changed, 163 insertions(+), 85 deletions(-) create mode 100644 docs/guides/custom-formatting.md diff --git a/docs/api/events/render-table-event.md b/docs/api/events/render-table-event.md index 6ccfd8a..33870b9 100644 --- a/docs/api/events/render-table-event.md +++ b/docs/api/events/render-table-event.md @@ -46,7 +46,7 @@ The callback of the action takes the `config` object with the following paramete - `fields` (array) - (optional) defines fields in the hierarchical column in the tree mode. Reflects fields displayed in this column on different levels - `method` (string) - (optional) a method, if defined for a field in this column - `methods` (array) - (optional) defines methods applied to fields in the hierarchical column in the tree mode - - `format` (string or object) - (required) [date format](/guides/localization/#date-formatting) or [number format](/guides/localization/#number-formatting) + - `format` (string or object) - (required) [date format](/guides/custom-formatting/#custom-date-formatting) or [number format](/guides/custom-formatting/#custom-number-formatting) - `isNumeric` (boolean) - (optional) defines whether a column contains numeric values - `isTotal` (boolean) - (optional) defines whether it is a total column - `area` (string) - (optional) an area where the column is rendered: "rows", "columns", "values" @@ -57,7 +57,7 @@ The callback of the action takes the `config` object with the following paramete - `value` (any) - (required) raw value, if a cell belongs to "columns" area - `field` (string) - (required) a field, which value is displayed, if a cell belongs to "columns" area - `method` (string) - (required) the field predicate, if a cell belongs to "columns" area and predicate is defined - - `format` (string or object) - [date format](/guides/localization/#date-formatting) or [number format](/guides/localization/#number-formatting) + - `format` (string or object) - [date format](/guides/custom-formatting/#custom-date-formatting) or [number format](/guides/custom-formatting/#custom-number-formatting) - `footer` - (optional) a header label or an object with footer settings which are the same as the header settings - `field` - (optional) it's a string which is the id of a field - `template` - (optional) the template that is defined via the [`tableShape`](/api/config/tableshape-property) property diff --git a/docs/api/helpers/template.md b/docs/api/helpers/template.md index a7f53bd..8b2785c 100644 --- a/docs/api/helpers/template.md +++ b/docs/api/helpers/template.md @@ -41,7 +41,7 @@ For body cells the function takes the next parameters: - `fields` (array) - (optional) defines fields in the hierarchical column in the tree mode. Reflects fields displayed in this column on different levels - `method` (string) - (optional) a method, if defined for a field in this column - `methods` (array) - (optional) defines methods applied to fields in the hierarchical column in the tree mode - - `format` (string or object) - (required) [date format](/guides/localization/#date-formatting) or [number format](/guides/localization/#number-formatting) + - `format` (string or object) - (required) [date format](/guides/custom-formatting/#custom-date-formatting) or [number format](/guides/custom-formatting/#custom-number-formatting) - `isNumeric` (boolean) - (optional) defines whether a column contains numeric values - `isTotal` (boolean) - (optional) defines whether it is a total column - `area` (string) - (optional) an area where the column is rendered: "rows", "columns", "values" @@ -52,7 +52,7 @@ For body cells the function takes the next parameters: - `value` (any) - (required) raw value, if a cell belongs to "columns" area - `field` (string) - (required) a field, which value is displayed, if a cell belongs to "columns" area - `method` (string) - (required) a field predicate, if a cell belongs to "columns" area and predicate is defined - - `format` (string or object) - (required) [date format](/guides/localization/#date-formatting) or [number format](/guides/localization/#number-formatting) + - `format` (string or object) - (required) [date format](/guides/custom-formatting/#custom-date-formatting) or [number format](/guides/custom-formatting/#custom-number-formatting) For header cells the function parameters are the following: @@ -66,7 +66,7 @@ For header cells the function parameters are the following: - `value` (any) - (required) raw value, if a cell belongs to "columns" area - `field` (string) - (required) a field, which value is displayed, if a cell belongs to "columns" area - `method` (string) - (required) a field predicate, if a cell belongs to "columns" area and predicate is defined - - `format` (string or object) - (required) [date format](/guides/localization/#date-formatting) or [number format](/guides/localization/#number-formatting) + - `format` (string or object) - (required) [date format](/guides/custom-formatting/#custom-date-formatting) or [number format](/guides/custom-formatting/#custom-number-formatting) - `column` - (required) an object with column data (the same as for the body cell) ### Example @@ -82,8 +82,8 @@ The snippet demonstrates how you can add icons to: -**Related articles:** +**Related articles:** -- [`render-table` event](/api/events/render-table-event) +- [`render-table`](/api/events/render-table-event) - [Applying templates to cells](/guides/configuration/#applying-templates-to-cells) - [Applying templates to headers](/guides/configuration/#applying-templates-to-headers) \ No newline at end of file diff --git a/docs/guides/custom-formatting.md b/docs/guides/custom-formatting.md new file mode 100644 index 0000000..7b2c4ce --- /dev/null +++ b/docs/guides/custom-formatting.md @@ -0,0 +1,150 @@ +--- +sidebar_label: Custom fields formatting +title: Custom fields formatting +description: You can learn about date and custom formatting in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot. +--- + +## Default formatting + +About default formatting that depends on locale, please refer to [Date formatting](/guides/localization/#date-formatting) and [Number formatting](/guides/localization/#number-formatting). + +## Custom number formatting + +In case you need to set a custom format to a specific field, use the `format` parameter of the [`fields`](/api/config/fields-property) property. You can add text before and after numeric values using the `prefix` and `suffix` parameters. For example, to convert the value *12.345* to "12.35 EUR", `format` should contain the " EUR" suffix and maximumFractionDigits of 2: + +~~~js +const fields = [ + { id: "sales", type: "number", format: {suffix: " EUR", maximumFractionDigits: 2}}, +]; +~~~ + +By default, the format for numeric values limits fraction digits to 3 and applies group separation for the integer part. The `format` parameter allows you to display numeric values without group separation (for example, years): + +~~~js +const fields = [ + { id: "year", label: "Year", type: "number", format: false}, +]; +~~~ + +In the example below, fields like marketing, profit, and sales are identified as currency-related. A formatting object is applied to these fields with: + +- prefix: "$" to display a dollar sign +- *minimumFractionDigits* and *maximumFractionDigits* set to 2 for consistent decimal formatting + +~~~jsx +const dataset = [...]; // your dataset array +const fields = [ + { id: "profit", type: "number" }, + { id: "sales", type: "number" }, + { id: "marketing", type: "number" }, + { id: "date", type: "date" }, + // other fields... +]; + +// Apply custom formatting +const currencyFields = ["marketing", "profit", "sales"]; + +fields.forEach(field => { + if (currencyFields.includes(field.id)) { + // Apply currency formatting + field.format = { + prefix: "$", + minimumFractionDigits: 2, + maximumFractionDigits: 2 + }; + } else if (field.type === "date") { + // Apply date formatting + field.format = "%M %d, %Y"; + } +}); + +// Initialize pivot with pre-defined dataset and fields +new pivot.Pivot("#pivot", { + data: dataset, + config: { + rows: ["state", "product_type"], + columns: [], + values: [ + { field: "profit", method: "sum" }, + { field: "sales", method: "sum" }, + { field: "marketing", method: "sum" }, + { field: "date", method: "min" }, + { field: "cogs", method: "sum" }, + ], + }, + fields +}); +~~~ + +## Custom date formatting + +To override the default locale-wide `dateFormat`, apply the `format` parameter of the [`fields`](/api/config/fields-property) property. Date format is a string, for example: + +~~~jsx +const fields = [ + { id: "date", type: "date", format: "%M %d, %Y"}, +]; +~~~ + +In the example below we set the date format to "%d %M %Y %H:%i" for the "date" field only. The format displays day, full month name, year, hours, and minutes, e.g., "24 April 2025 14:30". + +~~~jsx +const fields = [ + { + id: "date", + type: "date", + label: "Order Date", + format: "%d %M %Y %H:%i" // Custom format: Day Month Year Hour:Minute + }, + { + id: "profit", + type: "number" + }, + { + id: "sales", + type: "number" + }, + // other fields... +]; + +// Convert date strings to Date objects +const dateFields = fields.filter(f => f.type === "date"); +dataset.forEach(item => { + dateFields.forEach(f => { + const v = item[f.id]; + if (typeof v === "string") { + item[f.id] = new Date(v); + } + }); +}); + +// Initialize Pivot with field-specific date format +new pivot.Pivot("#pivot", { + data: dataset, + fields, + config: { + rows: ["state"], + columns: ["product_type"], + values: [ + { field: "date", method: "min" }, + { field: "profit", method: "sum" }, + { field: "sales", method: "sum" } + ] + } +}); +~~~ + +:::info +In case you need to disable formatting of some fields, set the `format` parameter of the [`fields`](/api/config/fields-property) property to *false*. +::: + +## Example + +In this snippet you can see how to apply custom formats: + + + +**Related articles:** + +- [Localization](/guides/localization) +- [`fields`](/api/config/fields-property) \ No newline at end of file diff --git a/docs/guides/localization.md b/docs/guides/localization.md index 59625c0..49d38c2 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -232,7 +232,7 @@ const table = new pivot.Pivot("#root", { }); ~~~ -In case you need to set a custom format to a specific field, use the `format` parameter of the [`fields`](/api/config/fields-property) property. +In case you need to set a custom format to a specific field, use the `format` parameter of the [`fields`](/api/config/fields-property) property. Refer to [Custom date formatting](/guides/custom-formatting/#custom-date-formatting). ## Date and time format specification @@ -267,15 +267,7 @@ To present the 20th of June, 2024 with the exact time as *2024-09-20 16:47:08.12 ## Number formatting -By default, all fields with the *number* type are localized according to the locale (the value in the `lang` field of the locale). The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) object enables language-sensitive number formatting. In case you need to set a custom format to a specific field, use the `format` parameter of the [`fields`](/api/config/fields-property) property. You can add text before and after numeric values using the `prefix` and `suffix` parameters. For example, to convert the value *12.345* to "12.35 EUR", `format` should contain the " EUR" suffix and maximumFractionDigits of 2: - -~~~js -const fields = [ - { id: "sales", type: "number", format: {suffix: " EUR", maximumFractionDigits: 2}}, -]; -~~~ - -By default, the format for numeric values limits fraction digits to 3 and applies group separation for the integer part. The `format` parameter allows you to display numeric values without group separation (for example, years): +By default, all fields with the *number* type are localized according to the locale (the value in the `lang` field of the locale). The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) object enables language-sensitive number formatting. In case you need to set a custom format to a specific field, use the `format` parameter of the [`fields`](/api/config/fields-property) property. By default, the format for numeric values limits fraction digits to 3 and applies group separation for the integer part. The `format` parameter allows you to display numeric values without group separation (for example, years): ~~~js const fields = [ @@ -283,55 +275,7 @@ const fields = [ ]; ~~~ -In the example below, fields like marketing, profit, and sales are identified as currency-related. A formatting object is applied to these fields with: - -- prefix: "$" to display a dollar sign -- *minimumFractionDigits* and *maximumFractionDigits* set to 2 for consistent decimal formatting - -~~~jsx -const dataset = [...]; // your dataset array -const fields = [ - { id: "profit", type: "number" }, - { id: "sales", type: "number" }, - { id: "marketing", type: "number" }, - { id: "date", type: "date" }, - // other fields... -]; - -// Apply custom formatting -const currencyFields = ["marketing", "profit", "sales"]; - -fields.forEach(field => { - if (currencyFields.includes(field.id)) { - // Apply currency formatting - field.format = { - prefix: "$", - minimumFractionDigits: 2, - maximumFractionDigits: 2 - }; - } else if (field.type === "date") { - // Apply date formatting - field.format = "%M %d, %Y"; - } -}); - -// Initialize pivot with pre-defined dataset and fields -new pivot.Pivot("#pivot", { - data: dataset, - config: { - rows: ["state", "product_type"], - columns: [], - values: [ - { field: "profit", method: "sum" }, - { field: "sales", method: "sum" }, - { field: "marketing", method: "sum" }, - { field: "date", method: "min" }, - { field: "cogs", method: "sum" }, - ], - }, - fields -}); -~~~ +For more information, refer to [Custom number formatting](/guides/custom-formatting/#custom-number-formatting). :::info In case you need to disable number formatting of some fields, set the `format` parameter of the [`fields`](/api/config/fields-property) property to *false*. diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index 4cd6fe8..9ff1963 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -100,20 +100,9 @@ You can also apply a custom style to the scroll bar of Pivot. For this, you can ## Cell style -To apply a CSS class to a cell, use the `cellStyle` parameter of the [`tableShape`](/api/config/tableshape-property) property. The `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell. In the example provided, if the `method` contains "count", it will return the string "count", which is associated with a CSS class *.count* that has the font-weight of 600. In the example we also apply number formatters: -- `numOptions` ensures that numbers are displayed with exactly two decimal places, regardless of their value -- `new Intl.NumberFormat("en-US", numOptions)` creates a number formatter for the US locale ("en-US") using the options defined in `numOptions`. It also creates another number formatter specifically for formatting numbers as Euro currency (currency: "EUR") in the US locale with two decimal places. More about number formatting, see here: [Number formatting](/guides/localization/#number-formatting). +To apply a CSS class to a cell, use the `cellStyle` parameter of the [`tableShape`](/api/config/tableshape-property) property. The `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell. In the example provided, if the `method` contains "count", it will return the string "count", which is associated with the related CSS class. ~~~jsx - // Number formatting options - const numOptions = { maximumFractionDigits: 2, minimumFractionDigits: 2 }; - const num = new Intl.NumberFormat("en-US", numOptions); - const eurNum = new Intl.NumberFormat("en-US", { - style: "currency", - currency: "EUR", - ...numOptions, - }); - // Cell style function const cellStyle = (field, value, area, method) => { if (method?.indexOf("count") > -1) return "count"; @@ -129,13 +118,7 @@ To apply a CSS class to a cell, use the `cellStyle` parameter of the [`tableShap }); ~~~ -~~~html title="index.html" - -~~~ + ## Marking cells diff --git a/sidebars.js b/sidebars.js index a6aa24b..d49039d 100644 --- a/sidebars.js +++ b/sidebars.js @@ -196,6 +196,7 @@ module.exports = { items: [ "guides/initialization", "guides/configuration", + "guides/custom-formatting", "guides/exporting-data", "guides/loading-data", "guides/localization", From 35c76ca48a2bb5bb5f712aab73ea74c23cb2c208 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Thu, 24 Apr 2025 21:44:24 +0300 Subject: [PATCH 31/53] [update] custom formatting added --- docs/api/helpers/template.md | 2 -- docs/guides/custom-formatting.md | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/api/helpers/template.md b/docs/api/helpers/template.md index 8b2785c..863da16 100644 --- a/docs/api/helpers/template.md +++ b/docs/api/helpers/template.md @@ -4,8 +4,6 @@ title: template description: You can learn about the Pivot template helper in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot. --- -## template - ### Description The `template` function allows applying a template to the table header and body cells. diff --git a/docs/guides/custom-formatting.md b/docs/guides/custom-formatting.md index 7b2c4ce..4fa1f0b 100644 --- a/docs/guides/custom-formatting.md +++ b/docs/guides/custom-formatting.md @@ -6,7 +6,7 @@ description: You can learn about date and custom formatting in the documentation ## Default formatting -About default formatting that depends on locale, please refer to [Date formatting](/guides/localization/#date-formatting) and [Number formatting](/guides/localization/#number-formatting). +For the description of default formatting of date and numeric fields, which depends on locale, refer to [Date formatting](/guides/localization/#date-formatting) and [Number formatting](/guides/localization/#number-formatting). ## Custom number formatting From b7a8deefccdde8f04aaf47dde76f716a8569dff9 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Thu, 24 Apr 2025 21:46:12 +0300 Subject: [PATCH 32/53] [update] custom localization updated --- docs/guides/localization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/localization.md b/docs/guides/localization.md index 49d38c2..f97df20 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -278,7 +278,7 @@ const fields = [ For more information, refer to [Custom number formatting](/guides/custom-formatting/#custom-number-formatting). :::info -In case you need to disable number formatting of some fields, set the `format` parameter of the [`fields`](/api/config/fields-property) property to *false*. +In case you need to disable formatting of some fields, set the `format` parameter of the [`fields`](/api/config/fields-property) property to *false*. ::: ## Example From b823178d94e3b1d7e97b1a30fd41f112c8f158c0 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Fri, 25 Apr 2025 13:18:36 +0300 Subject: [PATCH 33/53] [update] tableShape, split, cell style updated --- docs/api/config/tableshape-property.md | 10 +++++----- docs/guides/configuration.md | 17 +++++------------ docs/guides/stylization.md | 4 +--- 3 files changed, 11 insertions(+), 20 deletions(-) diff --git a/docs/api/config/tableshape-property.md b/docs/api/config/tableshape-property.md index e1cfef4..3f1e70f 100644 --- a/docs/api/config/tableshape-property.md +++ b/docs/api/config/tableshape-property.md @@ -39,7 +39,7 @@ tableShape?: { left?: boolean, right?: boolean, }, - cellStyle?: (field: string, value: any, area: string, method?: string) => string, + cellStyle?: (field: string, value: any, area: string, method?: string, isTotal?: string) => string, }; ~~~ @@ -47,9 +47,8 @@ tableShape?: { - `templates` - (optional) allows setting templates to a cell; it's an object where: - each key is a field id - - the value is a function that returns a string and receives cell value and operation - All columns based on the specified field will have the related template applied. For example, it allows setting the units of measurement or returning the required number of digits after the decimal point for numeric values, etc. See the example below. -- `marks` - (optional) allows marking a cell with the required values; it's an object where keys are CSS class names and values are either a function or one of the predefined strings ("max", "min"). The default value is {}. The function should return boolean for the checked value; if **true** is returned, the css class is assigned to the cell. More information with examples see here [Marking cells](/guides/stylization#cell-style). + - the value is a function that returns a string and receives cell value and operation. All columns based on the specified field will have the related template applied. For example, it allows setting the units of measurement or returning the required number of digits after the decimal point for numeric values, etc. See the example below. +- `marks` - (optional) allows marking a cell with the required values; it's an object where keys are CSS class names and values are either a function or one of the predefined strings ("max", "min"). The function should return boolean for the checked value; if **true** is returned, the css class is assigned to the cell. More information with examples see here [Marking cells](/guides/stylization#cell-style). - `sizes` - (optional) defines the following size parameters of the table: - `rowHeight` - (optional) the row height in the Pivot table in pixels; the default value is 34 - `headerHeight` - (optional) the header height in pixels; the default value is 30 @@ -59,7 +58,8 @@ tableShape?: { - `field` - (required) a string representing the field name for which the style is applied - `value` - (required) the value of the cell (the actual data for that particular row and column) - `area` - (required) a string indicating the area of the table where a cell resides ("rows", "columns" or "values" area) - - `method` - (optional) a string that can represent the operation performed on a cell (e.g., "sum", "count", etc.). + - `method` - (optional) a string that can represent the operation performed on a cell (e.g., "sum", "count", etc.) + - `isTotal` - (optional) defines whether a cell belongs to a total row, total column, or both: "row"|"column"|"both The `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell. - `tree` - (optional) if set to **true**, enables the tree mode when data can be presented with expandable rows; the default value is **false**; more information with examples see here [Switching to the tree mode](/guides/configuration/#enabling-the-tree-mode) - `totalColumn` - (optional) if **true**, enables generating the total column with total values for rows (**false** is set by default); if the value is set to "sumOnly", the column with the total sum value will be generated (available only for sum operations) diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index ab34da5..aa265c3 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -324,9 +324,7 @@ The widget allows freezing columns on the left or right side, which makes the co ### Freezing columns on the left -:::info -The number of columns that are split is equal to the number of the rows fields that are defined in the [`config`](/api/config/config-property) property. 2 columns are fixed by default. In the **tree** mode only one column gets frozen regardless of the number of the rows fields that are defined. -::: +The number of columns that are split is equal to the number of the rows fields that are defined in the [`config`](/api/config/config-property) property. In the **tree** mode only one column gets frozen regardless of the number of the rows fields that are defined. In the sample below, 1 column is fixed initially on the left, which is equal to the number of fields defined for the "rows" area. ~~~jsx {19} const table = new pivot.Pivot("#root", { @@ -347,19 +345,14 @@ const table = new pivot.Pivot("#root", { ] }, tableShape: { - split: {left: true } //freezes all fields from rows on the left side + split: {left: true } } }); ~~~ -You can also apply a custom split using the [`render-table`](/api/events/render-table-event) event. - -:::info -For the custom split, the number of columns that are split depends on the number of the rows and values fields that are defined in the [`config`](/api/config/config-property) property. -It's not recommended to split columns with colspans. -::: +You can also apply a custom split using the [`render-table`](/api/events/render-table-event) event. It's not recommended to split columns with colspans. -In the example below we split all rows fields (two rows are defined in the config) and the first two columns (the first two values fields). +In the sample below all columns from the "rows" area and first 4 columns from the "values" area are fixed initially. The number of columns that are split depends on the number of the rows and values fields that are defined via the [`config`](/api/config/config-property) property. ~~~jsx {19-25} const table = new pivot.Pivot("#root", { @@ -418,7 +411,7 @@ const widget = new pivot.Pivot("#pivot", { }); ~~~ -To fix custom columns on the right, you need to apply the table API via the [`render-table`](/api/events/render-table-event) event. +To fix custom columns on the right, you need to apply the table API via the [`render-table`](/api/events/render-table-event) event. It's not recommended to split columns with colspans. In the sample below, 2 columns on the right are fixed initially. ~~~jsx {20-25} const widget = new pivot.Pivot("#pivot", { diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index 9ff1963..42e9891 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -119,7 +119,6 @@ To apply a CSS class to a cell, use the `cellStyle` parameter of the [`tableShap ~~~ - ## Marking cells The widget API allows marking cells with the required values. You can do it by applying the `marks` parameter of the [`tableShape`](/api/config/tableshape-property) property. You need to do the following: @@ -180,7 +179,7 @@ const table = new pivot.Pivot("#root", { ## Aligning numbers in a cell -By default, numbers are justified against the end of a cell (aligned to the right) and the number alignment is not applied in headers and in the tree mode (when `tree` is set to **true** for the [`tableShape`](/api/config/tableshape-property) property). If you want to change the number alignment in a cell, except for the cases mentioned, use the `wx-number` CSS class. +By default, in the table body numbers are aligned to the right with the help of the built-in `.wx-number` CSS class. The exception is the hierarchical column in the tree mode (when `tree` is set to **true** for the [`tableShape`](/api/config/tableshape-property) property). To reset the default number alignment, change the related CSS class. ~~~html ~~~ - ## Example In this snippet you can see how to apply a custom style to Pivot From 15dbca2cec0279f4af047d325397e87a38779d23 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Fri, 25 Apr 2025 14:58:47 +0300 Subject: [PATCH 34/53] [update] exporting data updated --- docs/guides/exporting-data.md | 134 ++++++++++++++++------------------ 1 file changed, 61 insertions(+), 73 deletions(-) diff --git a/docs/guides/exporting-data.md b/docs/guides/exporting-data.md index f46fe4b..a48a47c 100644 --- a/docs/guides/exporting-data.md +++ b/docs/guides/exporting-data.md @@ -11,119 +11,107 @@ To export the table data to the XLSX or CSV format, it's necessary to get access ```js "export": ({ options: { - format: "csv" | "xlsx"; - fileName?: string; - sheetName?: string; - header?: boolean; - footer?: boolean; - download?: boolean; + format: "csv" | "xlsx", + fileName?: string, + header?: boolean, + footer?: boolean, + download?: boolean, /* XLSX settings*/ styles?: boolean | { header?: { - fontWeight?: "bold"; - color?: string; - background?: string; - align?: "left"|"right"|"center"; - borderBottom?: string; - borderRight?: string; + fontWeight?: "bold", + color?: string, + background?: string, + align?: "left"|"right"|"center", + borderBottom?: string, + borderRight?: string, } - lastHeaderCell?: { /* same as header */ }; + lastHeaderCell?: { /* same as header */ }, cell?: { /* same as header */ }; - firstFooterCell?: { /* same as header */ }; - footer?: {/* same as header */}; + firstFooterCell?: { /* same as header */ }, + footer?: {/* same as header */}, } cellTemplate?: (value: any, row: any, column: object ) - => string | null; + => string | null, headerCellTemplate?: (text: string, cell: object, column: object, type: "header"| "footer") - => string | null; + => string | null, cellStyle?: (value: any, row: any, column: object) - => { format: string; align: "left"|"right"|"center" } | null; + => { format: string; align: "left"|"right"|"center" } | null, headerCellStyle?: (text: string, cell: object, column: object, type: "header"| "footer") - => { format: string; align: "left"|"right"|"center" } | null; + => { format: string; align: "left"|"right"|"center" } | null, + sheetName?: string, /* CSV settings */ - rows: string; - cols: string; + rows: string, + cols: string, }, - result?: any; + result?: any, }) => boolean|void; ``` The `export` action of the Table widget has the next parameters that you can configure to your needs: -- `options` - an object with the export options; options differ depending on the format type: +- `options` - an object with the export options; options differ depending on the format type +- `result` - the result of the exported Excel or CSV data (usually Blob or file depending on the `download` option) + + **Common options for both formats ("csv" "xlsx" ):** + + - `format` (string) - (optional) the export format that can be "csv" or "xlsx" + - `fileName` (string) - (optional) a file name ("data" by default) - `header` (boolean) - (optional) defines if a header should be exported (**true** by default) - `footer` (boolean) - (optional) defines if a footer should be exported (**true** by default) - - `download` (boolean) - (optional) defines whether to download a file. **true** is set by default. if set to **false**, the file will not be downloaded, CSV data (Blob) will be available as `ev.result` - - `format` (string) - (optional) the export format that can be "csv" or "xlsx" - **Options for "xlsx" format:** - :::note - By default, for the "xlsx" format, date and number fields are exported as raw values with default format or the format defined via the [`fields`](/api/config/fields-property) property. But if a template is defined for a field (see the [`tableShape`](/api/config/tableshape-property) property), it exports the rendered value defined by that template. In case both the template and `format` are set, the template settings will override the format ones. - ::: - - `fileName` (string) - (optional) a name of .xlsx file ("data" by default) + - `download` (boolean) - (optional) defines whether to download a file. **true** is set by default. If set to **false**, the file will not be downloaded, Excel or CSV data (Blob) will be available as `ev.result` + + **Options specific for "xlsx" format:** + - `sheetName` (string) - a name of Excel sheet ( "data" by default) - - `styles` (boolean or object) - if set to **false**, grid will be exported without any styling; an object includes parameters for custom styles for cells in the header, body, and footer. Can be configured using a hash of style properties: - - header - style properties for header cells with the next properties: + - `styles` (boolean or object) - if set to **false**, grid will be exported without any styling; can be configured using a hash of style properties: + - header - an object with the next settings for header cells: - `fontWeight` (string) - (optional) can be set to "bold" or if not set, the font will be normal - `color` (string) - (optional) text color in header - `background` (string) - (optional) background color for header - - `align` - (optional) text alignment that can be "left"|"right"|"center"; if not set, alignment set in Excel will be applied + - `align` - (optional) text alignment that can be "left"|"right"|"center". If not set, alignment set in Excel will be applied - `borderBottom` (string) - (optional) the style of the bottom border - `borderRight` (string) - (optional) the style of the right border (e.g., *borderRight: "0.5px solid #dfdfdf"* ) - - lastHeaderCell - style properties for the last row of header cells; properties are the same as for *header* - - cell - style properties for body cells; properties are the same as for *header* - - firstFooterCell - style properties for the first row of footer cells; properties are the same as for *header* - - footer - style properties for footer cells; properties are the same as for *header* - - `cellTemplate` - a function to customize the export value of each cell. It takes the value, row, and column objects as parameters and returns the custom value to be exported; - - `headerCellTemplate` - a function that customizes the value of a header or footer cell during export. It is called with the text, header cell object, column object, and cell type ("header" or "footer"). This allows users to modify the exported header/footer values. + - lastHeaderCell - style properties for the last row of header cells. Properties are the same as for *header* + - cell - style properties for body cells.Properties are the same as for *header* + - firstFooterCell - style properties for the first row of footer cells. Properties are the same as for *header* + - footer - style properties for footer cells. Properties are the same as for *header* + - `cellTemplate` - a function to customize the export value of each cell. It takes the value, row, and column objects as parameters and returns the custom value to be exported + - `headerCellTemplate` - a function that customizes the value of a header or footer cell during export. It is called with the text, header cell object, column object, and cell type ("header" or "footer"). This allows users to modify the exported header/footer values - `cellStyle` - a function that allows customizing the style and format of individual cells during export. It takes the value, row, and column objects as parameters and should return an object with style properties (e.g., alignment or format) - `headerCellStyle` - similar to cellStyle, but specifically for the header and footer cells. This function takes the text, header cell object, column object, and type ("header" or "footer") and returns style properties - `header` (boolean) - (optional) defines if a header should be exported (**true** by default) - `footer` (boolean) - (optional) defines if a footer should be exported (**true** by default) - - `download` (boolean) - (optional) defines whether to download a file. **true** is set by default. if set to **false**, the file will not be downloaded, Excel data (Blob) will be available as `ev.result` - **Options for "csv" format:** - - `fileName` (string) - (optional) a file name ("data" by default) + - `download` (boolean) - (optional) defines whether to download a file. **true** is set by default. If set to **false**, the file will not be downloaded, Excel data (Blob) will be available as `ev.result` + + :::note + By default, for the "xlsx" format, date and number fields are exported as raw values with default format or the format defined via the [`fields`](/api/config/fields-property) property. But if a template is defined for a field (see the [`tableShape`](/api/config/tableshape-property) property), it exports the rendered value defined by that template. In case both the template and `format` are set, the template settings will override the format ones. + ::: + + **Options specific for "csv" format:** + - `rows` (string) - (optional) rows delimiter, "\n" by default - `cols` (string) - (optional) columns delimiter, "\t" by default -- `result` - the exported data result (usually Blob or file depending on the `download` option) -In the example below we get access to the Table instance and trigger the `export`action on the button click using the [`api.exec()`](/api/internal/exec-method) method. +In the example below we get access to the Table instance and trigger the `export`action using the [`api.exec()`](/api/internal/exec-method) method. ~~~jsx -const table = new pivot.Pivot("#root", { - fields, - data: dataset, - config: { - rows: ["studio", "genre"], - columns: [], - values: [ - { - id: "title", - method: "count" - }, - { - id: "score", - method: "max" - } - ] - } -}); - -function toCSV() { - table.api.getTable().exec("export", { +const widget = new pivot.Pivot("#root", { /*setting*/}); +widget.api.getTable().exec("export", { options: { format: "csv", cols: ";" } - }); -} - -const exportButton = document.createElement("button"); -exportButton.addEventListener("click", toCSV); -exportButton.textContent = "Export"; - -document.body.appendChild(exportButton); +}); +widget.api.getTable().exec("export", { + options: { + format: "xlsx", + fileName: "My Report", + sheetName: "Quarter 1", + } +}); ~~~ ## Example From c7a97bdafd7576e775b9d398e87d6a96aa74d798 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Sat, 26 Apr 2025 18:52:35 +0300 Subject: [PATCH 35/53] [update] headerShape.cellStyle added, style cells updated, render-table, template fixed --- docs/api/config/headershape-property.md | 17 +++++-- docs/api/config/tableshape-property.md | 19 ++++---- docs/api/events/render-table-event.md | 8 ++-- docs/api/helpers/template.md | 10 ++-- docs/guides/configuration.md | 10 ++-- docs/guides/stylization.md | 63 ++++++++++++++++++++----- 6 files changed, 89 insertions(+), 38 deletions(-) diff --git a/docs/api/config/headershape-property.md b/docs/api/config/headershape-property.md index 03b8bfb..3e9438d 100644 --- a/docs/api/config/headershape-property.md +++ b/docs/api/config/headershape-property.md @@ -22,9 +22,15 @@ headerShape?: { ### Parameters -- `collapsible` - (optional) if set to **true**, dimension groups in the table are collapsible; it's set to **false** by default -- `vertical` - (optional) if set to **true**, changes the text orientation in all headers from horizontal to vertical; the default value is **false** -- `template` - (optional) defines the format of text in headers; by default, for the fields applied as rows the value of the `label` parameter is displayed and for the fields applied as values the label and method are shown (e.g., *Oil(count)*); the function takes the field id, label and the method or predicate id (if any) and returns the processed value; the default template is as follows: +- `collapsible` - (optional) if set to **true**, dimension groups in the table are collapsible. It's set to **false** by default +- `vertical` - (optional) if set to **true**, changes the text orientation in all headers from horizontal to vertical. The default value is **false** +- `cellStyle` - (optional) a function that applies a custom style to a header or footer cell. The function returns a name of css class and takes the following parameters: + - `field` (string) - (required) a string representing the field name the cell corresponds to. For the header of the tree column the field is "" + - `value` (string | number | date) - (required) the value of a cell + - `area` - (required) a string indicating the area of the table where a cell resides ("rows", "columns" or "values" area) + - `method` string - (optional) a string that can represent the operation performed for a field from the "values` area (e.g., "sum", "count", etc.) or the name of a predicate set for a field from the "columns" area + - `isTotal` - (optional) defines whether a cell belongs to a total column +- `template` - (optional) defines the format of text in headers. By default, for the fields applied as rows the value of the `label` parameter is displayed and for the fields applied as values the label and method are shown (e.g., *Oil(count)*). The function takes the field id, label and the method or predicate id (if any) and returns the processed value. The default template is as follows: ~~~js template: (label, id, subLabel) => label + (subLabel ? ` (${subLabel})` : "") @@ -61,5 +67,8 @@ const table = new pivot.Pivot("#root", { - [Pivot 2. Vertical orientation of text in grid headers](https://snippet.dhtmlx.com/4qroi8ka) - [Pivot 2. Collapsible columns](https://snippet.dhtmlx.com/pt2ljmcm) - [Pivot 2. Headers template](https://snippet.dhtmlx.com/g89r9ryw) +- [Pivot 2. Pivot 2: Adding сustom CSS for table and header cells](https://snippet.dhtmlx.com/nfdcs4i2) -**Related article**: [Configuration](/guides/configuration) +**Related articles**: +- [Configuration](/guides/configuration) +- [Cell style](/guides/stylization/#cell-style) diff --git a/docs/api/config/tableshape-property.md b/docs/api/config/tableshape-property.md index 3f1e70f..c0d4ed3 100644 --- a/docs/api/config/tableshape-property.md +++ b/docs/api/config/tableshape-property.md @@ -48,25 +48,25 @@ tableShape?: { - `templates` - (optional) allows setting templates to a cell; it's an object where: - each key is a field id - the value is a function that returns a string and receives cell value and operation. All columns based on the specified field will have the related template applied. For example, it allows setting the units of measurement or returning the required number of digits after the decimal point for numeric values, etc. See the example below. -- `marks` - (optional) allows marking a cell with the required values; it's an object where keys are CSS class names and values are either a function or one of the predefined strings ("max", "min"). The function should return boolean for the checked value; if **true** is returned, the css class is assigned to the cell. More information with examples see here [Marking cells](/guides/stylization#cell-style). +- `marks` - (optional) allows marking a cell with the required values. It's an object where keys are CSS class names and values are either a function or one of the predefined strings ("max", "min"). The function should return boolean for the checked value. If **true** is returned, the css class is assigned to the cell. More information with examples see here [Marking cells](/guides/stylization#cell-style). - `sizes` - (optional) defines the following size parameters of the table: - - `rowHeight` - (optional) the row height in the Pivot table in pixels; the default value is 34 + - `rowHeight` - (optional) the row height in the Pivot table in pixels. The default value is 34 - `headerHeight` - (optional) the header height in pixels; the default value is 30 - `footerHeight` - (optional) the footer height in pixels; the default value is 30 - `columnWidth` - (optional) the column width in pixels; the default value is 150 -- `cellStyle` - (optional) a function that applies a custom style to a cell; the function has the next parameters: +- `cellStyle` - (optional) a function that applies a custom style to a cell. The function has the next parameters: - `field` - (required) a string representing the field name for which the style is applied - `value` - (required) the value of the cell (the actual data for that particular row and column) - `area` - (required) a string indicating the area of the table where a cell resides ("rows", "columns" or "values" area) - `method` - (optional) a string that can represent the operation performed on a cell (e.g., "sum", "count", etc.) - `isTotal` - (optional) defines whether a cell belongs to a total row, total column, or both: "row"|"column"|"both The `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell. -- `tree` - (optional) if set to **true**, enables the tree mode when data can be presented with expandable rows; the default value is **false**; more information with examples see here [Switching to the tree mode](/guides/configuration/#enabling-the-tree-mode) -- `totalColumn` - (optional) if **true**, enables generating the total column with total values for rows (**false** is set by default); if the value is set to "sumOnly", the column with the total sum value will be generated (available only for sum operations) -- `totalRow` - (optional) if **true**, enables generating the footer with total values (**false** is set by default); if the value is set to "sumOnly", the row with the total row value will be generated (available only for sum operations) +- `tree` - (optional) if set to **true**, enables the tree mode when data can be presented with expandable rows, the default value is **false**. More information with examples see here [Switching to the tree mode](/guides/configuration/#enabling-the-tree-mode) +- `totalColumn` - (optional) if **true**, enables generating the total column with total values for rows (**false** is set by default). If the value is set to "sumOnly", the column with the total sum value will be generated (available only for sum operations) +- `totalRow` - (optional) if **true**, enables generating the footer with total values (**false** is set by default). If the value is set to "sumOnly", the row with the total row value will be generated (available only for sum operations) - `cleanRows` - (optional) if set to **true**, the duplicate values in scale columns are hidden in the table view. The default value is **false** - `split` - (optional) allows freezing columns on the right or left depending on the parameter specified (refer to [Freezing columns](/guides/configuration/#freezing-columns)): - - `left` (boolean) - if set to **true** (**false** is set by default), fixes the columns from the left, which makes columns static and visible while scrolling; the number of columns that are split is equal to the number of the rows fields that are defined in the [`config`](/api/config/config-property) property. + - `left` (boolean) - if set to **true** (**false** is set by default), fixes the columns from the left, which makes columns static and visible while scrolling. The number of columns that are split is equal to the number of the rows fields that are defined in the [`config`](/api/config/config-property) property - `right` (boolean) - fixes total columns on the right; default value is **false** By default, `tableShape` is undefined, implying that no total row, no total column is present, no templates and marks are applied, the data is shown as a table and not a tree, and columns are not fixed during scroll. @@ -113,5 +113,8 @@ const table = new pivot.Pivot("#root", { - [Pivot 2. Frozen (fixed) columns](https://snippet.dhtmlx.com/lahf729o) - [Pivot 2. Set row, header, footer height and all columns width](https://snippet.dhtmlx.com/x46uyfy9) - [Pivot 2. Clean rows](https://snippet.dhtmlx.com/rwwhgv2w?tag=pivot) +- [Pivot 2. Pivot 2: Adding сustom CSS for table and header cells](https://snippet.dhtmlx.com/nfdcs4i2) -**Related article**: [Configuration](/guides/configuration) +**Related articles**: +- [Configuration](/guides/configuration) +- [Cell style](/guides/stylization/#cell-style) diff --git a/docs/api/events/render-table-event.md b/docs/api/events/render-table-event.md index 33870b9..69b2773 100644 --- a/docs/api/events/render-table-event.md +++ b/docs/api/events/render-table-event.md @@ -42,8 +42,10 @@ The callback of the action takes the `config` object with the following paramete - `columns` - (optional) columns array with the next parameters for each object: - `id` (number) - (required) the id of a column - - `cell` (any) - (optional) a template with the cell content (please, refer to [Applying templates to cells](/guides/configuration/#applying-templates-to-cells)) + - `cell` (any) - (optional) a template with the cell content (please, refer to [Adding templates via the template helper](/guides/configuration/#adding-a-template-via-the-template-helper)) + - `template` - (optional) the template that is defined via the [`tableShape`](/api/config/tableshape-property) property - `fields` (array) - (optional) defines fields in the hierarchical column in the tree mode. Reflects fields displayed in this column on different levels + - `field` - (optional) it's a string which is the id of a field - `method` (string) - (optional) a method, if defined for a field in this column - `methods` (array) - (optional) defines methods applied to fields in the hierarchical column in the tree mode - `format` (string or object) - (required) [date format](/guides/custom-formatting/#custom-date-formatting) or [number format](/guides/custom-formatting/#custom-number-formatting) @@ -59,9 +61,7 @@ The callback of the action takes the `config` object with the following paramete - `method` (string) - (required) the field predicate, if a cell belongs to "columns" area and predicate is defined - `format` (string or object) - [date format](/guides/custom-formatting/#custom-date-formatting) or [number format](/guides/custom-formatting/#custom-number-formatting) - `footer` - (optional) a header label or an object with footer settings which are the same as the header settings - - `field` - (optional) it's a string which is the id of a field - - `template` - (optional) the template that is defined via the [`tableShape`](/api/config/tableshape-property) property -- `data` - (optional) an array of objects with data for the table; each object represents a row: + - `data` - (optional) an array of objects with data for the table; each object represents a row: - `id` (number) - (required) row id - `values` (array) - (required) an array with row data - `open` (boolean)- (optional) branch state diff --git a/docs/api/helpers/template.md b/docs/api/helpers/template.md index 863da16..5fc2dbf 100644 --- a/docs/api/helpers/template.md +++ b/docs/api/helpers/template.md @@ -35,8 +35,10 @@ For body cells the function takes the next parameters: - `$level` (boolean)- (optional) branch index - `column` - (required) an object with column data: - `id` (number) - (required) the id of a column - - `cell` (any) - (optional) a template with the cell content (please, refer to [Applying templates to cells](/guides/configuration/#applying-templates-to-cells)) + - `cell` (any) - (optional) a template with the cell content (please, refer to [Adding templates via the template helper](/guides/configuration/#adding-a-template-via-the-template-helper)) + - `template` - (optional) the template that is defined via the [`tableShape`](/api/config/tableshape-property) property - `fields` (array) - (optional) defines fields in the hierarchical column in the tree mode. Reflects fields displayed in this column on different levels + - `field` - (optional) it's a string which is the id of a field - `method` (string) - (optional) a method, if defined for a field in this column - `methods` (array) - (optional) defines methods applied to fields in the hierarchical column in the tree mode - `format` (string or object) - (required) [date format](/guides/custom-formatting/#custom-date-formatting) or [number format](/guides/custom-formatting/#custom-number-formatting) @@ -49,12 +51,12 @@ For body cells the function takes the next parameters: - `colspan` (number) - (optional) the number of columns a header should span - `value` (any) - (required) raw value, if a cell belongs to "columns" area - `field` (string) - (required) a field, which value is displayed, if a cell belongs to "columns" area - - `method` (string) - (required) a field predicate, if a cell belongs to "columns" area and predicate is defined - - `format` (string or object) - (required) [date format](/guides/custom-formatting/#custom-date-formatting) or [number format](/guides/custom-formatting/#custom-number-formatting) + - `method` (string) - (required) the field predicate, if a cell belongs to "columns" area and predicate is defined + - `format` (string or object) - [date format](/guides/custom-formatting/#custom-date-formatting) or [number format](/guides/custom-formatting/#custom-number-formatting) For header cells the function parameters are the following: -- `value` (any) - (required) raw cell value +- `value` (any) - (required) a raw cell value - `method` (string) - (optional) a predicate used for a column - `field` (string) - (optional) a field which value is displayed in a cell - `cell` - (required) an object with cell data: diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index aa265c3..8f1e048 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -170,7 +170,7 @@ const table = new pivot.Pivot("#root", { ### Adding a template via the template helper -You can also define HTML templates using the [`pivot.template`](/api/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `columns` array. Define the template via the `pivot.template` helper. +You can also define a template as a cell property of the `column` object via the [`pivot.template`](/api/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `columns` array. Define the template via the `pivot.template` helper. The example shows how you can add icons (star or flag icon) to body cells based on their field (id, user_score): @@ -201,7 +201,7 @@ function scoreTemplate(value) { widget.api.intercept("render-table", ({ config: tableConfig }) => { tableConfig.columns = tableConfig.columns.map((c) => { if (c.area === "rows") { - // Apply a template to body cells in row fields + // Apply a template to column cells from the "rows" area c.cell = pivot.template(({ value, method, row, column }) => cellTemplate(value, method, row, column)); } return c; @@ -251,7 +251,7 @@ const table = new pivot.Pivot("#root", { ### Adding templates via the template helper -You can also define HTML templates using the [`pivot.template`](/api/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `header` parameter in the `columns` array. Define the template via the `pivot.template` helper. +You can also define a template as a cell property of the `header` object via the [`pivot.template`](/api/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `header` parameter in the `columns` array. Define the template via the `pivot.template` helper. The example below shows how to add icons to: @@ -276,10 +276,10 @@ function statusTemplate(value) { widget.api.intercept("render-table", ({ config: tableConfig }) => { tableConfig.columns = tableConfig.columns.map((c) => { if (c.area === "rows") { - // Apply a template to the first header row of row fields + // Apply a template to the first header row of the columns from the "rows" area c.header[0].cell = pivot.template(({ value, field }) => rowsHeaderTemplate(value, field)); } else { - // For headers in columns (like "status") + // For header cells that display values from the "status" field const headerCell = c.header.find((h) => h.field === "status"); if (headerCell) { headerCell.cell = pivot.template(({ value }) => statusTemplate(value)); diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index 42e9891..86afadd 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -100,22 +100,59 @@ You can also apply a custom style to the scroll bar of Pivot. For this, you can ## Cell style -To apply a CSS class to a cell, use the `cellStyle` parameter of the [`tableShape`](/api/config/tableshape-property) property. The `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell. In the example provided, if the `method` contains "count", it will return the string "count", which is associated with the related CSS class. +To apply a CSS class to the table body cell, use the `cellStyle` parameter of the [`tableShape`](/api/config/tableshape-property) property. The style of the header and footer cells can be customized via the `cellStyle` parameter of the [`headerShape`](/api/config/tableshape-property) property. In both cases the `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell. + +In the example below the styles of cells in the table body and headers are customized in the following way: +- for the table body cells, styles are applied dynamically based on cell values (e.g., "Down", "Up", "Idle") in the "status" field and on total values (greater than 40 or less than 5) +- the style of header cells is determined by the value in the "streaming" field, with specific styles applied for "no" or other values (the CSS class "status-down" is applied for the "no" value and "status-up" is applied for the not "no" value) ~~~jsx - // Cell style function - const cellStyle = (field, value, area, method) => { - if (method?.indexOf("count") > -1) return "count"; - }; - - const table = new pivot.Pivot("#root", { - fields, - data, - config, - tableShape: { - cellStyle // Apply the cellStyle function +const widget = new pivot.Pivot("#pivot", { + tableShape: { + totalColumn: true, + totalRow:true, + cellStyle: (field, value, area, method, isTotal) => { + if (field === "status" && area === "rows" && value) { + if (value === "Down") { + return "status-down"; + } else if (value === "Up") { + return "status-up"; + } else if (value === "Idle") { + return "status-idle"; + } + } + if(isTotal ==="column" && area == "values"){ + if(value > 40) + return "status-up"; + else if (value < 5) + return "status-down"; + } } - }); + }, + headerShape:{ + cellStyle:(field, value, area, method, isTotal) => { + if(field == "streaming") + return value ==="no"?"status-down":"status-up"; + } + }, + fields, + data: dataset, + config: { + rows: [ + "protocol", + "status", + ], + columns: [ + "streaming" + ], + values: [ + { + field: "id", + method: "count" + } + ] + } +}); ~~~ From f89edc5ab3776f751f7a198b46660b70d89a89a1 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Sat, 26 Apr 2025 19:56:49 +0300 Subject: [PATCH 36/53] [update] headerShape.cellStyle updated, number formatting upd --- docs/api/config/headershape-property.md | 13 ++++++++++--- docs/api/config/tableshape-property.md | 8 +++++++- docs/guides/localization.md | 11 +++-------- docs/guides/stylization.md | 10 ++++++++++ 4 files changed, 30 insertions(+), 12 deletions(-) diff --git a/docs/api/config/headershape-property.md b/docs/api/config/headershape-property.md index 3e9438d..2635394 100644 --- a/docs/api/config/headershape-property.md +++ b/docs/api/config/headershape-property.md @@ -16,7 +16,14 @@ description: You can learn about the headerShape config in the documentation of headerShape?: { collapsible?: boolean, vertical?: boolean, - template?: (label: string, field: string, subLabel?: string) => string + template?: (label: string, field: string, subLabel?: string) => string, + cellStyle?: ( + field: string, + value: any, + area: "rows"|"columns"|"values", + method?: string, + isTotal?: boolean) + => string, }; ~~~ @@ -28,7 +35,7 @@ headerShape?: { - `field` (string) - (required) a string representing the field name the cell corresponds to. For the header of the tree column the field is "" - `value` (string | number | date) - (required) the value of a cell - `area` - (required) a string indicating the area of the table where a cell resides ("rows", "columns" or "values" area) - - `method` string - (optional) a string that can represent the operation performed for a field from the "values` area (e.g., "sum", "count", etc.) or the name of a predicate set for a field from the "columns" area + - `method` (string) - (optional) a string that can represent the operation performed for a field from the "values` area (e.g., "sum", "count", etc.) or the name of a predicate set for a field from the "columns" area - `isTotal` - (optional) defines whether a cell belongs to a total column - `template` - (optional) defines the format of text in headers. By default, for the fields applied as rows the value of the `label` parameter is displayed and for the fields applied as values the label and method are shown (e.g., *Oil(count)*). The function takes the field id, label and the method or predicate id (if any) and returns the processed value. The default template is as follows: ~~~js @@ -58,7 +65,7 @@ const table = new pivot.Pivot("#root", { }, headerShape: { vertical: true, - template: (label, field, subLabel) => field + (subLabel ? ` (${subLabel})` : "") + template: (label, field, subLabel) => field + (subLabel ? ` (${subLabel})` : ""), } }); ~~~ diff --git a/docs/api/config/tableshape-property.md b/docs/api/config/tableshape-property.md index c0d4ed3..ea8146b 100644 --- a/docs/api/config/tableshape-property.md +++ b/docs/api/config/tableshape-property.md @@ -39,7 +39,13 @@ tableShape?: { left?: boolean, right?: boolean, }, - cellStyle?: (field: string, value: any, area: string, method?: string, isTotal?: string) => string, + cellStyle?: ( + field: string, + value: any, + area: "rows"|"columns"|"values", + method?: string, + isTotal?: "row"|"column"|"both") + => string, }; ~~~ diff --git a/docs/guides/localization.md b/docs/guides/localization.md index f97df20..8ca199f 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -267,20 +267,15 @@ To present the 20th of June, 2024 with the exact time as *2024-09-20 16:47:08.12 ## Number formatting -By default, all fields with the *number* type are localized according to the locale (the value in the `lang` field of the locale). The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) object enables language-sensitive number formatting. In case you need to set a custom format to a specific field, use the `format` parameter of the [`fields`](/api/config/fields-property) property. By default, the format for numeric values limits fraction digits to 3 and applies group separation for the integer part. The `format` parameter allows you to display numeric values without group separation (for example, years): +By default, all fields with the number type are localized according to the locale (the value in the `lang` field of the locale). Pivot uses [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) specification. By default the fraction digits are limited to 3 and group separation is applied for the integer part. +In case you do not need to format specific fields with numeric values or need to set a custom format, use the the `format` parameter of the [`fields`](/api/config/fields-property) property. It can be either *false* to cancel formatting or an object with format settings (refer to [Custom number formatting](/guides/custom-formatting/#custom-number-formatting)). -~~~js +~~~jsx const fields = [ { id: "year", label: "Year", type: "number", format: false}, ]; ~~~ -For more information, refer to [Custom number formatting](/guides/custom-formatting/#custom-number-formatting). - -:::info -In case you need to disable formatting of some fields, set the `format` parameter of the [`fields`](/api/config/fields-property) property to *false*. -::: - ## Example In this snippet you can see how to switch between several locales: diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index 86afadd..d02cffd 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -155,6 +155,16 @@ const widget = new pivot.Pivot("#pivot", { }); ~~~ +It's also possible to customize the style of total columns and total rows via the `wx-total` class: + +~~~html + +~~~ ## Marking cells From c9d6196b3dfa19429c79bdd346495877ebd158bc Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Sat, 26 Apr 2025 20:03:54 +0300 Subject: [PATCH 37/53] [update] export upd --- docs/guides/exporting-data.md | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/docs/guides/exporting-data.md b/docs/guides/exporting-data.md index a48a47c..bc29555 100644 --- a/docs/guides/exporting-data.md +++ b/docs/guides/exporting-data.md @@ -67,25 +67,21 @@ The `export` action of the Table widget has the next parameters that you can con - `sheetName` (string) - a name of Excel sheet ( "data" by default) - `styles` (boolean or object) - if set to **false**, grid will be exported without any styling; can be configured using a hash of style properties: - - header - an object with the next settings for header cells: + - `header` - an object with the next settings for header cells: - `fontWeight` (string) - (optional) can be set to "bold" or if not set, the font will be normal - `color` (string) - (optional) text color in header - `background` (string) - (optional) background color for header - `align` - (optional) text alignment that can be "left"|"right"|"center". If not set, alignment set in Excel will be applied - `borderBottom` (string) - (optional) the style of the bottom border - `borderRight` (string) - (optional) the style of the right border (e.g., *borderRight: "0.5px solid #dfdfdf"* ) - - lastHeaderCell - style properties for the last row of header cells. Properties are the same as for *header* - - cell - style properties for body cells.Properties are the same as for *header* - - firstFooterCell - style properties for the first row of footer cells. Properties are the same as for *header* - - footer - style properties for footer cells. Properties are the same as for *header* + - `lastHeaderCell` - style properties for the last row of header cells. Properties are the same as for *header* + - `cell` - style properties for body cells.Properties are the same as for *header* + - `firstFooterCell` - style properties for the first row of footer cells. Properties are the same as for *header* + - `footer` - style properties for footer cells. Properties are the same as for *header* - `cellTemplate` - a function to customize the export value of each cell. It takes the value, row, and column objects as parameters and returns the custom value to be exported - `headerCellTemplate` - a function that customizes the value of a header or footer cell during export. It is called with the text, header cell object, column object, and cell type ("header" or "footer"). This allows users to modify the exported header/footer values - `cellStyle` - a function that allows customizing the style and format of individual cells during export. It takes the value, row, and column objects as parameters and should return an object with style properties (e.g., alignment or format) - `headerCellStyle` - similar to cellStyle, but specifically for the header and footer cells. This function takes the text, header cell object, column object, and type ("header" or "footer") and returns style properties - - `header` (boolean) - (optional) defines if a header should be exported (**true** by default) - - `footer` (boolean) - (optional) defines if a footer should be exported (**true** by default) - - `download` (boolean) - (optional) defines whether to download a file. **true** is set by default. If set to **false**, the file will not be downloaded, Excel data (Blob) will be available as `ev.result` - :::note By default, for the "xlsx" format, date and number fields are exported as raw values with default format or the format defined via the [`fields`](/api/config/fields-property) property. But if a template is defined for a field (see the [`tableShape`](/api/config/tableshape-property) property), it exports the rendered value defined by that template. In case both the template and `format` are set, the template settings will override the format ones. ::: From 5df66363362301637e5f51a3115a14a9cef53d18 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Wed, 30 Apr 2025 13:08:47 +0300 Subject: [PATCH 38/53] [update] configuration.applyong-te,plates-via-teplate-helper upd, styling changed, custom-formatting corrected --- docs/api/config/tableshape-property.md | 12 +++++------ docs/guides/configuration.md | 4 ++-- docs/guides/custom-formatting.md | 7 ++---- docs/guides/stylization.md | 30 +++++++++++++------------- 4 files changed, 25 insertions(+), 28 deletions(-) diff --git a/docs/api/config/tableshape-property.md b/docs/api/config/tableshape-property.md index ea8146b..060f807 100644 --- a/docs/api/config/tableshape-property.md +++ b/docs/api/config/tableshape-property.md @@ -40,12 +40,12 @@ tableShape?: { right?: boolean, }, cellStyle?: ( - field: string, - value: any, - area: "rows"|"columns"|"values", - method?: string, - isTotal?: "row"|"column"|"both") - => string, + field: string, + value: any, + area: "rows"|"columns"|"values", + method?: string, + isTotal?: "row"|"column"|"both") + => string, }; ~~~ diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 8f1e048..19fe917 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -170,7 +170,7 @@ const table = new pivot.Pivot("#root", { ### Adding a template via the template helper -You can also define a template as a cell property of the `column` object via the [`pivot.template`](/api/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `columns` array. Define the template via the `pivot.template` helper. +You can insert HTML content to table cells via the [`pivot.template`](/api/helpers/template) helper by defining a template as a `cell` property of the `column` object. You need to apply the template right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. The example shows how you can add icons (star or flag icon) to body cells based on their field (id, user_score): @@ -251,7 +251,7 @@ const table = new pivot.Pivot("#root", { ### Adding templates via the template helper -You can also define a template as a cell property of the `header` object via the [`pivot.template`](/api/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `header` parameter in the `columns` array. Define the template via the `pivot.template` helper. +You can insert HTML content to header cells via the [`pivot.template`](/api/helpers/template) helper by defining a template as a `cell` property of the header cell object. You need to apply the template right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. The example below shows how to add icons to: diff --git a/docs/guides/custom-formatting.md b/docs/guides/custom-formatting.md index 4fa1f0b..55edb92 100644 --- a/docs/guides/custom-formatting.md +++ b/docs/guides/custom-formatting.md @@ -18,7 +18,7 @@ const fields = [ ]; ~~~ -By default, the format for numeric values limits fraction digits to 3 and applies group separation for the integer part. The `format` parameter allows you to display numeric values without group separation (for example, years): +By default, the format for numeric values limits fraction digits to 3 and applies group separation for the integer part. You can cancel formatting by setting `format` to *false* in the `field` configuration: ~~~js const fields = [ @@ -86,7 +86,7 @@ const fields = [ ]; ~~~ -In the example below we set the date format to "%d %M %Y %H:%i" for the "date" field only. The format displays day, full month name, year, hours, and minutes, e.g., "24 April 2025 14:30". +In the example below we set the date format to "%d %M %Y %H:%i" for the "date" field only. The format displays day, full month name, year, hours, and minutes, e.g., "24 April 2025 14:30". In case you need to disable formatting of some fields, set the `format` parameter of the [`fields`](/api/config/fields-property) property to *false*. ~~~jsx const fields = [ @@ -134,9 +134,6 @@ new pivot.Pivot("#pivot", { }); ~~~ -:::info -In case you need to disable formatting of some fields, set the `format` parameter of the [`fields`](/api/config/fields-property) property to *false*. -::: ## Example diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index d02cffd..5f6a789 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -100,7 +100,7 @@ You can also apply a custom style to the scroll bar of Pivot. For this, you can ## Cell style -To apply a CSS class to the table body cell, use the `cellStyle` parameter of the [`tableShape`](/api/config/tableshape-property) property. The style of the header and footer cells can be customized via the `cellStyle` parameter of the [`headerShape`](/api/config/tableshape-property) property. In both cases the `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell. +To apply a CSS class to the table body or footer cells, use the `cellStyle` parameter of the [`tableShape`](/api/config/tableshape-property) property. The style of the header cells can be customized via the `cellStyle` parameter of the [`headerShape`](/api/config/tableshape-property) property. In both cases the `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell. In the example below the styles of cells in the table body and headers are customized in the following way: - for the table body cells, styles are applied dynamically based on cell values (e.g., "Down", "Up", "Idle") in the "status" field and on total values (greater than 40 or less than 5) @@ -155,20 +155,9 @@ const widget = new pivot.Pivot("#pivot", { }); ~~~ -It's also possible to customize the style of total columns and total rows via the `wx-total` class: +## Marking values in cells -~~~html - -~~~ - -## Marking cells - -The widget API allows marking cells with the required values. You can do it by applying the `marks` parameter of the [`tableShape`](/api/config/tableshape-property) property. You need to do the following: +The widget API allows marking required values in cells. You can do it by applying the `marks` parameter of the [`tableShape`](/api/config/tableshape-property) property. You need to do the following: - create a CSS class to be applied to the marked cell - add the CSS class name as the parameter of the `marks` object - set its value which can be a custom function or one of the predefined strings ("max", "min"). The function should return boolean for the checked value; if **true** is returned, the css class is assigned to the cell. @@ -224,7 +213,7 @@ const table = new pivot.Pivot("#root", { ~~~ -## Aligning numbers in a cell +## Specific CSS classes By default, in the table body numbers are aligned to the right with the help of the built-in `.wx-number` CSS class. The exception is the hierarchical column in the tree mode (when `tree` is set to **true** for the [`tableShape`](/api/config/tableshape-property) property). To reset the default number alignment, change the related CSS class. @@ -236,6 +225,17 @@ By default, in the table body numbers are aligned to the right with the help of ~~~ +It's also possible to customize the style of total columns and total rows via the ` .wx-total` CSS class: + +~~~html + +~~~ + ## Example In this snippet you can see how to apply a custom style to Pivot From 5f81c224f09c951cac5f8f35f9fb4e945b469334 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Wed, 30 Apr 2025 13:21:09 +0300 Subject: [PATCH 39/53] [update] headerShape upd --- docs/api/config/headershape-property.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/config/headershape-property.md b/docs/api/config/headershape-property.md index 2635394..c1050d6 100644 --- a/docs/api/config/headershape-property.md +++ b/docs/api/config/headershape-property.md @@ -31,7 +31,7 @@ headerShape?: { - `collapsible` - (optional) if set to **true**, dimension groups in the table are collapsible. It's set to **false** by default - `vertical` - (optional) if set to **true**, changes the text orientation in all headers from horizontal to vertical. The default value is **false** -- `cellStyle` - (optional) a function that applies a custom style to a header or footer cell. The function returns a name of css class and takes the following parameters: +- `cellStyle` - (optional) a function that applies a custom style to a header cell. The function returns a name of css class and takes the following parameters: - `field` (string) - (required) a string representing the field name the cell corresponds to. For the header of the tree column the field is "" - `value` (string | number | date) - (required) the value of a cell - `area` - (required) a string indicating the area of the table where a cell resides ("rows", "columns" or "values" area) From dd89e5fb3eddc338a4ccc86ff7be612f3bf15d42 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Wed, 30 Apr 2025 17:03:01 +0300 Subject: [PATCH 40/53] [update] whats_new upd --- docs/news/whats-new.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/docs/news/whats-new.md b/docs/news/whats-new.md index e250959..a007682 100644 --- a/docs/news/whats-new.md +++ b/docs/news/whats-new.md @@ -15,11 +15,14 @@ Released on ... ### New functionality - [Ability to freeze columns on the right](/guides/configuration/#freezing-columns) -- [Numbers are formatted](/guides/localization/#number-formatting) according to the current locale with possibility to define custom number formats within templates. `format` added to the [`fields`](/api/config/fields-property) property -- [Ability to change the number alignment in a cell](/guides/stylization/#aligning-numbers-in-a-cell) -- [Ability to style cells](/guides/stylization/#cell-style) -- Text fields and numbers are exported as they are seen in grid cells. If a template is applied to a cell, the rendered value is exported. -- Cell navigation with a focus frame +- [Numbers are formatted](/guides/localization/#number-formatting) according to the current locale with [a new possibility to define custom number formats within templates](/guides/custom-formatting) (for date and numeric fields) via `format` added to the [`fields`](/api/config/fields-property) property +- [Ability to style header and table cells](/guides/stylization/#cell-style) via the `cellStyle` parameter of the [`tableShape`](/api/config/tableshape-property) and [`headerShape`](/api/config/tableshape-property) properties +- Ability to insert HTML content to header and table cells via the [`pivot.template`](/api/helpers/template) helper by defining a template as a `cell` property of the header and column objects (table customization by intercepting the [render-table](/api/events/render-table-event) event) +- [Excel and CSV export settings enhanced](/guides/exporting-data): + - date and number fields are exported as raw values with default format or the format defined via the [`fields`](/api/config/fields-property) property; if a template is applied to a cell, the rendered value is exported + - ability to add a file name, define whether to display heder/footer in the exported file, and other settings + - ability to style cells and add export templates +- Visual frame for cell navigation ### Fixes From c6cb34a769f5fccaad0377c9143f8ca46317e257 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Wed, 30 Apr 2025 17:17:20 +0300 Subject: [PATCH 41/53] [update] whats_new upd --- docs/news/whats-new.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/news/whats-new.md b/docs/news/whats-new.md index a007682..e867ff9 100644 --- a/docs/news/whats-new.md +++ b/docs/news/whats-new.md @@ -14,7 +14,7 @@ Released on ... ### New functionality -- [Ability to freeze columns on the right](/guides/configuration/#freezing-columns) +- [Ability to freeze columns on the right](/guides/configuration/#freezing-columns-on-the-right) - [Numbers are formatted](/guides/localization/#number-formatting) according to the current locale with [a new possibility to define custom number formats within templates](/guides/custom-formatting) (for date and numeric fields) via `format` added to the [`fields`](/api/config/fields-property) property - [Ability to style header and table cells](/guides/stylization/#cell-style) via the `cellStyle` parameter of the [`tableShape`](/api/config/tableshape-property) and [`headerShape`](/api/config/tableshape-property) properties - Ability to insert HTML content to header and table cells via the [`pivot.template`](/api/helpers/template) helper by defining a template as a `cell` property of the header and column objects (table customization by intercepting the [render-table](/api/events/render-table-event) event) From 62a2430bf4187583ab0c78d6b8089beacbb8a6bb Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Fri, 2 May 2025 13:32:20 +0300 Subject: [PATCH 42/53] [update] styling corrected --- docs/guides/stylization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index 5f6a789..3b2967c 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -225,7 +225,7 @@ By default, in the table body numbers are aligned to the right with the help of ~~~ -It's also possible to customize the style of total columns and total rows via the ` .wx-total` CSS class: +It's also possible to customize the style of total columns via the ` .wx-total` CSS class: ~~~html