@aloudata/aloudata-design 0.1.0-beta1 → 0.2.0-beta.3

package/es/Select/interface.d.ts

@@ -0,0 +1,227 @@
+import _ from 'lodash';
+import React from 'react';
+declare type TSize = 'small' | 'default' | 'large';
+export declare type TMaybeArray<T> = T | T[];
+export declare type modeType = 'string' | 'tags' | undefined;
+export declare type searchType = 'normal' | 'inner' | 'no-search';
+export interface IOption {
+    /**
+     列表单项主要文字
+     */
+    label?: string | React.ReactNode;
+    /**
+        作为列表的 `key` 来使用
+     */
+    value: string | number;
+    /**
+        列表次要文字
+     */
+    /**
+        是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 选中该 Option 后，Select 的 title
+     */
+    title?: string;
+    /**
+        `tooltip` 描述
+     */
+    tooltip?: string;
+    /**
+     分组的 `key` ，与 `groupLabel` 一起使用
+     */
+    groupValue?: string;
+    /**
+        分组的标题
+     */
+    groupLabel?: string;
+    options?: Map<string | number, IOption>;
+    isSelectOptGroup?: boolean;
+}
+export interface IOptGroupProps {
+    children?: React.ReactNode;
+    label: string | React.ReactNode;
+    value: string | number;
+}
+export interface IOptionProps {
+    children?: React.ReactNode;
+    /**
+     * @description 默认根据次属性值进行筛选
+    */
+    value: string | number;
+    /**
+     * @description 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    title?: string;
+}
+export interface ISelectProps {
+    /**
+      * @description 输入框尺寸
+     * @default default
+     * @type 'small' | 'default' | 'large';
+     */
+    size?: TSize;
+    customizePrefixCls?: string;
+    /**
+     * @description 多选模式
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * @description 选择框默认文本
+     */
+    placeholder?: string;
+    /**
+     * @description 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @description 是否默认展开下拉菜单
+     * @default false
+     */
+    defaultOpen?: boolean;
+    className?: string;
+    /**
+     * @description 下拉菜单的 className 属性
+     */
+    dropDownClassName?: string;
+    style?: React.CSSProperties;
+    groupStyle?: React.CSSProperties;
+    optionStyle?: React.CSSProperties;
+    /**
+     * @description 下拉菜单的 style 属性
+     */
+    dropDownStyle?: React.CSSProperties;
+    /**
+     * @description 指定默认选中的条目
+     */
+    defaultValue?: TMaybeArray<string | number> | null;
+    /**
+     * @description 指定当前选中的条目，多选时为一个数组。
+     */
+    value?: TMaybeArray<string | number> | null;
+    /**
+     * @description 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能
+     */
+    options?: IOption[];
+    /**
+     * @description 设置弹窗滚动高度
+     * @default 256
+     */
+    listHeight?: number;
+    listRowHeight?: number;
+    labelRenderer?: (input: string) => (option: IOption, isGroup: boolean) => React.ReactNode;
+    searchPredicate?: (input: string) => _.ListIterateeCustom<IOption, boolean>;
+    matchPredicate?: (input: string) => _.ListIterateeCustom<IOption, boolean>;
+    optionLabelRenderer?: (value: string | number, option?: IOption) => React.ReactNode;
+    /**
+     * @description 选中值改变时的回调
+     */
+    onChange?: (value: TMaybeArray<string | number> | null, options?: TMaybeArray<IOption> | null) => void;
+    /**
+     * @description 被选中时调用，参数为选中项的 value
+     */
+    onSelect?: (value: string | number, option: IOption) => void;
+    /**
+     * @description 开启清除功能
+     */
+    allowClear?: boolean;
+    /**
+     * @description 清除的回调
+     */
+    onClear?: () => void;
+    /**
+     * 浮层渲染父节点，默认渲染到 body 上
+     */
+    getContainer?: (node: HTMLElement) => HTMLElement;
+    /**
+     * @description 是否展开下拉菜单
+     */
+    open?: boolean;
+    /**
+     * dropdown visible 值改变时的回调
+     */
+    onDropDownVisibleChange?: (visible: boolean) => void;
+    /** *
+     * @description 下拉菜单和选择器同宽
+     * @default true
+     */
+    dropdownMatchSelectWidth?: boolean;
+    /**
+     * @description 下拉菜单内置标签
+     */
+    label?: React.ReactNode;
+    children?: React.ReactNode[] | React.ReactNode;
+}
+export interface ISelectorProps {
+    input: string;
+    disabled: boolean;
+    prefix: string;
+    size: 'small' | 'default' | 'large';
+    multiple: boolean;
+    bordered: boolean;
+    isFocused: boolean;
+    className?: string | undefined;
+    visible: boolean;
+    style?: React.CSSProperties | undefined;
+    allowClear: boolean;
+    mode?: modeType;
+    label?: React.ReactNode;
+    value?: TMaybeArray<string | number> | undefined | null;
+    filteredOptions: IOption[];
+    searchType: searchType;
+    placeholder?: string;
+    optionLabelRenderer: (value: string | number, option?: IOption) => React.ReactNode;
+    getOptionByValue: (optValue: string | number) => IOption;
+    onInputChange: (value: string) => void;
+    onAllowClear: () => void;
+    deleteValue: (value: React.ReactText[], v: string | number) => void;
+    arrowComponent?: React.ReactElement | undefined;
+    closeComponent?: React.ReactElement | undefined;
+}
+export interface IVirtualListProps {
+    itemHeight?: number;
+    height?: number;
+    prefixCls?: string;
+    children: React.ReactNode;
+    data: IOption[];
+    virtual?: boolean;
+    itemKey: string | number | ((item: never) => React.ReactText);
+}
+export interface IOptionsListProps {
+    style?: React.CSSProperties;
+    input: string;
+    prefixCls: string;
+    groupStyle?: React.CSSProperties;
+    optionStyle?: React.CSSProperties;
+    selected?: TMaybeArray<React.ReactText> | null;
+    multiple: boolean;
+    isMode?: boolean;
+    optionChecked?: TMaybeArray<React.ReactText>;
+    visible?: boolean;
+    isUseAll?: boolean;
+    data: IOption[];
+    hasGroup: boolean;
+    searchType: searchType;
+    placeholder?: string;
+    notFoundContent?: React.ReactElement;
+    onTempValueChange: (tempValue: React.ReactText[]) => void;
+    setTempValue: (values: React.ReactText[]) => void;
+    value?: TMaybeArray<React.ReactText> | null;
+    tempValue: React.ReactText[];
+    isFooter?: boolean;
+    labelRenderer: (option: IOption, isGruop: false) => React.ReactNode;
+    onOptionClick: (selectedValue: string | number) => void;
+    getContainer?: (node: HTMLElement) => HTMLElement;
+    onValueChange?: (optionValues: TMaybeArray<string | number> | null) => void;
+    onInputChange: (value: string) => void;
+    height?: number | undefined;
+    itemHeight?: number | undefined;
+    activeIndex: number;
+    setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+}
+export {};

package/es/Select/interface.js

@@ -0,0 +1 @@
+export {};

package/es/Select/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/es/Select/style/index.js

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/{src → es}/Select/style/index.less

@@ -130,7 +130,8 @@
     // box-shadow: 0 0 6px 0 @color-box-shadow-focused;
 
     .@{select-prefix-cls-legacy} {
-      &-item-all {
+      &-item-all,
+      &-item {
         opacity: 0.5;
       }
     }
@@ -165,6 +166,7 @@
       line-height: 22px;
       white-space: nowrap;
       text-overflow: ellipsis;
+      color: @NL0;
     }
   }
 
@@ -351,15 +353,6 @@
     }
   }
 
-  &-single,
-  &-focused {
-    .@{select-prefix-cls-legacy} {
-      &-item {
-        opacity: 0.5;
-      }
-    }
-  }
-
   // rc-trigger
   &-dropdown {
     position: absolute;

package/es/Select/utils.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IOption } from './interface';
+interface IGroup {
+    groupLabel?: string;
+    groupValue?: string | number;
+}
+export declare const customOptionKeyPrefix = "select_custom_option_";
+export declare const customOptionKey: string;
+export declare function convertNodeToOption(node: React.ReactElement, group: IGroup): IOption;
+export declare const getFlattenOptions: (data: IOption[], hasGroup: boolean) => IOption[];
+export declare function convertChildrenToData(nodes: React.ReactElement[], group?: {}): IOption[];
+export declare function handleOptions(mergedOptions: IOption[], setCacheOptions: (options: IOption[]) => void, updateGroup: (value: boolean) => void): {
+    flattenOptions: IOption[];
+    isGroup: boolean;
+};
+export declare const defaultLabelRenderer: (input: string, prefix: string) => (option: IOption, isGroup: boolean) => React.ReactNode;
+export declare const defaultOptionLabelRenderer: (value: string | number, option?: IOption | undefined) => {};
+export declare const defaultSearchPredicate: (input: string) => (o: IOption) => boolean;
+export declare const defaultMatchPredicate: (input: string) => (o: IOption) => boolean;
+export declare const CustomOption: (value: string | number, withGroup?: boolean, id?: string) => IOption;
+export {};

package/es/Select/utils.js

@@ -0,0 +1,193 @@
+var _excluded = ["value", "children"],
+    _excluded2 = ["options"];
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { concat, uniqueId } from 'lodash';
+var ZERO_INDEX = 0;
+var ungroupedOptionKeyPrefix = 'select_isungrouped_option_';
+var ungroupedOptionKey = uniqueId(ungroupedOptionKeyPrefix);
+var ungroupedOptionLabel = '未分组';
+export var customOptionKeyPrefix = 'select_custom_option_';
+export var customOptionKey = uniqueId(customOptionKeyPrefix); // ReactNode To Options
+
+export function convertNodeToOption(node, group) {
+  var _node$props = node.props,
+      value = _node$props.value,
+      children = _node$props.children,
+      restProps = _objectWithoutProperties(_node$props, _excluded);
+
+  var groupValue = group.groupValue,
+      groupLabel = group.groupLabel;
+
+  if (groupLabel && groupLabel) {
+    return _objectSpread({
+      value: value,
+      label: children !== undefined ? children : value,
+      groupValue: groupValue,
+      groupLabel: groupLabel
+    }, restProps);
+  }
+
+  return _objectSpread({
+    value: value,
+    label: children !== undefined ? children : value
+  }, restProps);
+}
+export var getFlattenOptions = function getFlattenOptions(data, hasGroup) {
+  var groupMap = new Map();
+
+  if (!hasGroup) {
+    return data;
+  }
+
+  data === null || data === void 0 ? void 0 : data.map(function (cur) {
+    var gValue = groupMap.get(cur.groupValue);
+
+    if (gValue) {
+      var options = gValue.options,
+          rest = _objectWithoutProperties(gValue, _excluded2);
+
+      return groupMap.set(cur.groupValue, _objectSpread({
+        options: [].concat(_toConsumableArray(options), [cur])
+      }, rest));
+    }
+
+    return groupMap.set(cur.groupValue, {
+      label: cur.groupLabel,
+      value: cur.groupValue,
+      isSelectOptGroup: true,
+      options: [cur]
+    });
+  });
+  var flattenOption = [];
+  groupMap.forEach(function (value) {
+    flattenOption.push(value); // @ts-ignore
+
+    flattenOption.push.apply(flattenOption, _toConsumableArray(value.options));
+  });
+  return flattenOption;
+};
+export function convertChildrenToData(nodes) {
+  var group = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var nodeOptions = [];
+  React.Children.forEach(nodes, function (node) {
+    if (! /*#__PURE__*/React.isValidElement(node)) {
+      return;
+    }
+
+    var isSelectOptGroup = node.type.isSelectOptGroup,
+        _node$props2 = node.props,
+        children = _node$props2.children,
+        label = _node$props2.label,
+        value = _node$props2.value; // 联合类型
+
+    if (!isSelectOptGroup) {
+      // option
+      nodeOptions.push(convertNodeToOption(node, group));
+    } else {
+      // Group
+      nodeOptions = concat(nodeOptions, convertChildrenToData(children, {
+        groupLabel: label,
+        groupValue: value
+      }));
+    }
+  });
+  return nodeOptions;
+} // optionsMap flattenOptions
+
+export function handleOptions(mergedOptions, setCacheOptions, updateGroup) {
+  var isGroup = !!mergedOptions.find(function (v) {
+    return Object.prototype.hasOwnProperty.call(v, 'groupValue');
+  });
+  var flattenOptions = [];
+  mergedOptions.forEach(function (option) {
+    var optionGroupLabel = option.groupLabel,
+        optionGroupValue = option.groupValue;
+
+    if (isGroup && !optionGroupValue && !optionGroupLabel) {
+      var ungroupedOption = _objectSpread(_objectSpread({}, option), {}, {
+        groupLabel: ungroupedOptionLabel,
+        groupValue: ungroupedOptionKey
+      });
+
+      flattenOptions.push(ungroupedOption);
+    } else {
+      flattenOptions.push(option);
+    }
+  });
+  updateGroup(isGroup);
+  setCacheOptions(flattenOptions);
+  return {
+    flattenOptions: flattenOptions,
+    isGroup: isGroup
+  };
+} // provide search matching hightlight;
+
+export var defaultLabelRenderer = function defaultLabelRenderer(input, prefix) {
+  return function (option, isGroup) {
+    var title = option.title,
+        label = option.label;
+
+    if (isGroup || typeof label !== 'string') {
+      return title || label;
+    }
+
+    var index = label.indexOf(input);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'inline-block',
+        lineHeight: '40px'
+      }
+    }, label.slice(ZERO_INDEX, index), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefix, "-search-highlight")
+    }, label.slice(index, index + input.length)), label.slice(index + input.length));
+  };
+};
+export var defaultOptionLabelRenderer = function defaultOptionLabelRenderer(value, option) {
+  return (option === null || option === void 0 ? void 0 : option.title) || (option === null || option === void 0 ? void 0 : option.label) || value;
+};
+export var defaultSearchPredicate = function defaultSearchPredicate(input) {
+  return function (o) {
+    return typeof o.label === 'string' ? o.label.includes(input) : true;
+  };
+};
+export var defaultMatchPredicate = function defaultMatchPredicate(input) {
+  return function (o) {
+    return o.label === input;
+  };
+};
+export var CustomOption = function CustomOption(value) {
+  var withGroup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var id = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : customOptionKeyPrefix;
+  return withGroup ? {
+    value: value,
+    label: value.toString(),
+    groupValue: id,
+    groupLabel: '自由输入'
+  } : {
+    value: value,
+    label: value.toString()
+  };
+};

package/es/Table/demo/basic/createData.d.ts

@@ -0,0 +1,10 @@
+export interface IData {
+    firstName: string;
+    lastName: string;
+    age: number;
+    visits: number;
+    progress: number;
+    status: string;
+}
+declare function makeData(length: number): IData[];
+export { makeData };

package/es/Table/demo/basic/createData.js

@@ -0,0 +1,18 @@
+function makeData(length) {
+  var data = [];
+
+  for (var i = 0; i < length; i++) {
+    data.push({
+      firstName: 'supermarket',
+      lastName: 'charity',
+      age: i + 1,
+      visits: Math.floor(Math.random() * 100),
+      progress: 41,
+      status: 'relationship'
+    });
+  }
+
+  return data;
+}
+
+export { makeData };

package/es/Table/demo/basic/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/Table/demo/basic/index.js

@@ -0,0 +1,64 @@
+import "antd/es/radio/style";
+import _Radio from "antd/es/radio";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React from 'react';
+import { Table } from '@aloudata/aloudata-design';
+import { makeData } from './createData';
+// import Table from '../../Example'
+var columns = [{
+  title: 'First Name',
+  dataIndex: 'firstName',
+  width: 150
+}, {
+  title: 'Last Name',
+  dataIndex: 'lastName'
+}, {
+  title: 'Age',
+  dataIndex: 'age'
+}, {
+  title: 'Visits',
+  dataIndex: 'visits'
+}, {
+  title: 'Status',
+  dataIndex: 'status'
+}, {
+  title: 'Profile Progress',
+  dataIndex: 'progress'
+}];
+export default (function () {
+  var _React$useState = React.useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      scrollY = _React$useState2[0],
+      setScrollY = _React$useState2[1];
+
+  var handleChange = function handleChange(e) {
+    setScrollY(e.target.value);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ald-table-demo"
+  }, /*#__PURE__*/React.createElement(_Radio.Group, {
+    value: scrollY,
+    onChange: handleChange
+  }, /*#__PURE__*/React.createElement(_Radio.Button, {
+    value: 0
+  }, "\u65E0\u6EDA\u52A8"), /*#__PURE__*/React.createElement(_Radio.Button, {
+    value: 200
+  }, "\u5185\u90E8\u6EDA\u52A8")), /*#__PURE__*/React.createElement(Table, {
+    columns: columns,
+    scrollY: scrollY,
+    data: makeData(10)
+  }));
+});

package/es/Table/demo/editCell/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/Table/demo/editCell/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Table } from '@aloudata/aloudata-design';
+import { makeData } from '../basic/createData'; // import Table from '../../Example'
+
+var columns = [{
+  title: 'First Name',
+  dataIndex: 'firstName',
+  width: 150
+}, {
+  title: 'Last Name',
+  dataIndex: 'lastName'
+}, {
+  title: 'Age',
+  dataIndex: 'age'
+}, {
+  title: 'Visits',
+  dataIndex: 'visits'
+}, {
+  title: 'Status',
+  dataIndex: 'status'
+}, {
+  title: 'Profile Progress',
+  dataIndex: 'progress',
+  render: function render(progress) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        color: 'red'
+      }
+    }, "\u8FDB\u5EA6\uFF1A", progress);
+  }
+}];
+export default (function () {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ald-table-demo"
+  }, /*#__PURE__*/React.createElement(Table, {
+    columns: columns,
+    data: makeData(10)
+  }));
+});

package/es/Table/demo/renderHeaderRight/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/Table/demo/renderHeaderRight/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Table, Input } from '@aloudata/aloudata-design';
+import { makeData } from '../basic/createData'; // import Table from '../../Example'
+
+var columns = [{
+  title: 'First Name',
+  dataIndex: 'firstName',
+  width: 150
+}, {
+  title: 'Last Name',
+  dataIndex: 'lastName'
+}, {
+  title: 'Age',
+  dataIndex: 'age'
+}, {
+  title: 'Visits',
+  dataIndex: 'visits'
+}, {
+  title: 'Status',
+  dataIndex: 'status'
+}, {
+  title: 'Profile Progress',
+  dataIndex: 'progress'
+}];
+export default (function () {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ald-table-demo"
+  }, /*#__PURE__*/React.createElement(Table, {
+    columns: columns,
+    data: makeData(10),
+    renderHeaderRight: function renderHeaderRight() {
+      return /*#__PURE__*/React.createElement(Input, {
+        placeholder: "\u8BF7\u8F93\u5165"
+      });
+    }
+  }));
+});

package/es/Table/demo/resizeColumn/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;