Visual Components
/
/
/
Table View Widget
Last updated

Table View

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 geotoolkit/widgets/TableView for more details.

# Basic Table View

The following example shows how to create a basic Table View widget without any data.

import { TableView } from "@int/geotoolkit/widgets/TableView.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
function createScene(canvas) {
  const tableViewWidget = new TableView({
    "horizontalscroll": "floating",
    "verticalscroll": "floating",
    "rows": 4,
    "cols": 4
  });
  return new Plot({
    "canvaselement": canvas,
    "root": tableViewWidget
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# TableView with data provider

In the Table View widget, data can be provided through either an explicit function.

The following example illustrates: How data can be provided through an Explicit Function.
The Table View Data Source is in Table View Data Source code tab.

import { TableView } from "@int/geotoolkit/widgets/TableView.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { TableViewDataSource } from "/src/code/Carnac/Widgets/TableView/tableViewDataSource.ts";
import { AlignmentStyle, BaseLineStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
function createScene(canvas) {
  const ROW_COUNT = 10;
  const COLUMN_COUNT = 7;
  const TABLE_VIEW_CONFIG = {
    "indextitle": "Index",
    "index": {
      "textstyle": {
        "color": "black",
        "alignment": AlignmentStyle.Center,
        "baseline": BaseLineStyle.Middle
      },
      "evenfillstyle": "lightblue"
    },
    "content": {
      "textstyle": {
        "color": "darkblue",
        "alignment": AlignmentStyle.Center,
        "baseline": BaseLineStyle.Middle
      },
      "evenfillstyle": "lightblue"
    },
    "header": {
      "textstyle": {
        "color": "black",
        "alignment": AlignmentStyle.Center,
        "baseline": BaseLineStyle.Middle
      }
    },
    "horizontalscroll": false,
    "verticalscroll": false
  };
  function createTableViewWidget(data2) {
    return new TableView().setData({
      ...TABLE_VIEW_CONFIG,
      "dataprovider": data2,
      "rows": data2.getRowsCount(),
      "cols": data2.getColumnsCount()
    });
  }
  const data = new TableViewDataSource(ROW_COUNT, COLUMN_COUNT);
  const tableViewWidget = createTableViewWidget(data);
  const plot = new Plot({
    "canvaselement": canvas,
    "root": tableViewWidget
  });
  tableViewWidget.setColumnsSize(-1, 40).fitToWidth();
  return plot;
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# TableView with DataTable

In the Table View widget, data can be provided through dataTable / dataTableView.

The following example illustrates: How data can be provided through an DataTable.
Please refer to geotoolkit/data/DataTableAdapter for more details.


.cg-tooltip-holder {
  position: relative;
}

.cg-tooltip {
  position: absolute;
  display: block;
  padding: 2px 12px 3px 7px;
  overflow: visible !important;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  background: white !important;
  opacity: 0.9;
  color: #333333;
  border: solid 1px gray;
  border-radius: 5px;
  text-align: left;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 5px;
  margin: 0 !important;
  z-index: 10000;
  max-width: 400px;
  text-wrap: normal !important;
  white-space: normal !important;
}
/* Default setting for tooltip */
.cg-tooltip-container {
  position: absolute;
  display: block;
  overflow: visible !important;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  padding: 3px 7px;
  background: #f7f7f7;
  color: #333333;
  border: 1px solid #938e8e;
  opacity: 0.8;
  text-align: left;
  box-shadow: 3px 3px 10px #888;
  margin: 0 !important;
  z-index: 10000;
  max-width: 400px;
  text-wrap: normal !important;
  white-space: normal !important;
  user-select: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .cg-tooltip-container {
    border-radius: 0;
  }
}
/* Default left arrow for tooltip */
.cg-tooltip-arrow-left::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 50%;
  border: 5px solid transparent;
  border-left: 0;
  border-right: 5px solid  #938e8e;
  transform: translate(calc(-100%), -50%);
}
.cg-tooltip-arrow-left::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 50%;
  border: 4px solid transparent;
  border-left: 0;
  border-right: 4px solid #f7f7f7;
  transform: translate(calc(-100%), -50%);
}
/* Default top arrow for tooltip */
.cg-tooltip-arrow-top::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  top: 0;
  border: 5px solid transparent;
  border-top: 0;
  border-bottom: 5px solid #938e8e;
  transform: translate(-50%, -100%);
}
.cg-tooltip-arrow-top::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  top: 0;
  border: 4px solid transparent;
  border-top: 0;
  border-bottom: 4px solid #f7f7f7;
  transform: translate(-50%, -100%);
}
/* Default right arrow for tooltip */
.cg-tooltip-arrow-right::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  right: 0;
  top: 50%;
  border: 5px solid transparent;
  border-right: 0;
  border-left: 5px solid #938e8e;
  transform: translate(100%, -50%);
}
.cg-tooltip-arrow-right::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  right: 0;
  top: 50%;
  border: 4px solid transparent;
  border-right: 0;
  border-left: 4px solid #f7f7f7;
  transform: translate(100%, -50%);
}
/* Default bottom arrow for tooltip */
.cg-tooltip-arrow-bottom::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  bottom: 0px;
  border: 5px solid transparent;
  border-bottom: 0;
  border-top: 5px solid #938e8e;
  transform: translate(-50%, 100%);
  z-index: 10000;
}
.cg-tooltip-arrow-bottom::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  bottom: 0;
  border: 4px solid transparent;
  border-bottom: 0;
  border-top: 4px solid #f7f7f7;
  transform: translate(-50%, 100%);
  z-index: 10000;
}
/* Tooltip item name */
/* Tooltip item value */
/* .cg-tooltip-item-value */
/* Tooltip item value */
.cg-tooltip-item-unit {
  text-transform: none;
}

.cg-tooltip-item-name {
    text-transform: capitalize;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 13px;
}
.cg-tooltip-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 100%;
  margin: 1px 0;
}
.cg-tooltip-title {
  font-size: 13px;
  height: 14px;
  text-transform: capitalize;
}
.cg-tooltip-title .cg-tooltip-symbol {
  margin-right: 0 !important;
}
.cg-tooltip-title-name {
  vertical-align: middle;
}
.cg-tooltip-row + .cg-tooltip-row {
  margin-top: 4px;
}
.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {
  margin-top: 5px;
}
.cg-tooltip-item-value + .cg-tooltip-item-unit {
    margin-left: 1px;
}
/* Tooltip symbol */
.cg-tooltip-symbol-cell {
  display: inline-flex;
  min-width: 13px; /* 10px size + 3px margin */
}
.cg-tooltip-symbol {
  margin-right: 3px;
  background-color: transparent;
  display: block;
}
.cg-tooltip-symbol > img {
  display: block;
}
.cg-tooltip-list-cell {
  display: inline-flex;
}
.cg-tooltip-list-symbol {
  display: block;
  margin-right: 3px;
  width: 6px;
  height: 6px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.4);
}
.cg-tooltip-symbol-legacy {
  border-radius: 4px;
  margin-right: 5px;
  height: 8px;
  width: 8px;
  display: inline-block;
}
.cg-tooltip-title-legacy {
  font-weight: 900;
}

/* Tooltip symbol circle */
.cg-tooltip-symbol.circle {
  height: 10px;
  width: 10px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.4);
}
/* Tooltip symbol line */
.cg-tooltip-symbol.line {
    height: 10px;
    width: 10px;
    display: inline-block;
    transform: scale(1.2, 0.2);
}
/* Tooltip symbol diamond */
.cg-tooltip-symbol.diamond {
    height: 10px;
    width: 10px;
    display: inline-block;
    transform: rotate(45deg);
    border-radius: 0px;
}
/* Tooltip symbol square */
.cg-tooltip-symbol.square {
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 0px;
    border: 1px solid rgba(0,0,0,.4);
}

# Sort and filter data in TableView

The following example illustrates sorting and filtering operations in the Table View widget when using geotooolkit/widgets/data/DataTableAdapter to connect to the Data Source.

Column data can be sorted by clicking the up or down arrow displayed when hovering over the column header.
Note: When using geotooolkit/widgets/data/DataTableAdapter to connect to the dataSource, geotoolkit/data/DataTable must be used to perform sorting. Sorting is not enabled for geotoolkit/data/DataTableView.

Column data can be filtered by entering a filtering term / value in the text field.
By default, filtering will be performed with data in the first column.

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.
If the column is not selected, filtering will be performed with data in the last selected column.


.cg-tooltip-holder {
  position: relative;
}

.cg-tooltip {
  position: absolute;
  display: block;
  padding: 2px 12px 3px 7px;
  overflow: visible !important;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  background: white !important;
  opacity: 0.9;
  color: #333333;
  border: solid 1px gray;
  border-radius: 5px;
  text-align: left;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 5px;
  margin: 0 !important;
  z-index: 10000;
  max-width: 400px;
  text-wrap: normal !important;
  white-space: normal !important;
}
/* Default setting for tooltip */
.cg-tooltip-container {
  position: absolute;
  display: block;
  overflow: visible !important;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  padding: 3px 7px;
  background: #f7f7f7;
  color: #333333;
  border: 1px solid #938e8e;
  opacity: 0.8;
  text-align: left;
  box-shadow: 3px 3px 10px #888;
  margin: 0 !important;
  z-index: 10000;
  max-width: 400px;
  text-wrap: normal !important;
  white-space: normal !important;
  user-select: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .cg-tooltip-container {
    border-radius: 0;
  }
}
/* Default left arrow for tooltip */
.cg-tooltip-arrow-left::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 50%;
  border: 5px solid transparent;
  border-left: 0;
  border-right: 5px solid  #938e8e;
  transform: translate(calc(-100%), -50%);
}
.cg-tooltip-arrow-left::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 50%;
  border: 4px solid transparent;
  border-left: 0;
  border-right: 4px solid #f7f7f7;
  transform: translate(calc(-100%), -50%);
}
/* Default top arrow for tooltip */
.cg-tooltip-arrow-top::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  top: 0;
  border: 5px solid transparent;
  border-top: 0;
  border-bottom: 5px solid #938e8e;
  transform: translate(-50%, -100%);
}
.cg-tooltip-arrow-top::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  top: 0;
  border: 4px solid transparent;
  border-top: 0;
  border-bottom: 4px solid #f7f7f7;
  transform: translate(-50%, -100%);
}
/* Default right arrow for tooltip */
.cg-tooltip-arrow-right::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  right: 0;
  top: 50%;
  border: 5px solid transparent;
  border-right: 0;
  border-left: 5px solid #938e8e;
  transform: translate(100%, -50%);
}
.cg-tooltip-arrow-right::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  right: 0;
  top: 50%;
  border: 4px solid transparent;
  border-right: 0;
  border-left: 4px solid #f7f7f7;
  transform: translate(100%, -50%);
}
/* Default bottom arrow for tooltip */
.cg-tooltip-arrow-bottom::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  bottom: 0px;
  border: 5px solid transparent;
  border-bottom: 0;
  border-top: 5px solid #938e8e;
  transform: translate(-50%, 100%);
  z-index: 10000;
}
.cg-tooltip-arrow-bottom::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  bottom: 0;
  border: 4px solid transparent;
  border-bottom: 0;
  border-top: 4px solid #f7f7f7;
  transform: translate(-50%, 100%);
  z-index: 10000;
}
/* Tooltip item name */
/* Tooltip item value */
/* .cg-tooltip-item-value */
/* Tooltip item value */
.cg-tooltip-item-unit {
  text-transform: none;
}

.cg-tooltip-item-name {
    text-transform: capitalize;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 13px;
}
.cg-tooltip-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 100%;
  margin: 1px 0;
}
.cg-tooltip-title {
  font-size: 13px;
  height: 14px;
  text-transform: capitalize;
}
.cg-tooltip-title .cg-tooltip-symbol {
  margin-right: 0 !important;
}
.cg-tooltip-title-name {
  vertical-align: middle;
}
.cg-tooltip-row + .cg-tooltip-row {
  margin-top: 4px;
}
.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {
  margin-top: 5px;
}
.cg-tooltip-item-value + .cg-tooltip-item-unit {
    margin-left: 1px;
}
/* Tooltip symbol */
.cg-tooltip-symbol-cell {
  display: inline-flex;
  min-width: 13px; /* 10px size + 3px margin */
}
.cg-tooltip-symbol {
  margin-right: 3px;
  background-color: transparent;
  display: block;
}
.cg-tooltip-symbol > img {
  display: block;
}
.cg-tooltip-list-cell {
  display: inline-flex;
}
.cg-tooltip-list-symbol {
  display: block;
  margin-right: 3px;
  width: 6px;
  height: 6px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.4);
}
.cg-tooltip-symbol-legacy {
  border-radius: 4px;
  margin-right: 5px;
  height: 8px;
  width: 8px;
  display: inline-block;
}
.cg-tooltip-title-legacy {
  font-weight: 900;
}

/* Tooltip symbol circle */
.cg-tooltip-symbol.circle {
  height: 10px;
  width: 10px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.4);
}
/* Tooltip symbol line */
.cg-tooltip-symbol.line {
    height: 10px;
    width: 10px;
    display: inline-block;
    transform: scale(1.2, 0.2);
}
/* Tooltip symbol diamond */
.cg-tooltip-symbol.diamond {
    height: 10px;
    width: 10px;
    display: inline-block;
    transform: rotate(45deg);
    border-radius: 0px;
}
/* Tooltip symbol square */
.cg-tooltip-symbol.square {
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 0px;
    border: 1px solid rgba(0,0,0,.4);
}

# Row and column manipulation

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.

Edit cell values with these actions:

  • Double-click any cell to activate inPlace editor.
  • Click the Enterkey or (ctrlKey + arrowkey) to submit the value and jump to the next cell for editing.
  • Click the CltrlKey + Enterkey to submit the value(s) and exit from the editing mode.
  • Click the EscapeKey to exit from editing mode without submitting new value.

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.

import { TableView } from "@int/geotoolkit/widgets/TableView.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Events as InPlaceEditorEvents } from "@int/geotoolkit/widgets/tools/InPlaceEditor.ts";
import { Events as ColumnHandlerEvents } from "@int/geotoolkit/controls/tools/tableview/ColumnHandler.ts";
import { Events as RowHandlerEvents } from "@int/geotoolkit/controls/tools/tableview/RowHandler.ts";
import { SplitterMode } from "@int/geotoolkit/controls/tools/tableview/Splitter.ts";
import { TableViewDataSource } from "/src/code/Carnac/Widgets/TableView/tableViewDataSource.ts";
import { AlignmentStyle, BaseLineStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
function createScene(canvas) {
  const ROW_COUNT = 100;
  const COLUMN_COUNT = 10;
  const data = new TableViewDataSource(ROW_COUNT, COLUMN_COUNT);
  const tableViewWidget = new TableView({
    "indextitle": "Index",
    "dataprovider": data,
    "rows": data.getRowsCount(),
    "cols": data.getColumnsCount(),
    "index": {
      "textstyle": {
        "color": "black",
        "alignment": AlignmentStyle.Center,
        "baseline": BaseLineStyle.Middle
      },
      "activerowfillstyle": "rgba(51,116,235,0.4)"
    },
    "header": {
      "highlightcolumnfillstyle": "rgba(51,116,235,0.4)"
    },
    "content": {
      "textstyle": {
        "color": "darkgreen",
        "alignment": AlignmentStyle.Left,
        "baseline": BaseLineStyle.Middle
      },
      "highlightrowfillstyle": null,
      "activerowfillstyle": null,
      "highlightcolumnfillstyle": null,
      "activecelllinestyle": {
        "color": "rgba(51,116,235,0.8)",
        "width": 1,
        "pixelsnapmode": true
      }
    }
  });
  tableViewWidget.getToolByName("TableViewSplitter").setSplitterMode(SplitterMode.Both);
  tableViewWidget.getToolByName("TableViewColumnHandler").on(ColumnHandlerEvents.onMove, (evt, sender, eventArgs) => {
    data.moveColumn(eventArgs["from"], eventArgs["to"]);
    tableViewWidget.highlightColumn(eventArgs["to"]);
  }).setEnabled(true);
  tableViewWidget.getToolByName("TableViewRowHandler").on(RowHandlerEvents.onMove, (evt, sender, eventArgs) => {
    data.moveRow(eventArgs["from"], eventArgs["to"]);
    tableViewWidget.invalidate();
  }).setEnabled(true);
  tableViewWidget.getToolByName("TableViewInPlaceEditor").setEnabled(true).on(
    InPlaceEditorEvents.onValueChanged,
    (evt, sender, eventArgs) => data.setContentData(eventArgs["cell"]["column"], eventArgs["cell"]["row"], +eventArgs["value"])
  );
  return new Plot({
    "canvaselement": canvas,
    "root": tableViewWidget
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Customization in TableView

contentPrepare and indexPrepare are run once before rendering the table to set formatting of data. contentformatprovider and indexformatprovider are used to set custom style attributes within the table. In this example, data has a fixed decimal point.


.cg-tooltip-holder {
  position: relative;
}

.cg-tooltip {
  position: absolute;
  display: block;
  padding: 2px 12px 3px 7px;
  overflow: visible !important;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  background: white !important;
  opacity: 0.9;
  color: #333333;
  border: solid 1px gray;
  border-radius: 5px;
  text-align: left;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 5px;
  margin: 0 !important;
  z-index: 10000;
  max-width: 400px;
  text-wrap: normal !important;
  white-space: normal !important;
}
/* Default setting for tooltip */
.cg-tooltip-container {
  position: absolute;
  display: block;
  overflow: visible !important;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  padding: 3px 7px;
  background: #f7f7f7;
  color: #333333;
  border: 1px solid #938e8e;
  opacity: 0.8;
  text-align: left;
  box-shadow: 3px 3px 10px #888;
  margin: 0 !important;
  z-index: 10000;
  max-width: 400px;
  text-wrap: normal !important;
  white-space: normal !important;
  user-select: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .cg-tooltip-container {
    border-radius: 0;
  }
}
/* Default left arrow for tooltip */
.cg-tooltip-arrow-left::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 50%;
  border: 5px solid transparent;
  border-left: 0;
  border-right: 5px solid  #938e8e;
  transform: translate(calc(-100%), -50%);
}
.cg-tooltip-arrow-left::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 50%;
  border: 4px solid transparent;
  border-left: 0;
  border-right: 4px solid #f7f7f7;
  transform: translate(calc(-100%), -50%);
}
/* Default top arrow for tooltip */
.cg-tooltip-arrow-top::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  top: 0;
  border: 5px solid transparent;
  border-top: 0;
  border-bottom: 5px solid #938e8e;
  transform: translate(-50%, -100%);
}
.cg-tooltip-arrow-top::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  top: 0;
  border: 4px solid transparent;
  border-top: 0;
  border-bottom: 4px solid #f7f7f7;
  transform: translate(-50%, -100%);
}
/* Default right arrow for tooltip */
.cg-tooltip-arrow-right::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  right: 0;
  top: 50%;
  border: 5px solid transparent;
  border-right: 0;
  border-left: 5px solid #938e8e;
  transform: translate(100%, -50%);
}
.cg-tooltip-arrow-right::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  right: 0;
  top: 50%;
  border: 4px solid transparent;
  border-right: 0;
  border-left: 4px solid #f7f7f7;
  transform: translate(100%, -50%);
}
/* Default bottom arrow for tooltip */
.cg-tooltip-arrow-bottom::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  bottom: 0px;
  border: 5px solid transparent;
  border-bottom: 0;
  border-top: 5px solid #938e8e;
  transform: translate(-50%, 100%);
  z-index: 10000;
}
.cg-tooltip-arrow-bottom::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  bottom: 0;
  border: 4px solid transparent;
  border-bottom: 0;
  border-top: 4px solid #f7f7f7;
  transform: translate(-50%, 100%);
  z-index: 10000;
}
/* Tooltip item name */
/* Tooltip item value */
/* .cg-tooltip-item-value */
/* Tooltip item value */
.cg-tooltip-item-unit {
  text-transform: none;
}

.cg-tooltip-item-name {
    text-transform: capitalize;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 13px;
}
.cg-tooltip-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 100%;
  margin: 1px 0;
}
.cg-tooltip-title {
  font-size: 13px;
  height: 14px;
  text-transform: capitalize;
}
.cg-tooltip-title .cg-tooltip-symbol {
  margin-right: 0 !important;
}
.cg-tooltip-title-name {
  vertical-align: middle;
}
.cg-tooltip-row + .cg-tooltip-row {
  margin-top: 4px;
}
.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {
  margin-top: 5px;
}
.cg-tooltip-item-value + .cg-tooltip-item-unit {
    margin-left: 1px;
}
/* Tooltip symbol */
.cg-tooltip-symbol-cell {
  display: inline-flex;
  min-width: 13px; /* 10px size + 3px margin */
}
.cg-tooltip-symbol {
  margin-right: 3px;
  background-color: transparent;
  display: block;
}
.cg-tooltip-symbol > img {
  display: block;
}
.cg-tooltip-list-cell {
  display: inline-flex;
}
.cg-tooltip-list-symbol {
  display: block;
  margin-right: 3px;
  width: 6px;
  height: 6px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.4);
}
.cg-tooltip-symbol-legacy {
  border-radius: 4px;
  margin-right: 5px;
  height: 8px;
  width: 8px;
  display: inline-block;
}
.cg-tooltip-title-legacy {
  font-weight: 900;
}

/* Tooltip symbol circle */
.cg-tooltip-symbol.circle {
  height: 10px;
  width: 10px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.4);
}
/* Tooltip symbol line */
.cg-tooltip-symbol.line {
    height: 10px;
    width: 10px;
    display: inline-block;
    transform: scale(1.2, 0.2);
}
/* Tooltip symbol diamond */
.cg-tooltip-symbol.diamond {
    height: 10px;
    width: 10px;
    display: inline-block;
    transform: rotate(45deg);
    border-radius: 0px;
}
/* Tooltip symbol square */
.cg-tooltip-symbol.square {
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 0px;
    border: 1px solid rgba(0,0,0,.4);
}

# Simulated real time data

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.

import { TableView } from "@int/geotoolkit/widgets/TableView.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { TableViewDataSource } from "/src/code/Carnac/Widgets/TableView/tableViewDataSource.ts";
let realtimeInterval = null;
function createScene(canvas) {
  const ROW_COUNT = 10;
  const COLUMN_COUNT = 100;
  const data = new TableViewDataSource(ROW_COUNT, COLUMN_COUNT, true);
  const tableViewWidget = new TableView({
    "indextitle": "Index",
    "dataprovider": data,
    "rows": data.getRowsCount(),
    "cols": data.getColumnsCount(),
    "horizontalscroll": "floating",
    "verticalscroll": "floating"
  });
  let rows = ROW_COUNT;
  const loop = () => {
    rows += 10;
    if (rows >= 1e3) {
      clearInterval(realtimeInterval);
    }
    tableViewWidget.setData({
      "rows": rows,
      "cols": 10
    });
    tableViewWidget.setVisibleTableLimits(rows - 1);
  };
  realtimeInterval = window.setInterval(loop, 1500);
  return new Plot({
    "canvaselement": canvas,
    "root": tableViewWidget
  });
}
function dispose() {
  clearInterval(realtimeInterval);
}
export { createScene, dispose };

createScene(document.querySelector('[ref="plot"]'));

# TableView with HeaderMode

In this example, TableView has automatic header width, it can resize headers width to fit content, or wrap content within the given width.

There are 3 automatic header resize strategies (HeaderMode):

  • Default - Default behavior, user handles header size manually
  • Auto - TableView automatically resize header width to fit header content
  • Wrap - TableView wrap header content to fit within a specific width defined by user
  • WrapSplitWords - TableView wrap header content to fit within a specific width defined by user. Split words that are larger than width.
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
import { HeaderMode, TableView } from "@int/geotoolkit/widgets/TableView.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { SplitterMode } from "@int/geotoolkit/controls/tools/tableview/Splitter.ts";
import { TableViewDataSource } from "/src/code/Carnac/Widgets/TableView/tableViewDataSource.ts";
import { AlignmentStyle, BaseLineStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
import { Obfuscate } from "@int/geotoolkit/decorators.ts";
let Provider = class extends TableViewDataSource {
  getHeaderData(column) {
    if (column > -1)
      return (column % 2 === 0 ? "This is a long column name " : "Column name ") + (column + 1);
    return "";
  }
};
Provider = __decorateClass([
  Obfuscate()
], Provider);
function createScene(canvas) {
  const ROW_COUNT = 10;
  const COLUMN_COUNT = 10;
  const data = new Provider(ROW_COUNT, COLUMN_COUNT);
  const tableViewWidget = new TableView({
    "indextitle": "Index",
    "dataprovider": data,
    "rows": data.getRowsCount(),
    "cols": data.getColumnsCount(),
    "horizontalscroll": "floating",
    "verticalscroll": "floating",
    "index": {
      "textstyle": {
        "color": "black",
        "alignment": AlignmentStyle.Center,
        "baseline": BaseLineStyle.Middle
      },
      "activerowfillstyle": "rgba(51,116,235,0.4)"
    },
    "header": {
      "highlightcolumnfillstyle": "rgba(51,116,235,0.4)"
    },
    "content": {
      "textstyle": {
        "color": "darkgreen",
        "alignment": AlignmentStyle.Left,
        "baseline": BaseLineStyle.Middle
      },
      "highlightrowfillstyle": null,
      "activerowfillstyle": null,
      "highlightcolumnfillstyle": null,
      "activecelllinestyle": {
        "color": "rgba(51,116,235,0.8)",
        "width": 1,
        "pixelsnapmode": true
      }
    },
    "headermode": HeaderMode.Auto
  });
  tableViewWidget.getToolByName("TableViewSplitter").setSplitterMode(SplitterMode.Both);
  return new Plot({
    "canvaselement": canvas,
    "root": tableViewWidget
  });
}
function setTableViewHeaderMode(tableView, headerMode) {
  if (headerMode !== HeaderMode.Auto) {
    for (let i = 0; i < tableView.getTableSize().getWidth(); ++i) {
      tableView.setColumnsSize(i, 100);
    }
  }
  if (headerMode !== HeaderMode.Wrap) {
    tableView.getTableViewShape().setRowHeight(-1, 22);
  }
  tableView.setHeaderMode(headerMode);
}
export { createScene, setTableViewHeaderMode };

createScene(document.querySelector('[ref="plot"]'));

Strategy

Legend 3D