{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Table View","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":"table-view","__idx":0},"children":["Table View"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Table View Widget displays a list of tabular data in columns and rows, allowing users to scroll through the table. Table cell data can also be scrolled, edited, sorted and filtered and rows and columns can be manipulated. Please see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit.widgets.tableview.tableview.html"},"children":["geotoolkit/widgets/TableView"]}," for more details."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-table-view","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/TableView/tableViewWidget#basicTableView"},"children":["#"]}," Basic Table View"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example shows how to create a basic Table View widget without any data."]},{"$$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 { TableView } from \"@int/geotoolkit/widgets/TableView.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nfunction createScene(canvas) {\n  const tableViewWidget = new TableView({\n    \"horizontalscroll\": \"floating\",\n    \"verticalscroll\": \"floating\",\n    \"rows\": 4,\n    \"cols\": 4\n  });\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": tableViewWidget\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/TableView/tableViewWidget?section=basicTableView&extract=true","width":"100%","height":"248.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"tableview-with-data-provider","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/TableView/tableViewWidget#tableViewWithDataProvider"},"children":["#"]}," TableView with data provider"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the Table View widget, data can be provided through either an explicit function."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example illustrates: ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["How data can be provided through an Explicit Function"]},".",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"The Table View Data Source is in ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Table View Data Source"]}," code tab."]},{"$$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 { TableView } from \"@int/geotoolkit/widgets/TableView.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { TableViewDataSource } from \"/src/code/Carnac/Widgets/TableView/tableViewDataSource.ts\";\nimport { AlignmentStyle, BaseLineStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nfunction createScene(canvas) {\n  const ROW_COUNT = 10;\n  const COLUMN_COUNT = 7;\n  const TABLE_VIEW_CONFIG = {\n    \"indextitle\": \"Index\",\n    \"index\": {\n      \"textstyle\": {\n        \"color\": \"black\",\n        \"alignment\": AlignmentStyle.Center,\n        \"baseline\": BaseLineStyle.Middle\n      },\n      \"evenfillstyle\": \"lightblue\"\n    },\n    \"content\": {\n      \"textstyle\": {\n        \"color\": \"darkblue\",\n        \"alignment\": AlignmentStyle.Center,\n        \"baseline\": BaseLineStyle.Middle\n      },\n      \"evenfillstyle\": \"lightblue\"\n    },\n    \"header\": {\n      \"textstyle\": {\n        \"color\": \"black\",\n        \"alignment\": AlignmentStyle.Center,\n        \"baseline\": BaseLineStyle.Middle\n      }\n    },\n    \"horizontalscroll\": false,\n    \"verticalscroll\": false\n  };\n  function createTableViewWidget(data2) {\n    return new TableView().setData({\n      ...TABLE_VIEW_CONFIG,\n      \"dataprovider\": data2,\n      \"rows\": data2.getRowsCount(),\n      \"cols\": data2.getColumnsCount()\n    });\n  }\n  const data = new TableViewDataSource(ROW_COUNT, COLUMN_COUNT);\n  const tableViewWidget = createTableViewWidget(data);\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": tableViewWidget\n  });\n  tableViewWidget.setColumnsSize(-1, 40).fitToWidth();\n  return plot;\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/TableView/tableViewWidget?section=tableViewWithDataProvider&extract=true","width":"100%","height":"328.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"tableview-with-datatable","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/TableView/tableViewWidget#tableViewWithDataTable"},"children":["#"]}," TableView with DataTable"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the Table View widget, data can be provided through dataTable / dataTableView."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example illustrates: ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["How data can be provided through an DataTable"]},".",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Please refer to ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit.widgets.data.datatableadapter.datatableadapter.html"},"children":["geotoolkit/data/DataTableAdapter"]}," for more details."]},{"$$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 { TableView } from \"@int/geotoolkit/widgets/TableView.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { DataTable } from \"@int/geotoolkit/data/DataTable.ts\";\nimport { DataTableAdapter } from \"@int/geotoolkit/widgets/data/DataTableAdapter.ts\";\nfunction createScene(canvas) {\n  function createDataTable() {\n    const dataTable = new DataTable({\n      cols: [\n        { name: \"column1\", type: \"number\" },\n        { name: \"column2\", type: \"number\" },\n        { name: \"column3\", type: \"number\" },\n        { name: \"column4\", type: \"number\" },\n        { name: \"column5\", type: \"number\" },\n        { name: \"column6\", type: \"number\" },\n        { name: \"column7\", type: \"number\" },\n        { name: \"colomn8\", type: \"number\" }\n      ],\n      colsdata: [\n        [43119, 31.912, 41.577, 12.141, 0.6, 26.418, 30.407, 87.97, 2.35, 202.79],\n        [327.52, 466.92, 309.66, 29100, 206.03, 206.98, 18.075, 3003.7, 451.07, 33.571],\n        [0.086, 345.42, 318.09, 32.628, 50.89, 128.2, 3513.4, 35778, 42532, 419.75],\n        [1070.1, 3440, 34266, 3563, 3563, 21.746, 18667, 755.4, 160.8, 23464, 1288.9],\n        [1736.1, 27498, 25.535, 18042, 27498, 4495.8, 3538.8, 824.2, 6018, 32686],\n        [22.412, 292.39, 20.805, 35.802, 4438.04, 49703, 12.827, 23100, 950, 5.269],\n        [4103.7, 497.36, 43.584, 36239, 5.358, 189.3, 1.814, 4397.3, 35.59, 34095],\n        [1134.76, 897, 5.23, 7e-3, 836.45, 50.05, 87354, 987.56, 31245, 77.456]\n      ]\n    });\n    return new DataTableAdapter({\n      \"datatable\": dataTable\n    });\n  }\n  const bridge = createDataTable();\n  const tableViewWidget = new TableView({\n    \"border\": {\n      \"color\": \"lightgray\",\n      \"pixelsnapmode\": true\n    },\n    \"fitborder\": true,\n    \"horizontalscroll\": \"floating\",\n    \"verticalscroll\": \"floating\"\n  }).setData(bridge);\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": tableViewWidget\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/TableView/tableViewWidget?section=tableViewWithDataTable&extract=true","width":"100%","height":"338.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"sort-and-filter-data-in-tableview","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/TableView/tableViewWidget#sortAndFilterTableView"},"children":["#"]}," Sort and filter data in TableView"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example illustrates sorting and filtering operations in the Table View widget when using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotooolkit/widgets/data/DataTableAdapter"]}," to connect to the Data Source."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Column data can be sorted by clicking the up or down arrow displayed when hovering over the column header.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Note: When using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotooolkit/widgets/data/DataTableAdapter"]}," to connect to the dataSource, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/data/DataTable"]}," must be used to perform sorting. Sorting is ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["not"]}," enabled for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/data/DataTableView"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Column data can be filtered by entering a filtering term / value in the text field.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"By default, filtering will be performed with data in the first column."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To perform column specific sorting, first select the column by clicking the column header or clicking any column cell. Then enter the value to filter in the text field.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"If the column is not selected, filtering will be performed with data in the last selected column."]},{"$$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 { DataTable } from \"@int/geotoolkit/data/DataTable.ts\";\nimport { DataSeries } from \"@int/geotoolkit/data/DataSeries.ts\";\nimport { DataTableAdapter } from \"@int/geotoolkit/widgets/data/DataTableAdapter.ts\";\nimport { TableView } from \"@int/geotoolkit/widgets/TableView.ts\";\nimport { Rectangle } from \"@int/geotoolkit/scene/shapes/Rectangle.ts\";\nimport { Path } from \"@int/geotoolkit/scene/shapes/Path.ts\";\nimport { Events as HeaderHandlerEvents } from \"@int/geotoolkit/controls/tools/tableview/HeaderHandler.ts\";\nimport { Events as SelectionEvents } from \"@int/geotoolkit/controls/tools/Selection.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { AlignmentStyle, BaseLineStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nfunction createScene(canvas) {\n  let selectedColumn = 0;\n  const COLUMN_WIDTH = 200;\n  function createDataTable() {\n    const dataTable = new DataTable({\n      cols: [\n        { name: \"NAME\", type: \"string\" },\n        { name: \"GENDER\", type: \"string\" }\n      ],\n      colsdata: [\n        [\n          \"Megan Fox\",\n          \"Kate Winslet\",\n          \"Ellen DeGeneres\",\n          \"Leonardo DiCaprio\",\n          \"Ryan Gosling\",\n          \"Emma Stone\",\n          \"Jennifer Aniston\",\n          \"Tom Cruise\",\n          \"Brad Pitt\",\n          \"Drake\",\n          \"Will Smith\"\n        ],\n        [\"Female\", \"Female\", \"Female\", \"Male\", \"Male\", \"Female\", \"Female\", \"Male\", \"Male\", \"Male\", \"Male\"]\n      ]\n    });\n    const indices = [];\n    for (let i = 0; i < dataTable.getNumberOfRows(); i++) {\n      indices.push(i + 1);\n    }\n    dataTable.insertColumn(0, new DataSeries({\n      name: \"ID\",\n      type: \"number\",\n      data: indices\n    }));\n    return dataTable;\n  }\n  function createTableViewWidget() {\n    const dataTable = createDataTable();\n    const bridge = new DataTableAdapter({\n      \"datatable\": dataTable,\n      \"sortingarrowoptions\": {\n        \"uparrowfillcolor\": \"black\",\n        \"uparrowlinecolor\": \"black\",\n        \"downarrowfillcolor\": \"white\",\n        \"downarrowlinecolor\": \"white\"\n      }\n    });\n    const tableViewWidget2 = new TableView({\n      \"horizontalscroll\": \"floating\",\n      \"verticalscroll\": \"floating\",\n      \"header\": {\n        \"textstyle\": { \"color\": \"white\", \"alignment\": AlignmentStyle.Center, \"baseline\": BaseLineStyle.Middle },\n        \"headerfillstyle\": \"orange\"\n      },\n      \"content\": {\n        \"textstyle\": { \"color\": \"blue\", \"alignment\": AlignmentStyle.Center, \"baseline\": BaseLineStyle.Middle }\n      }\n    }).setData(bridge);\n    for (let i = 1; i < bridge.getColumnsCount(); i++) {\n      tableViewWidget2.setColumnsSize(i, COLUMN_WIDTH);\n    }\n    tableViewWidget2.setColumnsSize(0, 50);\n    connectTools(bridge, tableViewWidget2);\n    onKeyUp(bridge, tableViewWidget2);\n    return tableViewWidget2;\n  }\n  function initializeAdornments(buttonGroup) {\n    const buttonsModelLimits = buttonGroup.getModelLimits();\n    const height = buttonsModelLimits.getHeight();\n    const centerX = buttonGroup.getModelLimits().getCenterX();\n    buttonGroup.addChild([\n      new Rectangle().setLineStyle({\n        \"color\": \"rgba(0,0,0,0)\",\n        \"pixelsnapmode\": true\n      }).setFillStyle(\"rgba(236,243,255, 0.5)\"),\n      new Path().moveTo(centerX, 2).lineTo(centerX + 3, 5).lineTo(centerX - 3, 5).lineTo(centerX, 2).setSelectable(false),\n      new Path().moveTo(centerX, height - 2).lineTo(centerX + 3, height - 5).lineTo(centerX - 3, height - 5).lineTo(centerX, height - 2).setSelectable(false)\n    ]);\n  }\n  function updateAdornments(column, buttonGroup, buttonHover, bridge) {\n    const topArrow = buttonGroup.getChild(1);\n    const bottomArrow = buttonGroup.getChild(2);\n    const buttonsModelLimits = buttonGroup.getModelLimits();\n    buttonGroup.setVisible(true);\n    buttonGroup.getChild(0).setBounds(buttonsModelLimits).setLineStyle({\n      \"color\": buttonHover ? \"blue\" : \"rgba(0, 0, 255, 0.3)\",\n      \"pixelsnapmode\": true\n    });\n    topArrow.setFillStyle(\"gray\").setLineStyle({ \"color\": \"gray\", \"pixelsnapmode\": true });\n    bottomArrow.setFillStyle(\"gray\").setLineStyle({ \"color\": \"gray\", \"pixelsnapmode\": true });\n    const sortedByColumn = bridge.getSortedByColumn();\n    if (sortedByColumn == null || sortedByColumn[\"column\"] !== column) {\n      return;\n    }\n    const arrow = sortedByColumn[\"reverse\"] === true ? topArrow : bottomArrow;\n    arrow.setFillStyle(\"black\").setLineStyle({ \"color\": \"black\", \"pixelsnapmode\": true });\n  }\n  function connectTools(bridge, tableViewWidget2) {\n    const comparator = (a, b) => {\n      if (a < b)\n        return 1;\n      else if (a > b)\n        return -1;\n      return 0;\n    };\n    tableViewWidget2.getToolByName(\"TableViewHeaderHandler\").on(HeaderHandlerEvents.onHeaderHover, (evt, sender, eventArgs) => {\n      if (eventArgs[\"button\"].getChildrenCount() === 0) {\n        initializeAdornments(eventArgs[\"button\"]);\n      }\n      updateAdornments(eventArgs[\"column\"], eventArgs[\"button\"], false, bridge);\n    }).on(HeaderHandlerEvents.onButtonHover, (evt, sender, eventArgs) => {\n      if (eventArgs[\"button\"].getChildrenCount() === 0) {\n        initializeAdornments(eventArgs[\"button\"]);\n      }\n      updateAdornments(eventArgs[\"column\"], eventArgs[\"button\"], true, bridge);\n    }).on(HeaderHandlerEvents.onClick, (evt, sender, eventArgs) => {\n      bridge.sortByColumn(eventArgs[\"column\"], comparator);\n      updateAdornments(eventArgs[\"column\"], eventArgs[\"button\"], true, bridge);\n      tableViewWidget2.invalidate();\n    }).setEnabled(true);\n    const highlight = tableViewWidget2.getToolByName(\"TableViewSelection\");\n    highlight.on(SelectionEvents.onPick, (evt, sender, eventArgs) => {\n      const manipulators = tableViewWidget2.getToolByName(\"TableViewCompositeTool\");\n      const tableViewShape = tableViewWidget2.getTableViewShape();\n      const point = manipulators.pointToModel(tableViewShape, eventArgs);\n      const cell = tableViewShape.resolveCellCoordinate(point.getX(), point.getY());\n      if (cell.getX() !== -1) {\n        selectedColumn = cell.getX();\n      }\n    });\n  }\n  function onKeyUp(bridge, tableViewWidget2) {\n    const input = document.getElementById(\"valueToFilter\");\n    if (input != null) {\n      input.addEventListener(\"input\", () => {\n        bridge.filter(selectedColumn, input.value.toLowerCase());\n        tableViewWidget2.setTableBounds(bridge.getRowsCount());\n      });\n    }\n  }\n  const tableViewWidget = createTableViewWidget();\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": tableViewWidget\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/TableView/tableViewWidget?section=sortAndFilterTableView&extract=true","width":"100%","height":"382px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"row-and-column-manipulation","__idx":5},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/TableView/tableViewWidget#rowColumnManipulator"},"children":["#"]}," Row and column manipulation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example illustrates reorganizing or editing data in the Table View widget. This example uses a custom data source provided by function to the Table View widget."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Edit cell values with these actions:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Double-click any cell to activate inPlace editor."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Click the Enterkey or (ctrlKey + arrowkey) to submit the value and jump to the next cell for editing."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Click the CltrlKey + Enterkey to submit the value(s) and exit from the editing mode."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Click the EscapeKey to exit from editing mode without submitting new value."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To activate the row or column manipulator, press ctrlKey, holding down the ctrlKey, press the row or column heading and drag and drop the row / column to the new location."]},{"$$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 { TableView } from \"@int/geotoolkit/widgets/TableView.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Events as InPlaceEditorEvents } from \"@int/geotoolkit/widgets/tools/InPlaceEditor.ts\";\nimport { Events as ColumnHandlerEvents } from \"@int/geotoolkit/controls/tools/tableview/ColumnHandler.ts\";\nimport { Events as RowHandlerEvents } from \"@int/geotoolkit/controls/tools/tableview/RowHandler.ts\";\nimport { SplitterMode } from \"@int/geotoolkit/controls/tools/tableview/Splitter.ts\";\nimport { TableViewDataSource } from \"/src/code/Carnac/Widgets/TableView/tableViewDataSource.ts\";\nimport { AlignmentStyle, BaseLineStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nfunction createScene(canvas) {\n  const ROW_COUNT = 100;\n  const COLUMN_COUNT = 10;\n  const data = new TableViewDataSource(ROW_COUNT, COLUMN_COUNT);\n  const tableViewWidget = new TableView({\n    \"indextitle\": \"Index\",\n    \"dataprovider\": data,\n    \"rows\": data.getRowsCount(),\n    \"cols\": data.getColumnsCount(),\n    \"index\": {\n      \"textstyle\": {\n        \"color\": \"black\",\n        \"alignment\": AlignmentStyle.Center,\n        \"baseline\": BaseLineStyle.Middle\n      },\n      \"activerowfillstyle\": \"rgba(51,116,235,0.4)\"\n    },\n    \"header\": {\n      \"highlightcolumnfillstyle\": \"rgba(51,116,235,0.4)\"\n    },\n    \"content\": {\n      \"textstyle\": {\n        \"color\": \"darkgreen\",\n        \"alignment\": AlignmentStyle.Left,\n        \"baseline\": BaseLineStyle.Middle\n      },\n      \"highlightrowfillstyle\": null,\n      \"activerowfillstyle\": null,\n      \"highlightcolumnfillstyle\": null,\n      \"activecelllinestyle\": {\n        \"color\": \"rgba(51,116,235,0.8)\",\n        \"width\": 1,\n        \"pixelsnapmode\": true\n      }\n    }\n  });\n  tableViewWidget.getToolByName(\"TableViewSplitter\").setSplitterMode(SplitterMode.Both);\n  tableViewWidget.getToolByName(\"TableViewColumnHandler\").on(ColumnHandlerEvents.onMove, (evt, sender, eventArgs) => {\n    data.moveColumn(eventArgs[\"from\"], eventArgs[\"to\"]);\n    tableViewWidget.highlightColumn(eventArgs[\"to\"]);\n  }).setEnabled(true);\n  tableViewWidget.getToolByName(\"TableViewRowHandler\").on(RowHandlerEvents.onMove, (evt, sender, eventArgs) => {\n    data.moveRow(eventArgs[\"from\"], eventArgs[\"to\"]);\n    tableViewWidget.invalidate();\n  }).setEnabled(true);\n  tableViewWidget.getToolByName(\"TableViewInPlaceEditor\").setEnabled(true).on(\n    InPlaceEditorEvents.onValueChanged,\n    (evt, sender, eventArgs) => data.setContentData(eventArgs[\"cell\"][\"column\"], eventArgs[\"cell\"][\"row\"], +eventArgs[\"value\"])\n  );\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": tableViewWidget\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/TableView/tableViewWidget?section=rowColumnManipulator&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customization-in-tableview","__idx":6},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/TableView/tableViewWidget#customizationInTableView"},"children":["#"]}," Customization in TableView"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["contentPrepare"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["indexPrepare"]}," are run once before rendering the table to set formatting of data. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["contentformatprovider"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["indexformatprovider"]}," are used to set custom style attributes within the table. In this example, data has a fixed decimal point."]},{"$$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":"var __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n  for (var i = decorators.length - 1, decorator; i >= 0; i--)\n    if (decorator = decorators[i])\n      result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n  if (kind && result)\n    __defProp(target, key, result);\n  return result;\n};\nimport { TableView } from \"@int/geotoolkit/widgets/TableView.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { HorizontalBoxLayout } from \"@int/geotoolkit/layout/HorizontalBoxLayout.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { Path } from \"@int/geotoolkit/scene/shapes/Path.ts\";\nimport { Dimension } from \"@int/geotoolkit/util/Dimension.ts\";\nimport { Ellipse } from \"@int/geotoolkit/scene/shapes/Ellipse.ts\";\nimport { AlignmentStyle, BaseLineStyle, TextStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { TextMetrics } from \"@int/geotoolkit/renderer/TextMetrics.ts\";\nimport { LinearGradientStyle } from \"@int/geotoolkit/attributes/LinearGradientStyle.ts\";\nimport { Point } from \"@int/geotoolkit/util/Point.ts\";\nimport { Events as DomEvents } from \"@int/geotoolkit/dom.ts\";\nimport { TableViewDataSource } from \"/src/code/Carnac/Widgets/TableView/tableViewDataSource.ts\";\nimport { Obfuscate } from \"@int/geotoolkit/decorators.ts\";\nlet Provider = class extends TableViewDataSource {\n  constructor(rows, cols, widget) {\n    super(rows, cols);\n    this.tableViewWidget = widget;\n    const configPlusButton = (plusButton) => {\n      plusButton.setId(\"plus-button\").setMarginsStyle({\n        \"right\": \"2px\"\n      }).setLineStyle(\"gray\").setFillStyle(\"black\").setModelLimits(new Rect({\n        \"width\": 16,\n        \"height\": 16\n      })).on(DomEvents.Click, (event, sender) => {\n        const tag = sender.getParent().getTag();\n        const value = Number(this.getContentData(tag[\"column\"], tag[\"row\"])) + 1;\n        this.setContentData(tag[\"column\"], tag[\"row\"], value);\n        this.tableViewWidget.invalidate();\n      }).on(DomEvents.Hover, (event, sender) => {\n        sender.setFillStyle(\"yellow\").getChild(0).getLineStyle().setColor(\"black\");\n      }).on(DomEvents.Leave, (event, sender) => {\n        sender.setFillStyle(\"black\").getChild(0).getLineStyle().setColor(\"white\");\n      }).addChild([\n        new Path().moveTo(7, 3).lineTo(7, 12).moveTo(3, 7).lineTo(12, 7).setLineStyle({\n          \"color\": \"white\",\n          \"width\": 2\n        })\n      ]).setVisible(true);\n    };\n    const configMinusButton = (minusButton) => {\n      minusButton.setId(\"plus-button\").setMarginsStyle({\n        \"right\": \"2px\"\n      }).setLineStyle(\"gray\").setFillStyle(\"black\").setModelLimits(new Rect({\n        \"width\": 16,\n        \"height\": 16\n      })).on(DomEvents.Click, (event, sender, eventArgs) => {\n        const tag = sender.getParent().getTag();\n        const value = Number(this.getContentData(tag[\"column\"], tag[\"row\"])) - 1;\n        this.setContentData(tag[\"column\"], tag[\"row\"], value);\n        this.tableViewWidget.invalidate();\n      }).on(DomEvents.Hover, (event, sender, eventArgs) => {\n        sender.setFillStyle(\"yellow\").getChild(0).getLineStyle().setColor(\"black\");\n      }).on(DomEvents.Leave, (event, sender, eventArgs) => {\n        sender.setFillStyle(\"black\").getChild(0).getLineStyle().setColor(\"white\");\n      }).addChild([\n        new Path().moveTo(3, 7).lineTo(12, 7).setLineStyle({\n          \"color\": \"white\",\n          \"width\": 2\n        })\n      ]).setVisible(true);\n    };\n    const createButtonsGroup = () => {\n      const plusButton = new Group();\n      const minusButton = new Group();\n      const buttonsGroup = new Group().setAutoModelLimitsMode(true).setPaddingStyle(\"5px\").setLayout(new HorizontalBoxLayout()).addChild([plusButton, minusButton]);\n      configPlusButton(plusButton);\n      configMinusButton(minusButton);\n      return buttonsGroup;\n    };\n    this.buttonsGroups = Array.from(Array(this.getRowsCount()), () => createButtonsGroup());\n  }\n  getHeaderFormat(column, headerStyle) {\n    let textStyle = headerStyle[\"text\"][\"textstyle\"];\n    if (!(textStyle instanceof TextStyle)) {\n      textStyle = TextStyle.fromObject(textStyle);\n      headerStyle[\"text\"][\"textstyle\"] = textStyle;\n    }\n    if (column === 2) {\n      textStyle.setColor(\"black\").setFont(\"bold 12px Tahoma\");\n      headerStyle[\"text\"][\"bounds\"].inflate(-10, 0);\n      textStyle.setAlignment(AlignmentStyle.Left);\n      headerStyle[\"background\"][\"fillstyle\"] = \"white\";\n      const rightPosition = headerStyle[\"icon\"][\"bounds\"].getRight();\n      const iconBounds = headerStyle[\"icon\"][\"bounds\"].setX(rightPosition - 25).setWidth(15);\n      headerStyle[\"icon\"][\"value\"] = new Ellipse(iconBounds.getCenterX(), iconBounds.getCenterY(), 5, 5).setLineStyle(\"rgba(255,0,0,0.8)\").setFillStyle(\"rgba(255,0,0,0.5)\");\n    } else {\n      textStyle.setAlignment(AlignmentStyle.Right);\n      headerStyle[\"text\"][\"bounds\"].inflate(-5, 0);\n    }\n    return headerStyle;\n  }\n  getIndexFormat(row, cellStyle) {\n    let textStyle = cellStyle[\"text\"][\"textstyle\"];\n    if (!(textStyle instanceof TextStyle)) {\n      textStyle = TextStyle.fromObject(textStyle);\n      cellStyle[\"text\"][\"textstyle\"] = textStyle;\n    }\n    cellStyle[\"text\"][\"bounds\"].inflate(-5, 0);\n    if (Math.round(+cellStyle[\"text\"][\"value\"]) % 10 === 0) {\n      cellStyle[\"text\"][\"textstyle\"] = TextStyle.fromObject({\n        \"font\": \"bold 14px Tahoma\",\n        \"color\": +cellStyle[\"text\"][\"value\"] % 100 === 0 ? \"yellow\" : \"white\",\n        \"alignment\": AlignmentStyle.Right,\n        \"baseline\": BaseLineStyle.Middle\n      });\n    } else if (cellStyle[\"selection\"][\"row\"] === row) {\n      textStyle = textStyle.clone();\n      textStyle.setFont(\"bold \" + textStyle.getFont());\n    }\n    return cellStyle;\n  }\n  getContentFormat(column, row, cellStyle) {\n    let textStyle = cellStyle[\"text\"][\"textstyle\"];\n    if (!(textStyle instanceof TextStyle)) {\n      textStyle = TextStyle.fromObject(textStyle);\n      cellStyle[\"text\"][\"textstyle\"] = textStyle;\n    }\n    cellStyle[\"text\"][\"bounds\"].inflate(-5, 0);\n    if (cellStyle[\"selection\"][\"row\"] === row) {\n      textStyle = textStyle.clone();\n      textStyle.setFont(\"bold \" + textStyle.getFont());\n    }\n    if (Math.round(+cellStyle[\"text\"][\"value\"]) < 10) {\n      cellStyle[\"background\"][\"fillstyle\"] = \"red\";\n    } else if (Math.round(+cellStyle[\"text\"][\"value\"]) === Number(cellStyle[\"text\"][\"value\"])) {\n      cellStyle[\"text\"][\"textstyle\"] = TextStyle.fromObject({\n        \"font\": \"bold 14px Tahoma\",\n        \"color\": column === 1 ? \"red\" : +cellStyle[\"text\"][\"value\"] > 1e4 ? \"yellow\" : \"white\",\n        \"alignment\": AlignmentStyle.Right,\n        \"baseline\": BaseLineStyle.Middle\n      });\n      cellStyle[\"text\"][\"value\"] = Math.round(+cellStyle[\"text\"][\"value\"]) + \"\";\n    }\n    if (column === 1) {\n      const buttonsGroup = this.buttonsGroups[row];\n      buttonsGroup.setBounds(cellStyle[\"icon\"][\"bounds\"].clone().setWidth(44));\n      cellStyle[\"icon\"][\"value\"] = buttonsGroup;\n      if (cellStyle[\"ispicking\"]) {\n        buttonsGroup.setTag({\n          \"column\": column,\n          \"row\": row,\n          \"value\": cellStyle[\"text\"][\"value\"]\n        });\n      }\n    }\n    if (column === 2) {\n      cellStyle[\"background\"][\"fillstyle\"] = \"white\";\n      cellStyle[\"text\"][\"textstyle\"] = TextStyle.fromObject({\n        \"font\": \"bold 14px Tahoma\",\n        \"color\": +cellStyle[\"text\"][\"value\"] > 1e4 ? \"yellow\" : \"#444\",\n        \"alignment\": AlignmentStyle.Center,\n        \"baseline\": BaseLineStyle.Middle\n      });\n      cellStyle[\"text\"][\"bounds\"].inflate(-10, -5).setWidth(TextMetrics.measureText(cellStyle[\"text\"][\"value\"] + \"\", cellStyle[\"text\"][\"textstyle\"]).getWidth()).inflate(4, 0);\n      cellStyle[\"text\"][\"fillstyle\"] = \"rgba(0,255,0,0.5)\";\n      cellStyle[\"text\"][\"linestyle\"] = \"rgba(0,0,255,0.8)\";\n      const r = Math.round(Math.round(+cellStyle[\"text\"][\"value\"]) / 1e3 * 255);\n      const rightPosition = cellStyle[\"icon\"][\"bounds\"].getRight();\n      cellStyle[\"icon\"][\"bounds\"].inflate(0, -8).setX(rightPosition - 25).setWidth(15);\n      cellStyle[\"icon\"][\"value\"] = new Ellipse(\n        cellStyle[\"icon\"][\"bounds\"].getCenterX(),\n        cellStyle[\"icon\"][\"bounds\"].getCenterY(),\n        5,\n        5\n      ).setLineStyle(\"rgba(\" + r + \",0,0,0.8)\").setFillStyle(\"rgba(\" + r + \",0,0,0.5)\");\n    }\n    return cellStyle;\n  }\n  getContentData(column, row) {\n    const value = +super.getContentData(column, row);\n    return this.formatContent ? value.toFixed(3) : value + \"\";\n  }\n  getIndexData(row) {\n    return (this._indexes === null ? row : this._indexes[row]) + (this.formatIndex ? \".0\" : \"\");\n  }\n};\nProvider = __decorateClass([\n  Obfuscate()\n], Provider);\nfunction createScene(canvas) {\n  const ROW_COUNT = 100;\n  const COLUMN_COUNT = 10;\n  const tableViewWidget = new TableView();\n  const data = new Provider(ROW_COUNT, COLUMN_COUNT, tableViewWidget);\n  tableViewWidget.setData({\n    \"index\": {\n      \"textstyle\": { \"color\": \"white\", \"alignment\": AlignmentStyle.Right, \"baseline\": BaseLineStyle.Middle },\n      \"evenfillstyle\": null,\n      \"oddfillstyle\": null,\n      \"gridstyle\": {\n        \"horizontal\": {\n          \"color\": \"gray\",\n          \"pixelsnapmode\": true\n        }\n      }\n    },\n    \"content\": {\n      \"textstyle\": { \"color\": \"white\", \"alignment\": AlignmentStyle.Right, \"baseline\": BaseLineStyle.Middle },\n      \"evenfillstyle\": null,\n      \"oddfillstyle\": null,\n      \"gridstyle\": {\n        \"horizontal\": {\n          \"color\": \"gray\",\n          \"pixelsnapmode\": true\n        }\n      }\n    },\n    \"header\": {\n      \"textstyle\": { \"color\": \"white\", \"alignment\": AlignmentStyle.Center, \"baseline\": BaseLineStyle.Middle },\n      \"headerfillstyle\": \"transparent\",\n      \"gridstyle\": {\n        \"horizontal\": {\n          \"color\": \"gray\",\n          \"pixelsnapmode\": { \"x\": true, \"y\": true }\n        }\n      }\n    },\n    \"defaultcellsize\": new Dimension(120, 25),\n    \"defaultheadersize\": new Dimension(120, 40),\n    \"highlightrowfillstyle\": \"rgba(100, 100, 100, 0.7)\",\n    \"highlightcolumnfillstyle\": \"rgba(100, 100, 100, 0.7)\",\n    \"indextitle\": '<b>Depth</b><br>(<i style=\"color:yellow\">meter</i>)',\n    \"dataprovider\": data,\n    \"rows\": 100,\n    \"cols\": 10\n  }).setFillStyle(new LinearGradientStyle({\n    \"startcolor\": \"rgba(20,20,40,1)\",\n    \"endcolor\": \"rgba(120,120,120,1)\",\n    \"startpoint\": new Point(400, 400),\n    \"endpoint\": new Point(0, 0)\n  }));\n  tableViewWidget.setCss(\"geotoolkit.widgets.TableView:hover {}\");\n  const splitterTool = tableViewWidget.getToolByName(\"TableViewSplitter\");\n  if (splitterTool != null) {\n    splitterTool.setLineStyle({\n      \"color\": \"black\",\n      \"pixelsnapmode\": true\n    }).setFillStyle(\"rgba(240,240,240, 1)\").setSize(2);\n  }\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": tableViewWidget\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/TableView/tableViewWidget?section=customizationInTableView&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"simulated-real-time-data","__idx":7},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/TableView/tableViewWidget#simulatedRealTime"},"children":["#"]}," Simulated real time data"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Table View example below simulates automatic, real time updating of all rows up to 1000 rows. Real-time update of data will update the table size and also the data model."]},{"$$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 { TableView } from \"@int/geotoolkit/widgets/TableView.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { TableViewDataSource } from \"/src/code/Carnac/Widgets/TableView/tableViewDataSource.ts\";\nlet realtimeInterval = null;\nfunction createScene(canvas) {\n  const ROW_COUNT = 10;\n  const COLUMN_COUNT = 100;\n  const data = new TableViewDataSource(ROW_COUNT, COLUMN_COUNT, true);\n  const tableViewWidget = new TableView({\n    \"indextitle\": \"Index\",\n    \"dataprovider\": data,\n    \"rows\": data.getRowsCount(),\n    \"cols\": data.getColumnsCount(),\n    \"horizontalscroll\": \"floating\",\n    \"verticalscroll\": \"floating\"\n  });\n  let rows = ROW_COUNT;\n  const loop = () => {\n    rows += 10;\n    if (rows >= 1e3) {\n      clearInterval(realtimeInterval);\n    }\n    tableViewWidget.setData({\n      \"rows\": rows,\n      \"cols\": 10\n    });\n    tableViewWidget.setVisibleTableLimits(rows - 1);\n  };\n  realtimeInterval = window.setInterval(loop, 1500);\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": tableViewWidget\n  });\n}\nfunction dispose() {\n  clearInterval(realtimeInterval);\n}\nexport { createScene, dispose };\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/TableView/tableViewWidget?section=simulatedRealTime&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"tableview-with-headermode","__idx":8},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/TableView/tableViewWidget#tableViewHeaderMode"},"children":["#"]}," TableView with HeaderMode"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In this example, TableView has automatic header width, it can resize headers width to fit content, or wrap content within the given width."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["There are 3 automatic header resize strategies (HeaderMode):"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Default - Default behavior, user handles header size manually"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Auto - TableView automatically resize header width to fit header content"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Wrap - TableView wrap header content to fit within a specific width defined by user"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["WrapSplitWords - TableView wrap header content to fit within a specific width defined by user. Split words that are larger than width."]}]},{"$$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":"var __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n  for (var i = decorators.length - 1, decorator; i >= 0; i--)\n    if (decorator = decorators[i])\n      result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n  if (kind && result)\n    __defProp(target, key, result);\n  return result;\n};\nimport { HeaderMode, TableView } from \"@int/geotoolkit/widgets/TableView.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { SplitterMode } from \"@int/geotoolkit/controls/tools/tableview/Splitter.ts\";\nimport { TableViewDataSource } from \"/src/code/Carnac/Widgets/TableView/tableViewDataSource.ts\";\nimport { AlignmentStyle, BaseLineStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { Obfuscate } from \"@int/geotoolkit/decorators.ts\";\nlet Provider = class extends TableViewDataSource {\n  getHeaderData(column) {\n    if (column > -1)\n      return (column % 2 === 0 ? \"This is a long column name \" : \"Column name \") + (column + 1);\n    return \"\";\n  }\n};\nProvider = __decorateClass([\n  Obfuscate()\n], Provider);\nfunction createScene(canvas) {\n  const ROW_COUNT = 10;\n  const COLUMN_COUNT = 10;\n  const data = new Provider(ROW_COUNT, COLUMN_COUNT);\n  const tableViewWidget = new TableView({\n    \"indextitle\": \"Index\",\n    \"dataprovider\": data,\n    \"rows\": data.getRowsCount(),\n    \"cols\": data.getColumnsCount(),\n    \"horizontalscroll\": \"floating\",\n    \"verticalscroll\": \"floating\",\n    \"index\": {\n      \"textstyle\": {\n        \"color\": \"black\",\n        \"alignment\": AlignmentStyle.Center,\n        \"baseline\": BaseLineStyle.Middle\n      },\n      \"activerowfillstyle\": \"rgba(51,116,235,0.4)\"\n    },\n    \"header\": {\n      \"highlightcolumnfillstyle\": \"rgba(51,116,235,0.4)\"\n    },\n    \"content\": {\n      \"textstyle\": {\n        \"color\": \"darkgreen\",\n        \"alignment\": AlignmentStyle.Left,\n        \"baseline\": BaseLineStyle.Middle\n      },\n      \"highlightrowfillstyle\": null,\n      \"activerowfillstyle\": null,\n      \"highlightcolumnfillstyle\": null,\n      \"activecelllinestyle\": {\n        \"color\": \"rgba(51,116,235,0.8)\",\n        \"width\": 1,\n        \"pixelsnapmode\": true\n      }\n    },\n    \"headermode\": HeaderMode.Auto\n  });\n  tableViewWidget.getToolByName(\"TableViewSplitter\").setSplitterMode(SplitterMode.Both);\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": tableViewWidget\n  });\n}\nfunction setTableViewHeaderMode(tableView, headerMode) {\n  if (headerMode !== HeaderMode.Auto) {\n    for (let i = 0; i < tableView.getTableSize().getWidth(); ++i) {\n      tableView.setColumnsSize(i, 100);\n    }\n  }\n  if (headerMode !== HeaderMode.Wrap) {\n    tableView.getTableViewShape().setRowHeight(-1, 22);\n  }\n  tableView.setHeaderMode(headerMode);\n}\nexport { createScene, setTableViewHeaderMode };\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/TableView/tableViewWidget?section=tableViewHeaderMode&extract=true","width":"100%","height":"366px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Table View","id":"table-view","depth":1},{"value":"Basic Table View","id":"basic-table-view","depth":3},{"value":"TableView with data provider","id":"tableview-with-data-provider","depth":3},{"value":"TableView with DataTable","id":"tableview-with-datatable","depth":3},{"value":"Sort and filter data in TableView","id":"sort-and-filter-data-in-tableview","depth":3},{"value":"Row and column manipulation","id":"row-and-column-manipulation","depth":3},{"value":"Customization in TableView","id":"customization-in-tableview","depth":3},{"value":"Simulated real time data","id":"simulated-real-time-data","depth":3},{"value":"TableView with HeaderMode","id":"tableview-with-headermode","depth":3}],"frontmatter":{"title":"Table View","seo":{"title":"Table View"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/carnac/widgets/table-view-widget","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}