{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Data Sheet","description":"Accelerate E&P application development and protect your innovation by consuming our Data and Domain APIs / Platform APIs.","lang":"en-US","meta":[{"name":"robots","content":"noindex"}],"llmstxt":{"hide":true,"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"data-sheet","__idx":0},"children":["Data Sheet"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In this tutorial, we will demonstrate how to create a Datasheet using the DataSheet widget. DataSheet widget is similar to TableView widget but it also includes features that allow the user to have more control of the content and styles of cells."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"create-empty-datasheet","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/Datasheet/datasheet#createEmptyDatasheet"},"children":["#"]}," Create Empty Datasheet"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example shows how to create a basic DataSheet widget without any data. However, the user can click on any cell to edit its content."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This table also has customized even and odd rows and columns fill color. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['header']['headerdata']"]}," is array of column names and will be automatically generated if empty. Likewise, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['index'] ['indexdata']"]}," is array of row names."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { DataSheet } from \"@int/geotoolkit/widgets/datasheet/DataSheet.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nfunction createScene(canvas) {\n const dataSheet = new DataSheet({\n \"bounds\": new Rect(0, 0, canvas.width, canvas.height),\n \"rows\": 100,\n \"cols\": 100,\n \"mincolumnwidth\": 80,\n \"horizontalscroll\": \"floating\",\n \"verticalscroll\": \"floating\",\n \"header\": {\n \"textstyle\": {\n \"font\": \"12px Roboto\"\n }\n },\n \"content\": {\n \"gridstyle\": {\n \"color\": \"gray\",\n \"pixelsnapmode\": true\n }\n }\n });\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": dataSheet\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Widgets/Datasheet/datasheet?section=createEmptyDatasheet&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"datasheet-with-sample-data","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/Datasheet/datasheet#datasheetWithSampleData"},"children":["#"]}," Datasheet with sample data"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example shows how to create a DataSheet widget with data and disable feature allows editing of table content. User can disable table content editing feature by using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setContentEditable(false)"]},". header is an array of column names and is passed into ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['header']['headerdata']"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Likewise, index is an array of row names, and is passed into ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['index']['indexdata']"]},". data is an array of data to supply ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['data']"]}," of DataSheet. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['autotablesize']"]}," will calculate table size base on data array size and ignore ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['cols']"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['rows']"]},". ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['mincolumnwidth']"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['minrowheight']"]}," are optional and to define minimum column width and minimum row height respectively. User can also use styles like alignment, baseline, and font for cell content in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['content']['textstyle']"]},"."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { DataSheet } from \"@int/geotoolkit/widgets/datasheet/DataSheet.ts\";\nimport { WrapMode } from \"@int/geotoolkit/widgets/datasheet/WrapMode.ts\";\nimport { AlignmentStyle, BaseLineStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { data } from \"/src/code/Carnac/Widgets/Datasheet/data.ts\";\nconst THEME_COLOR = \"gray\";\nfunction createScene(canvas) {\n function createDataSheet() {\n return new DataSheet({\n \"bounds\": new Rect(0, 0, canvas.width, canvas.height),\n \"autotablesize\": true,\n \"data\": data,\n \"mincolumnwidth\": 100,\n \"headervisible\": false,\n \"indexvisible\": false,\n \"content\": {\n \"textstyle\": {\n \"alignment\": AlignmentStyle.Center,\n \"baseline\": BaseLineStyle.Middle\n },\n \"gridstyle\": {\n \"color\": \"gray\",\n \"pixelsnapmode\": true\n }\n },\n \"horizontalscroll\": \"floating\",\n \"verticalscroll\": \"floating\"\n });\n }\n function adjustColumnsWidth(dataSheet2) {\n dataSheet2.getColumn(0).setWidth(50);\n dataSheet2.getColumn(1).setWidth(100);\n dataSheet2.getColumn(4).setWidth(70);\n dataSheet2.getColumn(8).setWidth(110);\n }\n function highlightRow(dataSheet2, columns, rowIndex, wrap) {\n wrap = wrap == null ? WrapMode.Cut : wrap;\n for (let i = 0; i < columns; ++i) {\n const cell = dataSheet2.getCell(rowIndex, i);\n cell.setWrapMode(wrap).setFillStyle(THEME_COLOR).setTextStyle(cell.getTextStyle().setColor(\"white\"));\n }\n }\n const dataSheet = createDataSheet();\n dataSheet.setContentEditable(false);\n adjustColumnsWidth(dataSheet);\n highlightRow(dataSheet, data[0].length, 0, WrapMode.Wrap);\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": dataSheet\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Widgets/Datasheet/datasheet?section=datasheetWithSampleData&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"datasheet-with-datatable","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/Datasheet/datasheet#datasheetWithDatatable"},"children":["#"]}," Datasheet with Datatable"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example shows how to create a DataSheet widget with data using DataTable."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { DataSheet } from \"@int/geotoolkit/widgets/datasheet/DataSheet.ts\";\nimport { WrapMode } from \"@int/geotoolkit/widgets/datasheet/WrapMode.ts\";\nimport { AlignmentStyle, BaseLineStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { datatable } from \"/src/code/Carnac/Widgets/Datasheet/data.ts\";\nconst THEME_COLOR = \"gray\";\nfunction createScene(canvas) {\n function createDataSheet() {\n return new DataSheet({\n \"bounds\": new Rect(0, 0, canvas.width, canvas.height),\n \"autotablesize\": true,\n \"data\": datatable,\n \"mincolumnwidth\": 100,\n \"headervisible\": false,\n \"indexvisible\": false,\n \"content\": {\n \"textstyle\": {\n \"alignment\": AlignmentStyle.Center,\n \"baseline\": BaseLineStyle.Middle\n },\n \"gridstyle\": {\n \"color\": \"gray\",\n \"pixelsnapmode\": true\n }\n },\n \"horizontalscroll\": \"floating\",\n \"verticalscroll\": \"floating\"\n });\n }\n function adjustColumnsWidth(dataSheet2) {\n dataSheet2.getColumn(0).setWidth(50);\n dataSheet2.getColumn(1).setWidth(100);\n dataSheet2.getColumn(4).setWidth(70);\n dataSheet2.getColumn(8).setWidth(110);\n }\n function highlightRow(dataSheet2, columns, rowIndex, wrap) {\n wrap = wrap == null ? WrapMode.Cut : wrap;\n for (let i = 0; i < columns; ++i) {\n const cell = dataSheet2.getCell(rowIndex, i);\n cell.setWrapMode(wrap).setFillStyle(THEME_COLOR).setTextStyle(cell.getTextStyle().setColor(\"white\"));\n }\n }\n const dataSheet = createDataSheet();\n adjustColumnsWidth(dataSheet);\n highlightRow(dataSheet, datatable.getNumberOfColumns(), 0, WrapMode.Wrap);\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": dataSheet\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Widgets/Datasheet/datasheet?section=datasheetWithDatatable&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customize-datasheet","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/Datasheet/datasheet#customizeDatasheet"},"children":["#"]}," Customize Datasheet"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to set fill color for rows and columns as well as set style for an individual cell."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setColumnsFillStyle"]}," method and",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setRowsFillStyle"]}," can be used to set fill color for rows and columns."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setCellFillStyle"]}," method can be used to set fill color of an individual cell."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setCellBorder"]}," method can be used to set border of an individual cell."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["User can also set row height and column width by using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setRowsHeight"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setColumnsWidth"]}," methods."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In this example, the largest value of every column is highlighted."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { DataSheet } from \"@int/geotoolkit/widgets/datasheet/DataSheet.ts\";\nimport { WrapMode } from \"@int/geotoolkit/widgets/datasheet/WrapMode.ts\";\nimport { AlignmentStyle, BaseLineStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { LineStyle } from \"@int/geotoolkit/attributes/LineStyle.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { data } from \"/src/code/Carnac/Widgets/Datasheet/data.ts\";\nconst THEME_COLOR = \"gray\";\nfunction createScene(canvas) {\n function createDataSheet() {\n return new DataSheet({\n \"bounds\": new Rect(0, 0, canvas.width, canvas.height),\n \"autotablesize\": true,\n \"data\": data,\n \"mincolumnwidth\": 100,\n \"headervisible\": false,\n \"indexvisible\": false,\n \"content\": {\n \"textstyle\": {\n \"alignment\": AlignmentStyle.Center,\n \"baseline\": BaseLineStyle.Middle\n },\n \"gridstyle\": {\n \"color\": \"gray\",\n \"pixelsnapmode\": true\n }\n },\n \"horizontalscroll\": \"floating\",\n \"verticalscroll\": \"floating\"\n });\n }\n function adjustColumnsWidth(dataSheet2) {\n dataSheet2.getColumn(0).setWidth(50);\n dataSheet2.getColumn(1).setWidth(100);\n dataSheet2.getColumn(4).setWidth(70);\n dataSheet2.getColumn(8).setWidth(110);\n }\n function highlightRow(dataSheet2, columns, rowIndex, wrap) {\n wrap = wrap == null ? WrapMode.Cut : wrap;\n for (let i = 0; i < columns; ++i) {\n const cell = dataSheet2.getCell(rowIndex, i);\n cell.setWrapMode(wrap).setFillStyle(THEME_COLOR).setTextStyle(cell.getTextStyle().setColor(\"white\"));\n }\n }\n function customizeDataSheet(dataSheet2) {\n const borderLineStyle = new LineStyle({ \"color\": THEME_COLOR, \"width\": 2 });\n for (let j = 1; j < data[0].length; j++) {\n const maxCell = {\n row: -1,\n column: -1,\n value: Number.MIN_VALUE\n };\n for (let i = 0; i < data.length; i++) {\n if (parseFloat(data[i][j]) > maxCell.value) {\n maxCell.row = i;\n maxCell.column = j;\n maxCell.value = parseFloat(data[i][j]);\n }\n }\n dataSheet2.getCell(maxCell.row, maxCell.column).setTextStyle({\n \"alignment\": AlignmentStyle.Center,\n \"baseline\": BaseLineStyle.Middle\n }).setBorder({\n \"left\": borderLineStyle,\n \"right\": borderLineStyle,\n \"top\": borderLineStyle,\n \"bottom\": borderLineStyle\n });\n }\n }\n const dataSheet = createDataSheet();\n customizeDataSheet(dataSheet);\n adjustColumnsWidth(dataSheet);\n highlightRow(dataSheet, data[0].length, 0, WrapMode.Wrap);\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": dataSheet\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Widgets/Datasheet/datasheet?section=customizeDatasheet&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"cut-and-wrap-text","__idx":5},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/Datasheet/datasheet#cutAndWrapText"},"children":["#"]}," Cut and wrap text"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["DataSheet widget also supports ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Cut"]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Wrap"]}," mode for text."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setWrapMode"]}," method to change cell content text size mode."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { DataSheet } from \"@int/geotoolkit/widgets/datasheet/DataSheet.ts\";\nimport { WrapMode } from \"@int/geotoolkit/widgets/datasheet/WrapMode.ts\";\nimport { AlignmentStyle, BaseLineStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nfunction createScene(canvas) {\n function createDataSheet() {\n return new DataSheet({\n \"bounds\": new Rect(0, 0, canvas.width, canvas.height),\n \"autotablesize\": true,\n \"rows\": 6,\n \"cols\": 5,\n \"mincolumnwidth\": 120,\n \"headervisible\": false,\n \"indexvisible\": false,\n \"content\": {\n \"textstyle\": {\n \"alignment\": AlignmentStyle.Center,\n \"baseline\": BaseLineStyle.Middle\n },\n \"gridstyle\": {\n \"color\": \"gray\",\n \"pixelsnapmode\": true\n }\n },\n \"horizontalscroll\": \"floating\",\n \"verticalscroll\": \"floating\"\n });\n }\n function addDataSheetData(dataSheet2) {\n dataSheet2.getCell(0, 0).setContentData(\"This is wrap mode, it makes very long text line into another line\", true);\n dataSheet2.getCell(0, 1).setContentData(\"This is cut mode, it does NOT makes very long text line into another line\", true);\n dataSheet2.getCell(1, 2).setContentData(\"Either modes\\nsupport multilines\\ntext\", true);\n dataSheet2.getCell(1, 3).setContentData(\"Text
supports basic HTML
text tags\", true);\n }\n const dataSheet = createDataSheet();\n dataSheet.getCell(0, 0).setWrapMode(WrapMode.Wrap);\n addDataSheetData(dataSheet);\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": dataSheet\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Widgets/Datasheet/datasheet?section=cutAndWrapText&extract=true","width":"100%","height":"288.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"cell-content-validation","__idx":6},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/Datasheet/datasheet#cellContentValidation"},"children":["#"]}," Cell content validation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["DataSheet widget also supports validation before submitting new cell text content after edit."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Initialize validation for the whole table by assigning a validator in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['content']['validator']"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setCellValidator"]}," method to set cell content validator. The method takes a function in the form ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["function (cellContent)"]}," as parameter."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Validator must return a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["boolean = true"]}," to mark cell text content as valid, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," otherwise. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cellContent"]}," is new cell text content and it has type ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In this example, we initialize validator to only allow number in DataSheet."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { DataSheet, ValidationPreset } from \"@int/geotoolkit/widgets/datasheet/DataSheet.ts\";\nimport { AlignmentStyle, BaseLineStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { data } from \"/src/code/Carnac/Widgets/Datasheet/data.ts\";\nfunction createScene(canvas) {\n function createDataSheet(data2, headerData2) {\n return new DataSheet({\n \"bounds\": new Rect(0, 0, canvas.width, canvas.height),\n \"autotablesize\": true,\n \"data\": data2,\n \"mincolumnwidth\": 100,\n \"indexvisible\": false,\n \"header\": {\n \"headerdata\": headerData2\n },\n \"content\": {\n \"validator\": ValidationPreset.Number,\n \"textstyle\": {\n \"alignment\": AlignmentStyle.Center,\n \"baseline\": BaseLineStyle.Middle\n },\n \"gridstyle\": {\n \"color\": \"gray\",\n \"pixelsnapmode\": true\n }\n },\n \"horizontalscroll\": \"floating\",\n \"verticalscroll\": \"floating\"\n });\n }\n function adjustColumnsWidth(dataSheet2) {\n dataSheet2.getColumn(0).setWidth(50);\n dataSheet2.getColumn(1).setWidth(100);\n dataSheet2.getColumn(4).setWidth(100);\n dataSheet2.getColumn(7).setWidth(120);\n dataSheet2.getColumn(8).setWidth(110);\n }\n function processedData() {\n const processedData2 = [];\n for (let i = 1; i < data.length; ++i) {\n processedData2[i - 1] = [];\n for (let j = 0; j < data[i].length; ++j) {\n let value = data[i][j];\n value = value.replace(/[,\\s%]/g, \"\");\n processedData2[i - 1][j] = value;\n }\n }\n return processedData2;\n }\n const headerData = data[0];\n const dataSheet = createDataSheet(processedData(), headerData);\n adjustColumnsWidth(dataSheet);\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": dataSheet\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Widgets/Datasheet/datasheet?section=cellContentValidation&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"merging-of-cells","__idx":7},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/Datasheet/datasheet#mergingOfCells"},"children":["#"]}," Merging of cells"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["DataSheet widget also supports merging of multiple cells. In this example, we merge some cells into one."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can try merge cells by click and drag to select a group of cell, then click on Merge/Unmerge cell button. Merged cell always has properties and data from the top-left cell in its group of cell."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In this example, ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["World Population (2020 and historical)"]}," cell properties and data is originally from cell at location ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["1A"]},"."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { DataSheet } from \"@int/geotoolkit/widgets/datasheet/DataSheet.ts\";\nimport { WrapMode } from \"@int/geotoolkit/widgets/datasheet/WrapMode.ts\";\nimport { DataSheetSelectionEvents } from \"@int/geotoolkit/widgets/tools/DataSheetSelection.ts\";\nimport { AlignmentStyle, BaseLineStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { datatable } from \"/src/code/Carnac/Widgets/Datasheet/data.ts\";\nconst THEME_COLOR = \"gray\";\nlet selection;\nfunction createScene(canvas) {\n function createDataSheet() {\n return new DataSheet({\n \"bounds\": new Rect(0, 0, canvas.width, canvas.height),\n \"autotablesize\": true,\n \"data\": datatable,\n \"mincolumnwidth\": 100,\n \"indexvisible\": false,\n \"headervisible\": false,\n \"content\": {\n \"textstyle\": {\n \"alignment\": AlignmentStyle.Center,\n \"baseline\": BaseLineStyle.Middle\n },\n \"gridstyle\": {\n \"color\": \"gray\",\n \"pixelsnapmode\": true\n }\n },\n \"horizontalscroll\": \"floating\",\n \"verticalscroll\": \"floating\"\n });\n }\n function addDataSheetData(dataSheet2) {\n dataSheet2.insertRow(1, [\"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\"]);\n dataSheet2.insertRow(0, [\"World Population (2020 and historical)\", \"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\"]);\n }\n function adjustColumnsWidth(dataSheet2) {\n dataSheet2.getColumn(0).setWidth(50);\n dataSheet2.getColumn(1).setWidth(100);\n dataSheet2.getColumn(4).setWidth(70);\n dataSheet2.getColumn(8).setWidth(110);\n }\n function highlightRow(dataSheet2, columns, rowIndex, wrap) {\n wrap = wrap == null ? WrapMode.Cut : wrap;\n for (let i = 0; i < columns; ++i) {\n const cell = dataSheet2.getCell(rowIndex, i);\n cell.setWrapMode(wrap).setFillStyle(THEME_COLOR).setTextStyle(cell.getTextStyle().setColor(\"white\"));\n }\n }\n function customizeDataSheet(dataSheet2) {\n dataSheet2.getCell(0, 0).setTextStyle(dataSheet2.getCell(0, 0).getTextStyle().setProperties({\n \"font\": \"18px Arial\"\n }));\n highlightRow(dataSheet2, dataSheet2.getNumberOfColumns(), 1, WrapMode.Wrap);\n }\n function mergeCells(dataSheet2) {\n const columns = dataSheet2.getNumberOfColumns();\n dataSheet2.mergeCells(dataSheet2.getCell(0, 0), dataSheet2.getCell(0, columns - 1));\n for (let i = 0; i < columns; ++i) {\n const cell = dataSheet2.getCell(1, i);\n dataSheet2.mergeCells(cell, dataSheet2.getCell(2, i));\n }\n }\n function connectDataSheetSelectionEvents(dataSheet2) {\n dataSheet2.on(DataSheetSelectionEvents.CellClicked, (source, eventName, selectionArgs) => {\n selection = {\n \"first\": selectionArgs.getFirstCellPosition(),\n \"last\": selectionArgs.getLastCellPosition()\n };\n });\n dataSheet2.on(DataSheetSelectionEvents.onPointerMoved, (source, eventName, selectionArgs) => {\n selection = {\n \"first\": selectionArgs.getFirstCellPosition(),\n \"last\": selectionArgs.getLastCellPosition()\n };\n });\n }\n const dataSheet = createDataSheet();\n adjustColumnsWidth(dataSheet);\n addDataSheetData(dataSheet);\n customizeDataSheet(dataSheet);\n mergeCells(dataSheet);\n connectDataSheetSelectionEvents(dataSheet);\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": dataSheet\n });\n}\nfunction mergeSelectedCells(mergeCellDataSheet) {\n if (mergeCellDataSheet == null || selection == null || selection[\"first\"] == null || selection[\"last\"] == null) {\n return;\n }\n const firstCell = mergeCellDataSheet.getCell(selection[\"first\"].getY(), selection[\"first\"].getX());\n const lastCell = mergeCellDataSheet.getCell(selection[\"last\"].getY(), selection[\"last\"].getX());\n mergeCellDataSheet.mergeCells(firstCell, lastCell);\n}\nfunction unmergeSelectedCell(mergeCellDataSheet) {\n if (mergeCellDataSheet == null || selection == null || selection[\"first\"] == null) {\n return;\n }\n const firstCell = mergeCellDataSheet.getCell(selection[\"first\"].getY(), selection[\"first\"].getX());\n mergeCellDataSheet.unmergeCells(firstCell);\n}\nexport { createScene, mergeSelectedCells, unmergeSelectedCell };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Widgets/Datasheet/datasheet?section=mergingOfCells&extract=true","width":"100%","height":"548.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Data Sheet","id":"data-sheet","depth":1},{"value":"Create Empty Datasheet","id":"create-empty-datasheet","depth":3},{"value":"Datasheet with sample data","id":"datasheet-with-sample-data","depth":3},{"value":"Datasheet with Datatable","id":"datasheet-with-datatable","depth":3},{"value":"Customize Datasheet","id":"customize-datasheet","depth":3},{"value":"Cut and wrap text","id":"cut-and-wrap-text","depth":3},{"value":"Cell content validation","id":"cell-content-validation","depth":3},{"value":"Merging of cells","id":"merging-of-cells","depth":3}],"frontmatter":{"title":"Data Sheet","seo":{"title":"Data Sheet"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/carnac/widgets/datasheet","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}