sea-chart 1.1.21 → 1.1.22-alpha.2

package/dist/components/popover/sort-popover/sort-popover.js

@@ -0,0 +1,290 @@
+import _DTableCustomizeSelect from "dtable-ui-component/lib/DTableCustomizeSelect";
+import React, { Component, Fragment } from 'react';
+// import intl from 'react-intl-universal';
+import isHotkey from 'is-hotkey';
+import { Button, UncontrolledPopover } from 'reactstrap';
+import { COLUMNS_ICON_CONFIG, SORT_COLUMN_OPTIONS, SORT_TYPE } from 'dtable-utils';
+import { getEventClassName, getColumnByKey } from '../../../utils';
+import CommonAddTool from '../../common-add-tool';
+// import eventBus from '../../utils/event-bus';
+// import { EVENT_BUS_TYPE } from '../../constants';
+import intl from '../../../intl';
+import { execSortsOperation, getDisplaySorts, isSortsEmpty, SORT_OPERATION } from './sort-popover-widgets/sort-utils';
+import './sort-popover.css';
+const SORT_TYPES = [SORT_TYPE.UP, SORT_TYPE.DOWN];
+class SortPopover extends Component {
+  constructor(props) {
+    super(props);
+    this.hideDTablePopover = e => {
+      if (this.sortPopoverRef && !getEventClassName(e).includes('popover') && !this.sortPopoverRef.contains(e.target)) {
+        this.props.onSortComponentToggle(e);
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      }
+    };
+    this.isNeedSubmit = () => {
+      return this.props.isNeedSubmit;
+    };
+    this.onHotKey = e => {
+      if (isHotkey('esc', e) && !this.isSelectOpen) {
+        e.preventDefault();
+        this.props.onSortComponentToggle();
+      }
+    };
+    this.setSelectStatus = status => {
+      this.isSelectOpen = status;
+    };
+    this.addSort = () => {
+      const {
+        sorts
+      } = this.state;
+      const newSorts = execSortsOperation(SORT_OPERATION.ADD_SORT, {
+        sorts
+      });
+      this.updateSorts(newSorts);
+    };
+    this.deleteSort = (event, index) => {
+      event.nativeEvent.stopImmediatePropagation();
+      const sorts = this.state.sorts.slice(0);
+      const newSorts = execSortsOperation(SORT_OPERATION.DELETE_SORT, {
+        sorts,
+        index
+      });
+      this.updateSorts(newSorts);
+    };
+    this.onSelectColumn = (value, index) => {
+      const sorts = this.state.sorts.slice(0);
+      const newColumnKey = value.column.key;
+      if (newColumnKey === sorts[index].column_key) {
+        return;
+      }
+      const newSorts = execSortsOperation(SORT_OPERATION.MODIFY_SORT_COLUMN, {
+        sorts,
+        index,
+        column_key: newColumnKey
+      });
+      this.updateSorts(newSorts);
+    };
+    this.onSelectSortType = (value, index) => {
+      const sorts = this.state.sorts.slice(0);
+      const newSortType = value.sortType;
+      if (newSortType === sorts[index].sort_type) {
+        return;
+      }
+      const newSorts = execSortsOperation(SORT_OPERATION.MODIFY_SORT_TYPE, {
+        sorts,
+        index,
+        sort_type: newSortType
+      });
+      this.updateSorts(newSorts);
+    };
+    this.updateSorts = sorts => {
+      if (this.isNeedSubmit()) {
+        const isSubmitDisabled = false;
+        this.setState({
+          sorts,
+          isSubmitDisabled
+        });
+        return;
+      }
+      this.setState({
+        sorts
+      }, () => {
+        this.handleSortAnimation();
+      });
+    };
+    this.handleSortAnimation = () => {
+      const update = {
+        sorts: this.state.sorts
+      };
+      this.props.update(update);
+    };
+    this.onClosePopover = () => {
+      this.props.onSortComponentToggle();
+    };
+    this.onSubmitSorts = () => {
+      const {
+        sorts
+      } = this.state;
+      const update = {
+        sorts: sorts
+      };
+      this.props.update(update);
+      this.props.onSortComponentToggle();
+    };
+    this.createColumnsOptions = function () {
+      let columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      const sortableColumns = columns.filter(column => SORT_COLUMN_OPTIONS.includes(column.type));
+      return sortableColumns.map(column => {
+        const {
+          type,
+          name
+        } = column;
+        return {
+          value: {
+            column
+          },
+          label: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+            className: "filter-header-icon"
+          }, /*#__PURE__*/React.createElement("i", {
+            className: COLUMNS_ICON_CONFIG[type]
+          })), /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, name))
+        };
+      });
+    };
+    this.createSortTypeOptions = () => {
+      return SORT_TYPES.map(sortType => {
+        return {
+          value: {
+            sortType
+          },
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, intl.get(sortType))
+        };
+      });
+    };
+    this.renderSortsList = () => {
+      const {
+        columns
+      } = this.props;
+      const {
+        sorts
+      } = this.state;
+      return sorts.map((sort, index) => {
+        const column = getColumnByKey(sort.column_key, columns) || {};
+        return this.renderSortItem(column, sort, index);
+      });
+    };
+    this.renderSortItem = (column, sort, index) => {
+      let {
+        name,
+        type
+      } = column;
+      const {
+        readonly
+      } = this.props;
+      let selectedColumn = {
+        label: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+          className: "filter-header-icon"
+        }, /*#__PURE__*/React.createElement("i", {
+          className: COLUMNS_ICON_CONFIG[type]
+        })), /*#__PURE__*/React.createElement("span", {
+          className: "select-option-name",
+          title: name,
+          "aria-label": name
+        }, name))
+      };
+      let selectedTypeShow = sort.sort_type;
+      let selectedSortType = selectedTypeShow && {
+        label: /*#__PURE__*/React.createElement("span", {
+          className: "select-option-name"
+        }, intl.get(selectedTypeShow))
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        key: 'sort-item-' + index,
+        className: "sort-item"
+      }, !readonly && /*#__PURE__*/React.createElement("div", {
+        className: "delete-sort",
+        onClick: event => this.deleteSort(event, index)
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-fork-number"
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "condition"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sort-column"
+      }, /*#__PURE__*/React.createElement(_DTableCustomizeSelect, {
+        isLocked: readonly,
+        value: selectedColumn,
+        onSelectOption: value => this.onSelectColumn(value, index),
+        options: this.columnsOptions,
+        searchable: true,
+        searchPlaceholder: intl.get('Search_column'),
+        noOptionsPlaceholder: intl.get('No_results')
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "sort-predicate ml-2"
+      }, /*#__PURE__*/React.createElement(_DTableCustomizeSelect, {
+        isLocked: readonly,
+        value: selectedSortType,
+        onSelectOption: value => this.onSelectSortType(value, index),
+        options: this.sortTypeOptions
+      }))));
+    };
+    this.onPopoverInsideClick = e => {
+      e.stopPropagation();
+    };
+    const {
+      sorts: _sorts,
+      columns: _columns
+    } = this.props;
+    this.sortTypeOptions = this.createSortTypeOptions();
+    this.columnsOptions = this.createColumnsOptions(_columns);
+    this.state = {
+      sorts: getDisplaySorts(_sorts, _columns)
+    };
+    this.isSelectOpen = false;
+  }
+  componentDidMount() {
+    document.addEventListener('click', this.hideDTablePopover, true);
+    document.addEventListener('keydown', this.onHotKey);
+    // this.unsubscribeOpenSelect = eventBus.subscribe(EVENT_BUS_TYPE.OPEN_SELECT, this.setSelectStatus);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('click', this.hideDTablePopover, true);
+    document.removeEventListener('keydown', this.onHotKey);
+    // this.unsubscribeOpenSelect();
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const newColumns = nextProps.columns;
+    if (newColumns !== this.props.columns) {
+      this.columnsOptions = this.createColumnsOptions(newColumns);
+    }
+  }
+  render() {
+    const {
+      target,
+      readonly
+    } = this.props;
+    const {
+      sorts
+    } = this.state;
+    const isEmpty = isSortsEmpty(sorts);
+    return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+      placement: "auto-start",
+      isOpen: true,
+      target: target,
+      fade: false,
+      hideArrow: true,
+      className: "sort-popover",
+      boundariesElement: document.body
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: ref => this.sortPopoverRef = ref,
+      onClick: this.onPopoverInsideClick
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "sorts-list ".concat(isEmpty ? 'empty-sorts-container' : '')
+    }, isEmpty ? /*#__PURE__*/React.createElement("div", {
+      className: "empty-sorts-list"
+    }, intl.get('No_sorts')) : this.renderSortsList()), !readonly && /*#__PURE__*/React.createElement(CommonAddTool, {
+      callBack: this.addSort,
+      footerName: intl.get('Add_sort'),
+      className: "popover-add-tool",
+      addIconClassName: "popover-add-icon"
+    }), this.isNeedSubmit() && !readonly && /*#__PURE__*/React.createElement("div", {
+      className: "sort-popover-footer"
+    }, /*#__PURE__*/React.createElement(Button, {
+      className: "mr-2",
+      onClick: this.onClosePopover
+    }, intl.get('Cancel')), /*#__PURE__*/React.createElement(Button, {
+      color: "primary",
+      disabled: this.state.isSubmitDisabled,
+      onClick: this.onSubmitSorts
+    }, intl.get('Submit')))));
+  }
+}
+SortPopover.defaultProps = {
+  readonly: false
+};
+export default SortPopover;

package/dist/components/types-dialog/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Modal, ModalHeader, ModalBody, ModalFooter, UncontrolledTooltip, Button } from 'reactstrap';
 import classnames from 'classnames';
-import { CHART_TYPES, CHART_TYPE_SHOW, ZH_CN_SUPPORT_CHARTS } from '../../constants';
+import { CHART_TYPE, CHART_TYPES, CHART_TYPE_SHOW, ZH_CN_SUPPORT_CHARTS } from '../../constants';
 import { eventStopPropagation } from '../../utils';
 import context from '../../context';
 import intl from '../../intl';
@@ -13,7 +13,8 @@ const TypesDialog = _ref => {
     type,
     lang,
     onToggle: propsOnToggle,
-    onChange
+    onChange,
+    dataSources
   } = _ref;
   const [currentCatIndex, setCurrentCatIndex] = useState(0);
   const [selectedType, setType] = useState(type);
@@ -102,6 +103,8 @@ const TypesDialog = _ref => {
       className: "d-flex flex-wrap"
     }, item.children.map(chartType => {
       if (notSupportStatisticTypes.includes(chartType)) return null;
+      // Table_element only supported on external apps
+      if (chartType === CHART_TYPE.TABLE_ELEMENT && dataSources === 'view') return null;
       return /*#__PURE__*/React.createElement("div", {
         key: chartType,
         onClick: event => onTypeChange(event, chartType, index),

package/dist/constants/common-constants.js

@@ -2,7 +2,9 @@ import { CellType } from 'dtable-utils';
 export const CommonEventTypes = {
   OPEN_SELECT: 'OPEN_SELECT',
   REFRESH_CHARTS: 'REFRESH_CHARTS',
-  CHANGE_HEADER_WIDTH: 'CHANGE_HEADER_WIDTH'
+  CHANGE_HEADER_WIDTH: 'CHANGE_HEADER_WIDTH',
+  EXPAND_ROW_UPDATED: 'EXPAND_ROW_UPDATED',
+  EXPAND_ROW_DELETED: 'EXPAND_ROW_DELETED'
 };
 export const EXTERNAL_EVENT = {
   SHOW_ROW_DETAIL_DIALOG: 'RowDetailDialog'

package/dist/constants/index.js

@@ -1,4 +1,4 @@
-import { CellType, DEFAULT_NUMBER_FORMAT } from 'dtable-utils';
+import { CellType, DEFAULT_NUMBER_FORMAT, FORMULA_RESULT_TYPE } from 'dtable-utils';
 import { GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP, GEOLOCATION_GRANULARITY, GEOLOCATION_GRANULARITY_LIST, MAP_LEVEL, MUNICIPALITIES } from './geolocation';
 import { CHART_KEY, GENERIC_KEY, GENERIC_KEY_2_SIMILAR_KEYS } from './model';
 import { STYLE_COLORS, HORIZONTAL_ALIGN, HORIZONTAL_ALIGNS, HORIZONTAL_ALIGN_SHOW } from './style';

package/dist/constants/type-image.js

@@ -29,5 +29,6 @@ export const CHART_TYPE_IMAGE = {
   [CHART_TYPE.DASHBOARD]: 'dashboard-chart.png',
   [CHART_TYPE.TREE_MAP]: 'treemap.png',
   [CHART_TYPE.TABLE]: 'pivot-table.png',
-  [CHART_TYPE.FUNNEL]: 'funnel.png'
+  [CHART_TYPE.FUNNEL]: 'funnel.png',
+  [CHART_TYPE.TABLE_ELEMENT]: 'table-element.png'
 };

package/dist/constants/type.js

@@ -28,7 +28,8 @@ export const CHART_TYPE = {
   DASHBOARD: 'dashboard',
   TREE_MAP: 'tree_map',
   TABLE: 'table',
-  FUNNEL: 'funnel'
+  FUNNEL: 'funnel',
+  TABLE_ELEMENT: 'table_element'
 };
 export const CHART_TYPE_SHOW = {
   [CHART_TYPE.BAR]: 'Basic_histogram',
@@ -60,7 +61,8 @@ export const CHART_TYPE_SHOW = {
   [CHART_TYPE.DASHBOARD]: 'Gauge',
   [CHART_TYPE.TREE_MAP]: 'Tree_map',
   [CHART_TYPE.TABLE]: 'Pivot_table',
-  [CHART_TYPE.FUNNEL]: 'Funnel'
+  [CHART_TYPE.FUNNEL]: 'Funnel',
+  [CHART_TYPE.TABLE_ELEMENT]: 'Table_element'
 };
 export const CHART_TYPES = [{
   name: 'Histogram',
@@ -117,7 +119,7 @@ export const CHART_TYPES = [{
 }, {
   name: 'Table',
   icon: 'dtable-logo',
-  children: [CHART_TYPE.TABLE]
+  children: [CHART_TYPE.TABLE, CHART_TYPE.TABLE_ELEMENT]
 }, {
   name: 'Funnel',
   icon: 'funnel',

package/dist/context.js

@@ -12,6 +12,7 @@ class Context {
         onFail
       } = _ref;
       // use custom api to get chart result data
+      // currently used in statistics plugin and big screen plugin
       if (this.api.queryChartResult) {
         return this.api.queryChartResult({
           chart,
@@ -21,7 +22,6 @@ class Context {
       }
       const table = getTableById(tables, chart.config.table_id);
       const currentView = table.views.find(view => view._id === chart.config.view_id);
-      // use default view
       const defaultView = table.views.find(view => view._id === '0000');
       const chartDataSQL = new ChartDataSQL({
         table,

package/dist/locale/lang/de.js

@@ -252,7 +252,7 @@ const de = {
   "Use_default_color": "Standardfarbe verwenden",
   "Use_colors_in_single_select_solumn": "Verwenden Sie Farben in einer einzelnen Auswahlspalte",
   "Search_records": "Einträge suchen",
-  "Please_select_a_grouping_column": "Please select grouping column",
+  "Please_select_a_grouping_column": "Bitte Gruppierungsspalte auswählen",
   "View": "Sicht",
   "Funnel": "Trichterdiagramm",
   "All_charts": "Alle Diagramme",
@@ -264,6 +264,21 @@ const de = {
   "Outside": "Draußen",
   "Show_overall_rate": "Gesamtpreisbeschriftung anzeigen",
   "Percentage": "Prozentsatz",
-  "Number_and_percentage": "Anzahl und Prozentsatz"
+  "Number_and_percentage": "Anzahl und Prozentsatz",
+  "Table_element": "Tableau",
+  "Sort": "Trier",
+  "1_Sort": "1 Sorte",
+  "Sorts": "sortiert",
+  "hide_columns": "Spalten ausblenden",
+  "Hidden_columns": "Versteckte Spalten",
+  "1_hidden_column": "1 ausgeblendete Spalte",
+  "No_sorts": "Keine Sorten",
+  "Add_sort": "Sortierung hinzufügen",
+  "Search_column": "Suchspalte",
+  "up": "Hoch",
+  "down": "Runter",
+  "Equal": "Gleich",
+  "Hide_all": "Alles ausblenden",
+  "Show_all": "Alle anzeigen"
 };
 export default de;

package/dist/locale/lang/en.js

@@ -264,6 +264,21 @@ const en = {
   "Outside": "Outside",
   "Show_overall_rate": "Show overall rate",
   "Percentage": "Percentage",
-  "Number_and_percentage": "Number and percentage"
+  "Number_and_percentage": "Number and percentage",
+  "Table_element": "Table",
+  "Sort": "Sort",
+  "1_Sort": "1 sort",
+  "Sorts": "sorts",
+  "hide_columns": "Hide columns",
+  "Hidden_columns": "Hidden columns",
+  "1_hidden_column": "1 Hidden column",
+  "No_sorts": "No sorts",
+  "Add_sort": "Add sort",
+  "Search_column": "Search column",
+  "up": "Up",
+  "down": "Down",
+  "Equal": "Equal",
+  "Hide_all": "Hide all",
+  "Show_all": "Show all"
 };
 export default en;

package/dist/locale/lang/es.js

@@ -264,6 +264,21 @@ const es = {
   "Outside": "Outside",
   "Show_overall_rate": "Show overall rate",
   "Percentage": "Percentage",
-  "Number_and_percentage": "Number and percentage"
+  "Number_and_percentage": "Number and percentage",
+  "Table_element": "Table",
+  "Sort": "Sort",
+  "1_Sort": "1 sort",
+  "Sorts": "sorts",
+  "hide_columns": "Hide columns",
+  "Hidden_columns": "Hidden columns",
+  "1_hidden_column": "1 Hidden column",
+  "No_sorts": "No sorts",
+  "Add_sort": "Add sort",
+  "Search_column": "Search column",
+  "up": "Up",
+  "down": "Down",
+  "Equal": "Equal",
+  "Hide_all": "Hide all",
+  "Show_all": "Show all"
 };
 export default es;

package/dist/locale/lang/fr.js

@@ -252,7 +252,7 @@ const fr = {
   "Use_default_color": "Utiliser la couleur par défaut",
   "Use_colors_in_single_select_solumn": "Utiliser les couleurs dans une colonne de sélection unique",
   "Search_records": "Rechercher des enregistrements",
-  "Please_select_a_grouping_column": "Please select grouping column",
+  "Please_select_a_grouping_column": "Veuillez sélectionner la colonne de regroupement",
   "View": "Voir",
   "Funnel": "Entonnoir",
   "All_charts": "Tous les graphiques",
@@ -264,6 +264,21 @@ const fr = {
   "Outside": "Dehors",
   "Show_overall_rate": "Afficher le libellé du tarif global",
   "Percentage": "Couche d'entonnoir",
-  "Number_and_percentage": "Nombre et pourcentage"
+  "Number_and_percentage": "Nombre et pourcentage",
+  "Table_element": "Tabelle",
+  "Sort": "Trier",
+  "1_Sort": "1 sorte",
+  "Sorts": "sortes",
+  "hide_columns": "Masquer les colonnes",
+  "Hidden_columns": "Colonnes masquées",
+  "1_hidden_column": "1 colonne masquée",
+  "No_sorts": "Aucune sorte",
+  "Add_sort": "Ajouter un tri",
+  "Search_column": "Colonne de recherche",
+  "up": "En haut",
+  "down": "Vers le bas",
+  "Equal": "Égal",
+  "Hide_all": "cacher",
+  "Show_all": "Afficher tout"
 };
 export default fr;

package/dist/locale/lang/pt.js

@@ -264,6 +264,21 @@ const pt = {
   "Outside": "Outside",
   "Show_overall_rate": "Show overall rate",
   "Percentage": "Percentage",
-  "Number_and_percentage": "Number and percentage"
+  "Number_and_percentage": "Number and percentage",
+  "Table_element": "Table",
+  "Sort": "Sort",
+  "1_Sort": "1 sort",
+  "Sorts": "sorts",
+  "hide_columns": "Hide columns",
+  "Hidden_columns": "Hidden columns",
+  "1_hidden_column": "1 Hidden column",
+  "No_sorts": "No sorts",
+  "Add_sort": "Add sort",
+  "Search_column": "Search column",
+  "up": "Up",
+  "down": "Down",
+  "Equal": "Equal",
+  "Hide_all": "Hide all",
+  "Show_all": "Show all"
 };
 export default pt;

package/dist/locale/lang/ru.js

@@ -264,6 +264,21 @@ const ru = {
   "Outside": "Outside",
   "Show_overall_rate": "Show overall rate",
   "Percentage": "Percentage",
-  "Number_and_percentage": "Number and percentage"
+  "Number_and_percentage": "Number and percentage",
+  "Table_element": "Table",
+  "Sort": "Sort",
+  "1_Sort": "1 sort",
+  "Sorts": "sorts",
+  "hide_columns": "Hide columns",
+  "Hidden_columns": "Hidden columns",
+  "1_hidden_column": "1 Hidden column",
+  "No_sorts": "No sorts",
+  "Add_sort": "Add sort",
+  "Search_column": "Search column",
+  "up": "Up",
+  "down": "Down",
+  "Equal": "Equal",
+  "Hide_all": "Hide all",
+  "Show_all": "Show all"
 };
 export default ru;

package/dist/locale/lang/zh_CN.js

@@ -264,6 +264,21 @@ const zh_CN = {
   "Outside": "在图表外",
   "Show_overall_rate": "显示总转化率标签",
   "Percentage": "百分比",
-  "Number_and_percentage": "数值和百分比"
+  "Number_and_percentage": "数值和百分比",
+  "Table_element": "表格",
+  "Sort": "排序",
+  "1_Sort": "1 个排序",
+  "Sorts": "个排序",
+  "hide_columns": "隐藏列",
+  "Hidden_columns": "个隐藏列",
+  "1_hidden_column": "1 个隐藏列",
+  "No_sorts": "没有排序",
+  "Add_sort": "添加排序",
+  "Search_column": "搜索列",
+  "up": "升序",
+  "down": "降序",
+  "Equal": "相等",
+  "Hide_all": "隐藏全部",
+  "Show_all": "展示全部"
 };
 export default zh_CN;

package/dist/model/index.js

@@ -32,6 +32,7 @@ import Trend from './trend';
 import Dashboard from './dashboard';
 import Table from './table';
 import Funnel from './funnel';
+import TableElement from './table-element';
 const CHART_MAP = {
   [CHART_TYPE.BAR]: Bar,
   [CHART_TYPE.BAR_GROUP]: BarGroup,
@@ -62,6 +63,7 @@ const CHART_MAP = {
   [CHART_TYPE.DASHBOARD]: Dashboard,
   [CHART_TYPE.TREE_MAP]: TreeMap,
   [CHART_TYPE.TABLE]: Table,
-  [CHART_TYPE.FUNNEL]: Funnel
+  [CHART_TYPE.FUNNEL]: Funnel,
+  [CHART_TYPE.TABLE_ELEMENT]: TableElement
 };
 export { ChartModel, GenericModel, CHART_MAP, User };

package/dist/model/table-element.js

@@ -0,0 +1,22 @@
+import { CHART_TYPE } from '../constants';
+import BaseModel from './base-model';
+class TableElement extends BaseModel {
+  constructor(options, tables) {
+    super({
+      ...options,
+      type: CHART_TYPE.TABLE_ELEMENT
+    });
+    let column_keys = [];
+    const table_id = options.table_id;
+    if (table_id) {
+      const table = tables.find(table => table._id === table_id);
+      column_keys = table.columns.map(column => column.key);
+    }
+    this.sorts = options.sorts || [];
+    this.groupbys = options.groupbys || [];
+    this.shown_column_keys = options.shown_column_keys || column_keys;
+    this.permissions = options.permissions || {};
+    this.show_cell_coloring = false;
+  }
+}
+export default TableElement;

package/dist/settings/data-settings.js

@@ -16,6 +16,7 @@ import { HeatMapDataSettings } from './heat-map-settings';
 import { MirrorDataSettings } from './mirror-settings';
 import { TrendDataSettings } from './trend-settings';
 import { FunnelDataSettings } from './funnel-settings';
+import { TableElementDataSettings } from './table-element-settings';
 const DataSettings = props => {
   const [refreshToggle, setRefreshToggle] = useState(false);
   const cacheRef = useRef(props);
@@ -127,6 +128,10 @@ const DataSettings = props => {
       {
         return /*#__PURE__*/React.createElement(FunnelDataSettings, props);
       }
+    case CHART_TYPE.TABLE_ELEMENT:
+      {
+        return /*#__PURE__*/React.createElement(TableElementDataSettings, props);
+      }
     default:
       {
         return null;

package/dist/settings/table-element-settings/components/data-filter.css

@@ -0,0 +1,17 @@
+.sea-chart-settings .sea-chart-data-filter {
+  width: 100%;
+  padding: 3px 4px;
+  border-radius: 4px;
+  line-height: 22px;
+}
+
+.sea-chart-settings .sea-chart-data-filter:hover {
+  cursor: pointer;
+  background-color: #efefef;
+}
+
+.sea-chart-settings .sea-chart-data-filter .dtable-icon-filter {
+  font-size: 14px;
+  color: #666;
+  margin-right: .5rem;
+}