@qn-pandora/pandora-component 4.1.7 → 4.3.0

package/lib/components/Drawer/style.less

@@ -14,6 +14,9 @@
     height: 60px;
     line-height: 60px;
   }
+  .@{ant-prefix}-drawer-header-title {
+    overflow: hidden;
+  }
 }
 
 .@{sdk-prefix}-drawer-size-small {
@@ -46,3 +49,13 @@
 .@{sdk-prefix}-drawer-close-icon {
   margin-left: 24px;
 }
+
+.@{sdk-prefix}-drawer-header-full-icon {
+  margin-left: 24px;
+  color: @font-color-7;
+  font-size: 14px;
+}
+
+.@{sdk-prefix}-drawer-no-mask {
+  background-color: @normal-color;
+}

package/lib/components/RadioGroup/style.css

@@ -377,12 +377,19 @@ span.ant-radio + * {
 .ant-radio-button-wrapper.ant-radio-button-wrapper-rtl.ant-radio-button-wrapper-disabled:first-child {
   border-right-color: #e5e5e5;
 }
+.pandora-sdk-solid-radio-group .ant-radio-button-wrapper:not(.pandora-sdk-solid-radio-group .ant-radio-button-wrapper-checked)::before {
+  background-color: #bfbfbf;
+}
 .pandora-sdk-solid-radio-group .ant-radio-button-wrapper {
   padding: 0 12px;
 }
 .pandora-sdk-solid-radio-group .ant-radio-button-wrapper:not(.pandora-sdk-solid-radio-group .ant-radio-button-wrapper-checked) {
   border-color: #bfbfbf;
 }
+.pandora-sdk-solid-radio-group .ant-radio-button-wrapper:focus-within {
+  -webkit-box-shadow: unset;
+          box-shadow: unset;
+}
 .pandora-sdk-solid-radio-group .ant-radio:not(.pandora-sdk-solid-radio-group .ant-radio-checked) .ant-radio-inner {
   border-color: #bfbfbf;
 }

package/lib/components/RadioGroup/style.less

@@ -2,11 +2,20 @@
 @import '../../style/theme.less';
 
 .@{sdk-prefix}-solid-radio-group {
+  .@{ant-prefix}-radio-button-wrapper:not(.@{sdk-prefix}-solid-radio-group
+      .@{ant-prefix}-radio-button-wrapper-checked) {
+    &::before {
+      background-color: @border-color-2;
+    }
+  }
   .@{ant-prefix}-radio-button-wrapper {
     padding: 0 12px;
     &:not(&-checked) {
       border-color: @input-border-color;
     }
+    &:focus-within {
+      box-shadow: unset;
+    }
   }
 
   .@{ant-prefix}-radio {

package/lib/components/Table/ColumnSetting/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare const All = "_all";
+export interface IOption {
+    label: string | React.ReactNode;
+    value: string;
+}
+export interface ISettingBtnProps {
+    overlayClass?: string;
+    onHiddenKeysChange?: (value: string[]) => void;
+    hiddenKeys?: string[];
+    options?: IOption[];
+    loading?: boolean;
+}
+export declare function ColumnSetting(props: ISettingBtnProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ColumnSetting>;
+export default _default;

package/lib/components/Table/ColumnSetting/index.js

@@ -0,0 +1,104 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spread = (this && this.__spread) || function () {
+    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
+    return ar;
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var lodash_1 = require("lodash");
+var antd_1 = require("antd");
+var icons_1 = require("@ant-design/icons");
+var config_provider_1 = require("antd/es/config-provider");
+var language_1 = require("../../../utils/language");
+var type_1 = require("../../../constants/language/table/type");
+var style_1 = require("../../../constants/style");
+var NameLimiter_1 = __importDefault(require("../../NameLimiter"));
+var Input_1 = __importDefault(require("../../Input"));
+exports.All = '_all';
+function ColumnSetting(props) {
+    var overlayClass = props.overlayClass, _a = props.hiddenKeys, hiddenKeys = _a === void 0 ? [] : _a, onHiddenKeysChange = props.onHiddenKeysChange, _b = props.options, options = _b === void 0 ? [] : _b, loading = props.loading;
+    var locale = react_1.useContext(config_provider_1.ConfigContext).locale;
+    var _c = __read(react_1.useState(''), 2), prefix = _c[0], setPrefix = _c[1];
+    var allKeys = react_1.useMemo(function () {
+        return options.map(function (item) { return item.value; });
+    }, [options]);
+    var realOptions = react_1.useMemo(function () {
+        if (!prefix || prefix.length === 0)
+            return options;
+        return options.filter(function (item) {
+            if (typeof item.label === 'string' &&
+                item.label.toLowerCase().indexOf(prefix.toLowerCase()) !== -1) {
+                return true;
+            }
+            return false;
+        });
+    }, [prefix, options]);
+    var realValues = react_1.useMemo(function () {
+        return allKeys.filter(function (item) { return !lodash_1.includes(hiddenKeys, item); });
+    }, [hiddenKeys, allKeys]);
+    var allCheckChange = react_1.useCallback(function (e) {
+        if (e.target.checked) {
+            onHiddenKeysChange === null || onHiddenKeysChange === void 0 ? void 0 : onHiddenKeysChange([]);
+            return;
+        }
+        onHiddenKeysChange === null || onHiddenKeysChange === void 0 ? void 0 : onHiddenKeysChange(allKeys);
+    }, [onHiddenKeysChange, allKeys]);
+    var handlePrefixChange = react_1.useCallback(function (value) {
+        setPrefix(value || '');
+    }, [setPrefix]);
+    var handleChange = react_1.useCallback(function (e) {
+        var v = e.target.value;
+        var checked = e.target.checked;
+        // 添加
+        if (checked) {
+            var checkedValues_1 = Array.from(new Set(__spread(realValues, [v])));
+            onHiddenKeysChange === null || onHiddenKeysChange === void 0 ? void 0 : onHiddenKeysChange(allKeys.filter(function (item) { return !lodash_1.includes(checkedValues_1, item); }));
+            return;
+        }
+        // 删除
+        var restValues = realValues.filter(function (item) { return item !== v; });
+        onHiddenKeysChange === null || onHiddenKeysChange === void 0 ? void 0 : onHiddenKeysChange(allKeys.filter(function (item) { return !lodash_1.includes(restValues, item); }));
+    }, [onHiddenKeysChange, realValues, allKeys]);
+    return (react_1.default.createElement(antd_1.Popover, { trigger: "click", placement: "bottomRight", content: react_1.default.createElement(antd_1.Spin, { spinning: !!loading },
+            react_1.default.createElement("div", { className: classnames_1.default(style_1.SDK_PREFIX + "-table-column-setting-popover", overlayClass) },
+                react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-table-column-setting-header" },
+                    react_1.default.createElement(antd_1.Checkbox, { value: exports.All, checked: hiddenKeys.length === 0, onChange: allCheckChange, className: style_1.SDK_PREFIX + "-table-column-setting-all-check" }, language_1.formatString(type_1.TableLocale.check_all, locale)),
+                    react_1.default.createElement(Input_1.default, { value: prefix, allowClear: true, onChange: handlePrefixChange, placeholder: language_1.formatString(type_1.TableLocale.search, locale), className: style_1.SDK_PREFIX + "-table-column-setting-search-input" })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-table-column-setting-content" }, realOptions.map(function (item) {
+                        return (react_1.default.createElement("div", { key: item.value },
+                            react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-table-column-setting-checkbox-container" },
+                                react_1.default.createElement(antd_1.Checkbox, { checked: !!realValues.find(function (v) { return v === item.value; }), value: item.value, className: style_1.SDK_PREFIX + "-table-column-setting-checkbox", onChange: handleChange },
+                                    react_1.default.createElement("span", { className: style_1.SDK_PREFIX + "-table-column-setting-value" }, typeof item.label === 'string' ? (react_1.default.createElement(NameLimiter_1.default, { name: item.label })) : (item.label))))));
+                    }))))) },
+        react_1.default.createElement(icons_1.SettingOutlined, { className: style_1.SDK_PREFIX + "-table-column-setting-icon" })));
+}
+exports.ColumnSetting = ColumnSetting;
+exports.default = react_1.default.memo(ColumnSetting);

package/lib/components/Table/ColumnSetting/style.css

@@ -0,0 +1,47 @@
+.pandora-sdk-table-column-setting-popover {
+  padding: 10px;
+  width: 100%;
+  width: 600px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.pandora-sdk-table-column-setting-popover .pandora-sdk-table-column-setting-header {
+  border-bottom: 1px solid #e5e5e5;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding-bottom: 10px;
+}
+.pandora-sdk-table-column-setting-popover .pandora-sdk-table-column-setting-header .pandora-sdk-table-column-setting-all-check {
+  line-height: 32px;
+}
+.pandora-sdk-table-column-setting-popover .pandora-sdk-table-column-setting-header .pandora-sdk-table-column-setting-search-input {
+  width: 200px;
+}
+.pandora-sdk-table-column-setting-icon {
+  color: #333;
+}
+.pandora-sdk-table-column-setting-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.pandora-sdk-table-column-setting-content > div {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 33.33%;
+          flex: 0 0 33.33%;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pandora-sdk-table-column-setting-content > div .pandora-sdk-table-column-setting-checkbox-container .pandora-sdk-table-column-setting-checkbox {
+  width: 100%;
+  overflow: hidden;
+}
+.pandora-sdk-table-column-setting-content > div .pandora-sdk-table-column-setting-checkbox-container .pandora-sdk-table-column-setting-checkbox > span:nth-child(2) {
+  overflow: hidden;
+}

package/lib/components/Table/ColumnSetting/style.less

@@ -0,0 +1,46 @@
+@import '../../../style/theme.less';
+
+.@{sdk-prefix}-table-column-setting-popover {
+  padding: 10px;
+  width: 100%;
+  width: 600px;
+  .@{sdk-prefix}-table-column-setting-header {
+    border-bottom: 1px solid @border-color-base;
+    display: flex;
+    padding-bottom: 10px;
+    .@{sdk-prefix}-table-column-setting-all-check {
+      line-height: 32px;
+    }
+    .@{sdk-prefix}-table-column-setting-search-input {
+      width: 200px;
+    }
+  }
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.@{sdk-prefix}-table-column-setting-icon {
+  color: @font-color-7;
+}
+
+.@{sdk-prefix}-table-column-setting-content {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.@{sdk-prefix}-table-column-setting-content > div {
+  flex: 0 0 33.33%;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  .@{sdk-prefix}-table-column-setting-checkbox-container {
+    .@{sdk-prefix}-table-column-setting-checkbox {
+      width: 100%;
+      overflow: hidden;
+    }
+    .@{sdk-prefix}-table-column-setting-checkbox > span:nth-child(2) {
+      overflow: hidden;
+    }
+  }
+}

package/lib/components/Table/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { TableProps } from 'antd/es/table';
+import { TableProps, ColumnType, ColumnGroupType } from 'antd/es/table';
 import { TableRowSelection } from 'antd/es/table/interface';
+import { IOption } from './ColumnSetting';
 /**
  * 表格提供自定义多选, 通过 rowSelection对象的selectedRowKeys和onChange来控制多选的状态
  * 需要注意的是, 当在外部进行增删改或者外部需要控制选择状态时, 例如删除之后清空全选状态, 需要受控
@@ -20,7 +21,17 @@ export interface IOptionItem {
      */
     disabled?: boolean | ((selectItems: any[]) => boolean);
 }
-export interface ITableProps<T> extends TableProps<T> {
+export interface IColumnType<T> extends ColumnType<T> {
+    colTitle?: string | React.ReactNode;
+    configurable?: boolean;
+}
+export interface IColumnGroupType<T> extends ColumnGroupType<T> {
+    colTitle?: string | React.ReactNode;
+    configurable?: boolean;
+}
+export declare type IColumnsType<T> = Array<IColumnGroupType<T> | IColumnType<T>>;
+export interface ITableProps<T> extends Omit<TableProps<T>, 'columns'> {
+    columns?: IColumnsType<T>;
     /**
      * 设置selectedRow选项, 可以获取当前选中的所有
      * 数据.
@@ -30,6 +41,10 @@ export interface ITableProps<T> extends TableProps<T> {
     /** 如果支持多选，则batchOptions为多选时的一些批量操作，如删除、添加等 */
     batchOptions?: IOptionItem[];
     emptyText?: React.ReactNode;
+    showColumnSetting?: boolean;
+    hiddenColumns?: string[];
+    onHiddenColumnsChange?: (keys: string[]) => void;
+    columnSettingOverlayClass?: string;
 }
 /**
  * pandora2.0风格的表格
@@ -44,15 +59,25 @@ declare class Table<T = any> extends React.Component<ITableProps<T>, any> {
     static contextType: React.Context<import("antd/es/config-provider").ConfigConsumerProps>;
     indeterminate: boolean;
     checkAll: boolean;
+    hiddenColumn: string[] | undefined;
     UNSAFE_componentWillReceiveProps(nextProps: ITableProps<T>): void;
     get selectedRowKeys(): React.ReactText[];
     get rowSelection(): TableRowSelection<T> | undefined;
     get undisabledData(): readonly T[];
     get keysOfCurrentPage(): any[];
     get emptyTextComp(): {};
+    get columnsSettingOptions(): IOption[];
+    get columnKeys(): {
+        allKeys: string[];
+        unconfigableKeys: string[];
+        resetKeys: string[];
+    };
+    handleHideColumnsChange(keys: string[]): Promise<void> | undefined;
+    getColumns(): IColumnsType<T> | undefined;
     getRowKey(row: any, index: number): any;
     setIndeterminate(indeterminate: boolean): void;
     setCheckAll(checkAll: boolean): void;
+    setHiddenColumn(hiddenColumn?: string[]): void;
     setCheckboxStatus(selectedRowsOfCurrentPage?: T[], dataSource?: T[]): void;
     handleSelectionChange(selectedRowKeys: React.Key[], selectedRowsOfCurrentPage: any[]): void;
     onRowSelectionChange(selectedRowKeys: React.Key[], selectedRowsOfCurrentPage: any[]): void;

package/lib/components/Table/index.js

@@ -81,12 +81,14 @@ var mobx_1 = require("mobx");
 var lodash_1 = require("lodash");
 var antd_1 = require("antd");
 var config_provider_1 = require("antd/es/config-provider");
+var app_sdk_1 = require("@qn-pandora/app-sdk");
 var pandora_component_icons_1 = require("@qn-pandora/pandora-component-icons");
 var bind_1 = __importDefault(require("../../utils/bind"));
 var language_1 = require("../../utils/language");
 var style_1 = require("../../constants/style");
 var type_1 = require("../../constants/language/table/type");
 var ColumnTag_1 = require("./ColumnTag/ColumnTag");
+var ColumnSetting_1 = __importDefault(require("./ColumnSetting"));
 /**
  * pandora2.0风格的表格
  */
@@ -96,6 +98,7 @@ var Table = /** @class */ (function (_super) {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.indeterminate = false;
         _this.checkAll = false;
+        _this.hiddenColumn = _this.props.hiddenColumns;
         return _this;
     }
     Table.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
@@ -126,6 +129,9 @@ var Table = /** @class */ (function (_super) {
                     : selectedRowsOfCurrentPage);
             }
         }
+        if (lodash_1.isEqual(nextProps.hiddenColumns, this.props.hiddenColumns)) {
+            this.setHiddenColumn(nextProps.hiddenColumns);
+        }
     };
     Object.defineProperty(Table.prototype, "selectedRowKeys", {
         get: function () {
@@ -186,6 +192,88 @@ var Table = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Table.prototype, "columnsSettingOptions", {
+        // 列设置 options
+        get: function () {
+            var options = [];
+            var _a = this.props.columns, columns = _a === void 0 ? [] : _a;
+            columns.forEach(function (col) {
+                if (col.key &&
+                    col.key.toString().length > 0 &&
+                    col.configurable !== false) {
+                    options.push({
+                        label: col.colTitle || col.title,
+                        value: col.key.toString()
+                    });
+                }
+            });
+            return options;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Table.prototype, "columnKeys", {
+        get: function () {
+            var _a = this.props.columns, columns = _a === void 0 ? [] : _a;
+            var allKeys = [];
+            var unconfigableKeys = [];
+            var resetKeys = [];
+            columns.forEach(function (col) {
+                if (col.key) {
+                    if (col.configurable === false) {
+                        unconfigableKeys.push(col.key.toString());
+                    }
+                    else {
+                        resetKeys.push(col.key.toString());
+                    }
+                    allKeys.push(col.key.toString());
+                }
+            });
+            return {
+                allKeys: allKeys,
+                unconfigableKeys: unconfigableKeys,
+                resetKeys: resetKeys
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    // 隐藏key
+    Table.prototype.handleHideColumnsChange = function (keys) {
+        var _a, _b;
+        var _c = this.columnKeys, resetKeys = _c.resetKeys, unconfigableKeys = _c.unconfigableKeys;
+        if (unconfigableKeys.length === 0 && lodash_1.isEqual(keys, resetKeys)) {
+            // 提示。至少需要勾选一列
+            return app_sdk_1.toaster.warning(language_1.formatString(type_1.TableLocale.hide_column_tooltip, this.context.locale));
+        }
+        this.setHiddenColumn(keys);
+        (_b = (_a = this.props).onHiddenColumnsChange) === null || _b === void 0 ? void 0 : _b.call(_a, keys);
+    };
+    Table.prototype.getColumns = function () {
+        var _a = this.props, showColumnSetting = _a.showColumnSetting, columns = _a.columns, columnSettingOverlayClass = _a.columnSettingOverlayClass;
+        var hiddenColumn = this.hiddenColumn || [];
+        if (!showColumnSetting) {
+            return columns;
+        }
+        // 获取到列设置的options
+        var columnsSettingOptions = this.columnsSettingOptions;
+        var selectedCols = __spread((columns || []).filter(function (item) {
+            if (item.configurable === false || !lodash_1.includes(hiddenColumn, item.key)) {
+                return true;
+            }
+            return false;
+        }));
+        var length = selectedCols.length;
+        if (length > 0) {
+            var lastCol = selectedCols.pop();
+            var title = (React.createElement("span", { className: style_1.SDK_PREFIX + "-last-column-title" },
+                lastCol.title,
+                React.createElement("span", { className: style_1.SDK_PREFIX + "-last-column-setting" },
+                    React.createElement(ColumnSetting_1.default, { options: columnsSettingOptions, hiddenKeys: this.hiddenColumn, onHiddenKeysChange: this.handleHideColumnsChange, overlayClass: columnSettingOverlayClass }))));
+            selectedCols.push(__assign(__assign({}, lastCol), { title: title }));
+        }
+        return selectedCols;
+    };
     Table.prototype.getRowKey = function (row, index) {
         var rowKey = this.props.rowKey;
         if (typeof rowKey === 'function') {
@@ -199,6 +287,9 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.setCheckAll = function (checkAll) {
         this.checkAll = checkAll;
     };
+    Table.prototype.setHiddenColumn = function (hiddenColumn) {
+        this.hiddenColumn = hiddenColumn;
+    };
     // 设置全选checkout的状态
     Table.prototype.setCheckboxStatus = function (selectedRowsOfCurrentPage, dataSource) {
         if (selectedRowsOfCurrentPage === void 0) { selectedRowsOfCurrentPage = []; }
@@ -270,9 +361,9 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.render = function () {
         var _a, _b;
         var _this = this;
-        var _c = this.props, className = _c.className, batchOptions = _c.batchOptions, scroll = _c.scroll, locale = _c.locale, emptyText = _c.emptyText, restProps = __rest(_c, ["className", "batchOptions", "scroll", "locale", "emptyText"]);
+        var _c = this.props, className = _c.className, batchOptions = _c.batchOptions, scroll = _c.scroll, locale = _c.locale, emptyText = _c.emptyText, columns = _c.columns, restProps = __rest(_c, ["className", "batchOptions", "scroll", "locale", "emptyText", "columns"]);
         return (React.createElement("div", null,
-            React.createElement(antd_1.Table, __assign({ scroll: scroll, locale: __assign({ emptyText: this.emptyTextComp }, locale) }, restProps, { className: classnames_1.default(style_1.SDK_PREFIX + "-table-wrapper", (_a = {}, _a[style_1.SDK_PREFIX + "-table-scrollX"] = lodash_1.get(scroll, 'x'), _a), (_b = {}, _b[style_1.SDK_PREFIX + "-table-scrollY"] = lodash_1.get(scroll, 'y'), _b), className), 
+            React.createElement(antd_1.Table, __assign({ scroll: scroll, locale: __assign({ emptyText: this.emptyTextComp }, locale), columns: this.getColumns() }, restProps, { className: classnames_1.default(style_1.SDK_PREFIX + "-table-wrapper", (_a = {}, _a[style_1.SDK_PREFIX + "-table-scrollX"] = lodash_1.get(scroll, 'x'), _a), (_b = {}, _b[style_1.SDK_PREFIX + "-table-scrollY"] = lodash_1.get(scroll, 'y'), _b), className), 
                 // 涉及到权限
                 // getCheckboxProps只能放到tableBatchWrapper里，因为selectedRowKeys在那个组件计算
                 rowSelection: batchOptions && this.props.rowSelection
@@ -306,6 +397,10 @@ var Table = /** @class */ (function (_super) {
         mobx_1.observable,
         __metadata("design:type", Object)
     ], Table.prototype, "checkAll", void 0);
+    __decorate([
+        mobx_1.observable.ref,
+        __metadata("design:type", Object)
+    ], Table.prototype, "hiddenColumn", void 0);
     __decorate([
         mobx_1.computed,
         __metadata("design:type", Object),
@@ -331,6 +426,28 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
     ], Table.prototype, "emptyTextComp", null);
+    __decorate([
+        mobx_1.computed,
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Table.prototype, "columnsSettingOptions", null);
+    __decorate([
+        mobx_1.computed,
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Table.prototype, "columnKeys", null);
+    __decorate([
+        bind_1.default,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "handleHideColumnsChange", null);
+    __decorate([
+        bind_1.default,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "getColumns", null);
     __decorate([
         bind_1.default,
         __metadata("design:type", Function),
@@ -351,6 +468,13 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Boolean]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "setCheckAll", null);
+    __decorate([
+        bind_1.default,
+        mobx_1.action,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "setHiddenColumn", null);
     __decorate([
         bind_1.default,
         __metadata("design:type", Function),

package/lib/components/Table/style.css

@@ -1722,3 +1722,7 @@ textarea.ant-pagination-options-quick-jumper input {
 .ant-empty .ant-empty-description {
   color: #bfbfbf;
 }
+.pandora-sdk-last-column-title .pandora-sdk-last-column-setting {
+  position: absolute;
+  right: 12px;
+}

package/lib/components/Table/style.less

@@ -312,3 +312,10 @@
     color: @input-placeholder-color;
   }
 }
+
+.@{sdk-prefix}-last-column-title {
+  .@{sdk-prefix}-last-column-setting {
+    position: absolute;
+    right: 12px;
+  }
+}

package/lib/constants/language/table/en.js

@@ -2,5 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.table_en = {
     empty: 'No Data',
-    selected: 'Selected'
+    selected: 'Selected',
+    check_all: 'Check All',
+    search: 'Search',
+    hide_column_tooltip: 'At least one column needs to be checked!'
 };

package/lib/constants/language/table/type.d.ts

@@ -1,5 +1,8 @@
 export interface ITableLocale {
     empty: string;
     selected: string;
+    check_all: string;
+    search: string;
+    hide_column_tooltip: string;
 }
 export declare const TableLocale: ITableLocale;

package/lib/constants/language/table/zh.js

@@ -2,5 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.table_zh = {
     empty: '暂无数据',
-    selected: '已选'
+    selected: '已选',
+    check_all: '全选',
+    search: '搜索',
+    hide_column_tooltip: '至少需要勾选一列！'
 };