vue-devui 1.0.0-beta.1 → 1.0.0-beta.10

package/table/index.es.js

@@ -1,4 +1,23 @@
-import { computed, ref, watch, defineComponent, inject, createVNode, toRefs, getCurrentInstance, provide, createTextVNode, onBeforeMount, onMounted } from "vue";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { computed, ref, watch, defineComponent, inject, createVNode, mergeProps, toRef, provide, Teleport, Transition, renderSlot, isVNode, onMounted, onUnmounted, withDirectives, vShow, reactive, isRef, toRefs, Fragment, shallowRef, getCurrentInstance, createTextVNode, resolveDirective, onBeforeMount, h, onBeforeUnmount } from "vue";
 const TableProps = {
   data: {
     type: Array,
@@ -7,177 +26,1445 @@ const TableProps = {
   striped: {
     type: Boolean,
     default: false
+  },
+  scrollable: {
+    type: Boolean,
+    default: false
+  },
+  maxWidth: {
+    type: String
+  },
+  maxHeight: {
+    type: String
+  },
+  tableWidth: {
+    type: String
+  },
+  tableHeight: {
+    type: String
+  },
+  size: {
+    type: String,
+    validator(value) {
+      return value === "sm" || value === "md" || value === "lg";
+    }
+  },
+  rowHoveredHighlight: {
+    type: Boolean,
+    default: true
+  },
+  fixHeader: {
+    type: Boolean,
+    default: false
+  },
+  checkable: {
+    type: Boolean,
+    default: true
+  },
+  tableLayout: {
+    type: String,
+    default: "auto",
+    validator(v) {
+      return v === "fixed" || v === "auto";
+    }
+  },
+  showLoading: {
+    type: Boolean,
+    default: false
+  },
+  headerBg: {
+    type: Boolean,
+    default: false
   }
 };
+const TABLE_TOKEN = Symbol();
 function useTable(props) {
   const classes = computed(() => ({
     "devui-table": true,
-    "devui-table-striped": props.striped
+    "devui-table-striped": props.striped,
+    "header-bg": props.headerBg,
+    "table-layout-auto": props.tableLayout === "auto"
+  }));
+  const style = computed(() => ({
+    maxHeight: props.maxHeight,
+    maxWidth: props.maxWidth,
+    height: props.tableHeight,
+    width: props.tableWidth
   }));
-  return { classes };
+  return { classes, style };
 }
-function createStore(props) {
+const useFixedColumn = (column) => {
+  const stickyCell = computed(() => {
+    const col = column.value;
+    if (col.fixedLeft) {
+      return `devui-sticky-cell left`;
+    }
+    if (col.fixedRight) {
+      return `devui-sticky-cell right`;
+    }
+    return void 0;
+  });
+  const offsetStyle = computed(() => {
+    const col = column.value;
+    if (col.fixedLeft) {
+      return `left:${col.fixedLeft}`;
+    }
+    if (col.fixedRight) {
+      return `right:${col.fixedRight}`;
+    }
+    return void 0;
+  });
+  return {
+    stickyCell,
+    offsetStyle
+  };
+};
+function createStore(dataSource) {
   const _data = ref([]);
+  watch(dataSource, (value) => {
+    _data.value = [...value];
+  }, { deep: true, immediate: true });
+  const { _columns, insertColumn, removeColumn, sortColumn } = createColumnGenerator();
+  const { _checkAll, _checkList, _halfChecked, getCheckedRows } = createSelection(dataSource, _data);
+  const { sortData } = createSorter(dataSource, _data);
+  const { filterData, resetFilterData } = createFilter(dataSource, _data);
+  const { isFixedLeft } = createFixedLogic(_columns);
+  return {
+    states: {
+      _data,
+      _columns,
+      _checkList,
+      _checkAll,
+      _halfChecked,
+      isFixedLeft
+    },
+    insertColumn,
+    sortColumn,
+    removeColumn,
+    getCheckedRows,
+    sortData,
+    filterData,
+    resetFilterData
+  };
+}
+const createColumnGenerator = () => {
   const _columns = ref([]);
-  updateData();
-  watch(() => props.data, updateData, { deep: true });
-  function updateData() {
-    _data.value = [];
-    props.data.forEach((item) => {
-      _data.value.push(item);
-    });
-  }
   const insertColumn = (column) => {
     _columns.value.push(column);
+    _columns.value.sort((a, b) => a.order > b.order ? 1 : -1);
+  };
+  const sortColumn = () => {
+    _columns.value.sort((a, b) => a.order > b.order ? 1 : -1);
+  };
+  const removeColumn = (column) => {
+    const i = _columns.value.findIndex((v) => v === column);
+    if (i === -1) {
+      return;
+    }
+    _columns.value.splice(i, 1);
+  };
+  return { _columns, insertColumn, removeColumn, sortColumn };
+};
+const createSelection = (dataSource, _data) => {
+  const _checkList = ref([]);
+  const _checkAllRecord = ref(false);
+  const _checkAll = computed({
+    get: () => _checkAllRecord.value,
+    set: (val) => {
+      _checkAllRecord.value = val;
+      for (let i = 0; i < _checkList.value.length; i++) {
+        _checkList.value[i] = val;
+      }
+    }
+  });
+  const _halfChecked = ref(false);
+  watch(dataSource, (value) => {
+    _checkList.value = new Array(value.length).fill(false);
+  }, { deep: true, immediate: true });
+  watch(_checkList, (list) => {
+    if (list.length === 0) {
+      return;
+    }
+    let allTrue = true;
+    let allFalse = true;
+    for (let i = 0; i < list.length; i++) {
+      allTrue && (allTrue = list[i]);
+      allFalse && (allFalse = !list[i]);
+    }
+    _checkAllRecord.value = allTrue;
+    _halfChecked.value = !(allFalse || allTrue);
+  }, { immediate: true, deep: true });
+  const getCheckedRows = () => {
+    return _data.value.filter((_, index2) => _checkList.value[index2]);
   };
   return {
-    insertColumn,
-    states: {
-      _data,
-      _columns
+    _checkList,
+    _checkAll,
+    _halfChecked,
+    getCheckedRows
+  };
+};
+const createSorter = (dataSource, _data) => {
+  const sortData = (field, direction, compareFn = (field2, a, b) => a[field2] > b[field2]) => {
+    if (direction === "ASC") {
+      _data.value = _data.value.sort((a, b) => compareFn(field, a, b) ? 1 : -1);
+    } else if (direction === "DESC") {
+      _data.value = _data.value.sort((a, b) => !compareFn(field, a, b) ? 1 : -1);
+    } else {
+      _data.value = [...dataSource.value];
     }
   };
-}
+  return { sortData };
+};
+const createFilter = (dataSource, _data) => {
+  const fieldSet = new Set();
+  const filterData = (field, results) => {
+    fieldSet.add(field);
+    const fields = [...fieldSet];
+    _data.value = dataSource.value.filter((item) => {
+      return fields.reduce((prev, field2) => {
+        return prev && results.indexOf(item[field2]) !== -1;
+      }, true);
+    });
+  };
+  const resetFilterData = () => {
+    fieldSet.clear();
+    _data.value = [...dataSource.value];
+  };
+  return { filterData, resetFilterData };
+};
+const createFixedLogic = (columns) => {
+  const isFixedLeft = computed(() => {
+    return columns.value.reduce((prev, current) => prev || !!current.fixedLeft, false);
+  });
+  return { isFixedLeft };
+};
 var ColGroup = defineComponent({
   name: "DColGroup",
   setup() {
-    const parent = inject("table");
+    const parent = inject(TABLE_TOKEN);
     const columns = parent.store.states._columns;
-    return {
-      columns
-    };
-  },
-  render() {
-    const {
-      columns
-    } = this;
-    return createVNode("colgroup", null, [columns.map((column, index2) => {
+    return () => parent.props.tableLayout === "fixed" ? createVNode("colgroup", null, [parent.props.checkable ? createVNode("col", {
+      "width": 36
+    }, null) : null, columns.value.map((column, index2) => {
       return createVNode("col", {
         "key": index2,
         "width": column.realWidth
       }, null);
-    })]);
+    })]) : null;
   }
 });
-const TableHeaderProps = {
-  store: {
-    type: Object,
-    default: {}
+var checkbox = "";
+const commonProps = {
+  name: {
+    type: String,
+    default: void 0
+  },
+  halfchecked: {
+    type: Boolean,
+    default: false
+  },
+  isShowTitle: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String
+  },
+  color: {
+    type: String,
+    default: void 0
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  beforeChange: {
+    type: Function,
+    default: void 0
   }
 };
-var header = "";
-var TableHeader = defineComponent({
-  name: "DTableHeader",
-  props: TableHeaderProps,
-  setup(props) {
+const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
+  halfchecked: {
+    type: Boolean,
+    default: false
+  },
+  checked: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: String
+  },
+  label: {
+    type: String,
+    default: void 0
+  },
+  title: {
+    type: String,
+    default: void 0
+  },
+  "onUpdate:checked": {
+    type: Function,
+    default: void 0
+  },
+  onChange: {
+    type: Function,
+    default: void 0
+  },
+  modelValue: {
+    type: Boolean
+  },
+  "onUpdate:modelValue": {
+    type: Function
+  }
+});
+const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
+  modelValue: {
+    type: Array,
+    required: true
+  },
+  direction: {
+    type: String,
+    default: "column"
+  },
+  itemWidth: {
+    type: Number,
+    default: void 0
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  onChange: {
+    type: Function,
+    default: void 0
+  },
+  "onUpdate:modelValue": {
+    type: Function,
+    default: void 0
+  }
+});
+const checkboxGroupInjectionKey = Symbol("d-checkbox-group");
+var Checkbox = defineComponent({
+  name: "DCheckbox",
+  props: checkboxProps,
+  emits: ["change", "update:checked", "update:modelValue"],
+  setup(props, ctx) {
+    const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
+    const isChecked = computed(() => props.checked || props.modelValue);
+    const mergedDisabled = computed(() => {
+      return (checkboxGroupConf == null ? void 0 : checkboxGroupConf.disabled.value) || props.disabled;
+    });
+    const mergedChecked = computed(() => {
+      var _a, _b;
+      return (_b = (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isItemChecked) == null ? void 0 : _a.call(checkboxGroupConf, props.value)) != null ? _b : isChecked.value;
+    });
+    const mergedIsShowTitle = computed(() => {
+      var _a;
+      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isShowTitle.value) != null ? _a : props.isShowTitle;
+    });
+    const mergedShowAnimation = computed(() => {
+      var _a;
+      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.showAnimation.value) != null ? _a : props.showAnimation;
+    });
+    const mergedColor = computed(() => {
+      var _a;
+      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.color.value) != null ? _a : props.color;
+    });
+    const itemWidth = checkboxGroupConf == null ? void 0 : checkboxGroupConf.itemWidth.value;
+    const direction = checkboxGroupConf == null ? void 0 : checkboxGroupConf.direction.value;
+    const canChange = (isChecked2, val) => {
+      var _a;
+      if (mergedDisabled.value) {
+        return Promise.resolve(false);
+      }
+      const beforeChange = (_a = props.beforeChange) != null ? _a : checkboxGroupConf == null ? void 0 : checkboxGroupConf.beforeChange;
+      if (beforeChange) {
+        const res = beforeChange(isChecked2, val);
+        if (typeof res === "boolean") {
+          return Promise.resolve(res);
+        }
+        return res;
+      }
+      return Promise.resolve(true);
+    };
+    const toggle = () => {
+      const current = !isChecked.value;
+      checkboxGroupConf == null ? void 0 : checkboxGroupConf.toggleGroupVal(props.value);
+      ctx.emit("update:checked", current);
+      ctx.emit("update:modelValue", current);
+      ctx.emit("change", current);
+    };
+    const handleClick = () => {
+      canChange(!isChecked.value, props.label).then((res) => res && toggle());
+    };
+    return {
+      itemWidth,
+      direction,
+      mergedColor,
+      mergedDisabled,
+      mergedIsShowTitle,
+      mergedChecked,
+      mergedShowAnimation,
+      handleClick
+    };
+  },
+  render() {
+    var _a;
     const {
-      store
-    } = toRefs(props);
-    const columns = store.value.states._columns.value;
+      itemWidth,
+      direction,
+      mergedChecked,
+      mergedDisabled,
+      mergedIsShowTitle,
+      mergedShowAnimation,
+      halfchecked,
+      title,
+      label,
+      handleClick,
+      name,
+      value,
+      mergedColor,
+      $slots
+    } = this;
+    const wrapperCls = {
+      "devui-checkbox-column-margin": direction === "column",
+      "devui-checkbox-wrap": typeof itemWidth !== "undefined"
+    };
+    const wrapperStyle = itemWidth ? [`width: ${itemWidth}px`] : [];
+    const checkboxCls = {
+      "devui-checkbox": true,
+      active: mergedChecked,
+      halfchecked,
+      disabled: mergedDisabled,
+      unchecked: !mergedChecked
+    };
+    const labelTitle = mergedIsShowTitle ? title || label : "";
+    const bgImgStyle = mergedColor && halfchecked || mergedColor ? `linear-gradient(${mergedColor}, ${mergedColor})` : "";
+    const spanStyle = [`border-color:${(mergedChecked || halfchecked) && mergedColor ? mergedColor : ""}`, `background-image:${bgImgStyle}`, `background-color:${mergedColor && halfchecked ? mergedColor : ""}`];
+    const spanCls = {
+      "devui-checkbox-material": true,
+      "custom-color": mergedColor,
+      "devui-checkbox-no-label": !label && !$slots.default,
+      "devui-no-animation": !mergedShowAnimation,
+      "devui-checkbox-default-background": !halfchecked
+    };
+    const polygonCls = {
+      "devui-tick": true,
+      "devui-no-animation": !mergedShowAnimation
+    };
+    const stopPropagation = ($event) => $event.stopPropagation();
+    const inputProps = {
+      indeterminate: halfchecked
+    };
+    return createVNode("div", {
+      "class": wrapperCls,
+      "style": wrapperStyle
+    }, [createVNode("div", {
+      "class": checkboxCls
+    }, [createVNode("label", {
+      "title": labelTitle,
+      "onClick": handleClick
+    }, [createVNode("input", mergeProps({
+      "name": name || value,
+      "class": "devui-checkbox-input",
+      "type": "checkbox"
+    }, inputProps, {
+      "checked": mergedChecked,
+      "disabled": mergedDisabled,
+      "onClick": stopPropagation,
+      "onChange": stopPropagation
+    }), null), createVNode("span", {
+      "style": spanStyle,
+      "class": spanCls
+    }, [createVNode("span", {
+      "class": "devui-checkbox-halfchecked-bg"
+    }, null), createVNode("svg", {
+      "viewBox": "0 0 16 16",
+      "version": "1.1",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "class": "devui-checkbox-tick"
+    }, [createVNode("g", {
+      "stroke": "none",
+      "stroke-width": "1",
+      "fill": "none",
+      "fill-rule": "evenodd"
+    }, [createVNode("polygon", {
+      "fill-rule": "nonzero",
+      "points": "5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043",
+      "class": polygonCls
+    }, null)])])]), label || ((_a = $slots.default) == null ? void 0 : _a.call($slots))])])]);
+  }
+});
+var checkboxGroup = "";
+var CheckboxGroup = defineComponent({
+  name: "DCheckboxGroup",
+  props: checkboxGroupProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, ctx) {
+    const valList = toRef(props, "modelValue");
+    const defaultOpt = {
+      checked: false,
+      isShowTitle: true,
+      halfchecked: false,
+      showAnimation: true,
+      disabled: false
+    };
+    const toggleGroupVal = (val) => {
+      let index2 = -1;
+      if (typeof valList.value[0] === "string") {
+        index2 = valList.value.findIndex((item) => item === val);
+      } else if (typeof valList.value[0] === "object") {
+        index2 = valList.value.findIndex((item) => item.value === val);
+      }
+      if (index2 === -1) {
+        if (typeof props.options[0] === "object") {
+          const newOne = props.options.find((item) => item.value === val);
+          const res2 = [...valList.value, newOne];
+          ctx.emit("update:modelValue", res2);
+          ctx.emit("change", res2);
+          return;
+        }
+        const res = [...valList.value, val];
+        ctx.emit("update:modelValue", res);
+        ctx.emit("change", res);
+        return;
+      }
+      valList.value.splice(index2, 1);
+      ctx.emit("update:modelValue", valList.value);
+      ctx.emit("change", valList.value);
+    };
+    const isItemChecked = (itemVal) => {
+      if (typeof valList.value[0] === "string") {
+        return valList.value.includes(itemVal);
+      } else if (typeof valList.value[0] === "object") {
+        return valList.value.some((item) => item.value === itemVal);
+      }
+    };
+    provide(checkboxGroupInjectionKey, {
+      disabled: toRef(props, "disabled"),
+      isShowTitle: toRef(props, "isShowTitle"),
+      color: toRef(props, "color"),
+      showAnimation: toRef(props, "showAnimation"),
+      beforeChange: props.beforeChange,
+      isItemChecked,
+      toggleGroupVal,
+      itemWidth: toRef(props, "itemWidth"),
+      direction: toRef(props, "direction")
+    });
     return {
-      columns
+      defaultOpt
     };
   },
   render() {
+    var _a;
     const {
-      columns
+      direction,
+      $slots,
+      defaultOpt,
+      options
     } = this;
-    return createVNode("thead", {
-      "class": "devui-thead"
-    }, [createVNode("tr", null, [columns.map((column, index2) => {
-      return createVNode("th", {
-        "key": index2
-      }, [column.renderHeader()]);
-    })])]);
+    let children = (_a = $slots.default) == null ? void 0 : _a.call($slots);
+    if ((options == null ? void 0 : options.length) > 0) {
+      children = options.map((opt) => {
+        let mergedOpt = null;
+        if (typeof opt === "string") {
+          mergedOpt = Object.assign({}, defaultOpt, {
+            label: opt,
+            value: opt
+          });
+        } else if (typeof opt === "object") {
+          mergedOpt = Object.assign({}, defaultOpt, __spreadProps(__spreadValues({}, opt), {
+            label: opt.name
+          }));
+        }
+        return createVNode(Checkbox, mergedOpt, null);
+      });
+    }
+    return createVNode("div", {
+      "class": "devui-checkbox-group"
+    }, [createVNode("div", {
+      "class": {
+        "devui-checkbox-list-inline": direction === "row"
+      }
+    }, [children])]);
   }
 });
-const TableBodyProps = {
-  store: {
-    type: Object,
-    default: {}
+Checkbox.install = function(app) {
+  app.component(Checkbox.name, Checkbox);
+};
+CheckboxGroup.install = function(app) {
+  app.component(CheckboxGroup.name, CheckboxGroup);
+};
+var sort = "";
+const Sort = defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    "onUpdate:modelValue": {
+      type: Function
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, ctx) {
+    const changeDirection = () => {
+      let direction = "";
+      if (props.modelValue === "ASC") {
+        direction = "DESC";
+      } else if (props.modelValue === "DESC") {
+        direction = "";
+      } else {
+        direction = "ASC";
+      }
+      ctx.emit("update:modelValue", direction);
+    };
+    return () => createVNode("span", {
+      "onClick": changeDirection,
+      "class": "sort-clickable"
+    }, [createVNode("i", {
+      "class": ["datatable-svg", {
+        "sort-icon-default": !props.modelValue,
+        "sort-icon-asc": props.modelValue === "ASC",
+        "sort-icon-desc": props.modelValue === "DESC"
+      }]
+    }, [createVNode("svg", {
+      "width": "16px",
+      "height": "16px",
+      "viewBox": "0 0 16 16",
+      "version": "1.1",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "xmlns:xlink": "http://www.w3.org/1999/xlink"
+    }, [createVNode("defs", null, [createVNode("circle", {
+      "id": "sort-svg-path-1",
+      "cx": "8",
+      "cy": "8",
+      "r": "8"
+    }, null), createVNode("filter", {
+      "x": "-34.4%",
+      "y": "-21.9%",
+      "width": "168.8%",
+      "height": "168.8%",
+      "filterUnits": "objectBoundingBox",
+      "id": "filter-2"
+    }, [createVNode("feOffset", {
+      "dx": "0",
+      "dy": "2",
+      "in": "SourceAlpha",
+      "result": "shadowOffsetOuter1"
+    }, null), createVNode("feGaussianBlur", {
+      "stdDeviation": "1.5",
+      "in": "shadowOffsetOuter1",
+      "result": "shadowBlurOuter1"
+    }, null), createVNode("feColorMatrix", {
+      "values": "0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.085309222 0",
+      "type": "matrix",
+      "in": "shadowBlurOuter1"
+    }, null)])]), createVNode("g", {
+      "stroke": "none",
+      "stroke-width": "1",
+      "fill": "none",
+      "fill-rule": "evenodd"
+    }, [createVNode("use", {
+      "fill-rule": "evenodd",
+      "xlink:href": "#sort-svg-path-1"
+    }, null), createVNode("polygon", {
+      "points": "8 4 11 7 5 7"
+    }, null), createVNode("polygon", {
+      "points": "8 12 5 9 11 9"
+    }, null)])])])]);
+  }
+});
+const dropdownProps = {
+  origin: {
+    type: Object
+  },
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  trigger: {
+    type: String,
+    default: "click"
+  },
+  closeScope: {
+    type: String,
+    default: "all"
+  },
+  closeOnMouseLeaveMenu: {
+    type: Boolean,
+    default: false
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  }
+};
+function isComponent(target) {
+  return !!(target == null ? void 0 : target.$el);
+}
+function getElement(element) {
+  if (element instanceof Element) {
+    return element;
+  }
+  if (element && typeof element === "object" && element.$el instanceof Element) {
+    return element.$el;
+  }
+  return null;
+}
+function subscribeEvent(dom, type, callback) {
+  dom == null ? void 0 : dom.addEventListener(type, callback);
+  return () => {
+    dom == null ? void 0 : dom.removeEventListener(type, callback);
+  };
+}
+const useDropdown = ({
+  visible,
+  trigger,
+  origin,
+  closeScope,
+  closeOnMouseLeaveMenu
+}) => {
+  const dropdownElRef = ref();
+  const closeByScope = () => {
+    if (closeScope.value === "none") {
+      return;
+    }
+    visible.value = false;
+  };
+  watch([trigger, origin, dropdownElRef], ([trigger2, origin2, dropdownEl], ov, onInvalidate) => {
+    const originEl = getElement(origin2);
+    if (!originEl || !dropdownEl) {
+      return;
+    }
+    const subscriptions = [
+      subscribeEvent(dropdownEl, "click", () => {
+        if (closeScope.value === "all") {
+          visible.value = false;
+        }
+      })
+    ];
+    if (trigger2 === "click") {
+      subscriptions.push(subscribeEvent(originEl, "click", () => visible.value = !visible.value), subscribeEvent(document, "click", (e) => {
+        if (!visible.value) {
+          return;
+        }
+        const target = e.target;
+        const isContain = originEl.contains(target) || dropdownEl.contains(target);
+        if (isContain) {
+          return;
+        }
+        closeByScope();
+      }), subscribeEvent(dropdownEl, "mouseleave", () => {
+        if (closeOnMouseLeaveMenu.value) {
+          visible.value = false;
+        }
+      }));
+    } else if (trigger2 === "hover") {
+      let overlayEnter = false;
+      let originEnter = false;
+      const handleLeave = async (elementType) => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        if (elementType === "origin" && overlayEnter || elementType === "dropdown" && originEnter) {
+          return;
+        }
+        closeByScope();
+      };
+      subscriptions.push(subscribeEvent(originEl, "mouseenter", () => {
+        originEnter = true;
+        visible.value = true;
+      }), subscribeEvent(originEl, "mouseleave", () => {
+        originEnter = false;
+        if (!closeOnMouseLeaveMenu.value) {
+          handleLeave("origin");
+        }
+      }), subscribeEvent(dropdownEl, "mouseenter", () => {
+        overlayEnter = true;
+        visible.value = true;
+      }), subscribeEvent(dropdownEl, "mouseleave", () => {
+        overlayEnter = false;
+        handleLeave("dropdown");
+      }));
+    }
+    onInvalidate(() => subscriptions.forEach((v) => v()));
+  });
+  return { dropdownEl: dropdownElRef };
+};
+var overlay = "";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const CommonOverlay = defineComponent({
+  setup(props, ctx) {
+    return () => {
+      let _slot;
+      return createVNode(Teleport, {
+        "to": "#d-overlay-anchor"
+      }, {
+        default: () => [createVNode(Transition, {
+          "name": "devui-overlay-fade"
+        }, _isSlot(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
+          default: () => [_slot]
+        })]
+      });
+    };
+  }
+});
+const overlayProps = {
+  visible: {
+    type: Boolean
+  },
+  backgroundBlock: {
+    type: Boolean,
+    default: false
+  },
+  backgroundClass: {
+    type: String,
+    default: ""
+  },
+  backgroundStyle: {
+    type: [String, Object]
+  },
+  onBackdropClick: {
+    type: Function
+  },
+  backdropClose: {
+    type: Boolean,
+    default: true
+  },
+  hasBackdrop: {
+    type: Boolean,
+    default: true
   }
 };
-function useTableBody(props) {
-  const storeData = props.store.states;
-  const rowColumns = computed(() => {
-    return storeData._data.value.map((row) => {
-      const obj = Object.assign({}, row);
-      obj.columns = storeData._columns.value;
-      return obj;
+const overlayEmits = ["update:visible", "backdropClick"];
+const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
+  overlayStyle: {
+    type: [String, Object],
+    default: void 0
+  }
+});
+const flexibleOverlayProps = __spreadValues({
+  origin: {
+    type: Object,
+    require: true
+  },
+  position: {
+    type: Object,
+    default: () => ({
+      originX: "left",
+      originY: "top",
+      overlayX: "left",
+      overlayY: "top"
+    })
+  }
+}, overlayProps);
+function useOverlayLogic(props, ctx) {
+  const backgroundClass = computed(() => {
+    return [
+      "devui-overlay-background",
+      props.backgroundClass,
+      !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
+    ];
+  });
+  const overlayClass = computed(() => {
+    return "devui-overlay";
+  });
+  const handleBackdropClick = (event) => {
+    var _a;
+    event.preventDefault();
+    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
+    if (props.backdropClose) {
+      ctx.emit("update:visible", false);
+    }
+  };
+  const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
+  onMounted(() => {
+    const body2 = document.body;
+    const originOverflow = body2.style.overflow;
+    const originPosition = body2.style.position;
+    watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
+      if (backgroundBlock) {
+        const top = body2.getBoundingClientRect().y;
+        if (visible) {
+          body2.style.overflowY = "scroll";
+          body2.style.position = visible ? "fixed" : "";
+          body2.style.top = `${top}px`;
+        } else {
+          body2.style.overflowY = originOverflow;
+          body2.style.position = originPosition;
+          body2.style.top = "";
+          window.scrollTo(0, -top);
+        }
+      }
+    });
+    onUnmounted(() => {
+      document.body.style.overflow = originOverflow;
     });
   });
-  return { rowColumns };
+  return {
+    backgroundClass,
+    overlayClass,
+    handleBackdropClick,
+    handleOverlayBubbleCancel
+  };
 }
-var body = "";
-var TableBody = defineComponent({
-  name: "DTableBody",
-  props: TableBodyProps,
+const FixedOverlay = defineComponent({
+  name: "DFixedOverlay",
+  props: fixedOverlayProps,
+  emits: overlayEmits,
+  setup(props, ctx) {
+    const {
+      backgroundClass,
+      overlayClass,
+      handleBackdropClick,
+      handleOverlayBubbleCancel
+    } = useOverlayLogic(props, ctx);
+    return () => createVNode(CommonOverlay, null, {
+      default: () => [withDirectives(createVNode("div", {
+        "class": backgroundClass.value,
+        "style": props.backgroundStyle,
+        "onClick": handleBackdropClick
+      }, [createVNode("div", {
+        "class": overlayClass.value,
+        "style": props.overlayStyle,
+        "onClick": handleOverlayBubbleCancel
+      }, [renderSlot(ctx.slots, "default")])]), [[vShow, props.visible]])]
+    });
+  }
+});
+const FlexibleOverlay = defineComponent({
+  name: "DFlexibleOverlay",
+  props: flexibleOverlayProps,
+  emits: overlayEmits,
+  setup(props, ctx) {
+    const overlayRef = ref(null);
+    const positionedStyle = reactive({
+      position: "absolute"
+    });
+    onMounted(async () => {
+      const handleRectChange = (position, rect, origin) => {
+        const point = calculatePosition(position, rect, origin);
+        positionedStyle.left = `${point.x}px`;
+        positionedStyle.top = `${point.y}px`;
+      };
+      const locationElements = computed(() => {
+        const overlay2 = overlayRef.value;
+        const origin = getOrigin(props.origin);
+        if (!overlay2 || !origin) {
+          return;
+        }
+        return {
+          origin,
+          overlay: overlay2
+        };
+      });
+      const visibleRef = toRef(props, "visible");
+      const positionRef = toRef(props, "position");
+      watch([locationElements, visibleRef, positionRef], async ([locationElements2, visible, position], ov, onInvalidate) => {
+        if (!visible || !locationElements2) {
+          return;
+        }
+        const {
+          origin,
+          overlay: overlay2
+        } = locationElements2;
+        handleRectChange(position, overlay2.getBoundingClientRect(), origin);
+        const unsubscriptions = [subscribeLayoutEvent(() => handleRectChange(position, overlay2.getBoundingClientRect(), origin)), subscribeOverlayResize(overlay2, (entries) => handleRectChange(position, entries[0].contentRect, origin)), subscribeOriginResize(origin, () => handleRectChange(position, overlay2.getBoundingClientRect(), origin))];
+        onInvalidate(() => {
+          unsubscriptions.forEach((fn) => fn());
+        });
+      });
+    });
+    const {
+      backgroundClass,
+      overlayClass,
+      handleBackdropClick,
+      handleOverlayBubbleCancel
+    } = useOverlayLogic(props);
+    return () => createVNode(CommonOverlay, null, {
+      default: () => [withDirectives(createVNode("div", {
+        "style": props.backgroundStyle,
+        "class": backgroundClass.value,
+        "onClick": handleBackdropClick
+      }, [createVNode("div", {
+        "ref": overlayRef,
+        "class": overlayClass.value,
+        "style": positionedStyle,
+        "onClick": handleOverlayBubbleCancel
+      }, [renderSlot(ctx.slots, "default")])]), [[vShow, props.visible]])]
+    });
+  }
+});
+function getOrigin(origin) {
+  if (origin instanceof Element) {
+    return origin;
+  }
+  if (isRef(origin)) {
+    return getElement(origin.value);
+  }
+  if (isComponent(origin)) {
+    return getElement(origin);
+  }
+  return origin;
+}
+function calculatePosition(position, rect, origin) {
+  const originRect = getOriginRect(origin);
+  const originPoint = getOriginRelativePoint(originRect, position);
+  return getOverlayPoint(originPoint, rect, position);
+}
+function getOriginRect(origin) {
+  if (origin instanceof Element) {
+    return origin.getBoundingClientRect();
+  }
+  const width = origin.width || 0;
+  const height = origin.height || 0;
+  return {
+    top: origin.y,
+    bottom: origin.y + height,
+    left: origin.x,
+    right: origin.x + width,
+    height,
+    width
+  };
+}
+function getOverlayPoint(originPoint, rect, position) {
+  let x;
+  const {
+    width,
+    height
+  } = rect;
+  if (position.overlayX == "center") {
+    x = originPoint.x - width / 2;
+  } else {
+    x = position.overlayX == "left" ? originPoint.x : originPoint.x - width;
+  }
+  let y;
+  if (position.overlayY == "center") {
+    y = originPoint.y - height / 2;
+  } else {
+    y = position.overlayY == "top" ? originPoint.y : originPoint.y - height;
+  }
+  return {
+    x,
+    y
+  };
+}
+function getOriginRelativePoint(originRect, position) {
+  let x;
+  if (position.originX == "center") {
+    x = originRect.left + originRect.width / 2;
+  } else {
+    const startX = originRect.left;
+    const endX = originRect.right;
+    x = position.originX == "left" ? startX : endX;
+  }
+  let y;
+  if (position.originY == "center") {
+    y = originRect.top + originRect.height / 2;
+  } else {
+    y = position.originY == "top" ? originRect.top : originRect.bottom;
+  }
+  return {
+    x,
+    y
+  };
+}
+function subscribeLayoutEvent(event) {
+  window.addEventListener("scroll", event, true);
+  window.addEventListener("resize", event);
+  window.addEventListener("orientationchange", event);
+  return () => {
+    window.removeEventListener("scroll", event, true);
+    window.removeEventListener("resize", event);
+    window.removeEventListener("orientationchange", event);
+  };
+}
+function subscribeOverlayResize(overlay2, callback) {
+  if (overlay2 instanceof Element) {
+    const resizeObserver = new ResizeObserver(callback);
+    resizeObserver.observe(overlay2);
+    return () => resizeObserver.disconnect();
+  }
+  return () => {
+  };
+}
+function subscribeOriginResize(origin, callback) {
+  if (origin instanceof Element) {
+    const observer = new MutationObserver(callback);
+    observer.observe(origin, {
+      attributeFilter: ["style"]
+    });
+    return () => observer.disconnect();
+  }
+  return () => {
+  };
+}
+FlexibleOverlay.install = function(app) {
+  app.component(FlexibleOverlay.name, FlexibleOverlay);
+};
+FixedOverlay.install = function(app) {
+  app.component(FixedOverlay.name, FixedOverlay);
+};
+var dropdown = "";
+var Dropdown = defineComponent({
+  name: "DDropdown",
+  props: dropdownProps,
+  emits: [],
+  setup(props, ctx) {
+    const {
+      isOpen,
+      origin,
+      trigger,
+      closeScope,
+      closeOnMouseLeaveMenu
+    } = toRefs(props);
+    const visible = ref(false);
+    watch(isOpen, (value) => {
+      visible.value = value;
+    }, {
+      immediate: true
+    });
+    const position = {
+      originX: "center",
+      originY: "bottom",
+      overlayX: "center",
+      overlayY: "top"
+    };
+    const {
+      dropdownEl
+    } = useDropdown({
+      visible,
+      origin,
+      trigger,
+      closeScope,
+      closeOnMouseLeaveMenu
+    });
+    const animatedVisible = computed(() => {
+      return props.showAnimation ? visible.value : true;
+    });
+    return () => {
+      return createVNode(Fragment, null, [createVNode(FlexibleOverlay, {
+        "origin": props.origin,
+        "visible": visible.value,
+        "onUpdate:visible": ($event) => visible.value = $event,
+        "position": position,
+        "hasBackdrop": false
+      }, {
+        default: () => [createVNode(Transition, {
+          "name": "devui-dropdown-fade"
+        }, {
+          default: () => {
+            var _a, _b;
+            return [withDirectives(createVNode("div", {
+              "ref": dropdownEl,
+              "style": "min-width:102px"
+            }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), [[vShow, animatedVisible.value]])];
+          }
+        })]
+      })]);
+    };
+  }
+});
+Dropdown.install = function(app) {
+  app.component(Dropdown.name, Dropdown);
+};
+var filter = "";
+const Filter = defineComponent({
+  props: {
+    modelValue: {
+      type: Array,
+      default: []
+    },
+    "onUpdate:modelValue": {
+      type: Function
+    },
+    customTemplate: {
+      type: Function
+    },
+    filterList: {
+      type: Array,
+      required: true
+    },
+    filterMultiple: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
   setup(props) {
+    const filterOrigin = ref(null);
+    const onUpdateChecked = (config, value) => {
+      const checkedList = props.modelValue;
+      const update = props["onUpdate:modelValue"];
+      const contained = !!checkedList.find((item) => item === config.value);
+      if (value && !contained) {
+        update == null ? void 0 : update([...checkedList, config.value]);
+      } else if (!value && contained) {
+        update == null ? void 0 : update(checkedList.filter((item) => config.value !== item));
+      }
+    };
+    const updateSingleChecked = (config) => {
+      var _a;
+      (_a = props["onUpdate:modelValue"]) == null ? void 0 : _a.call(props, [config.value]);
+    };
+    const dropdownContent = computed(() => {
+      const checkedList = props.modelValue;
+      const isContained = (config) => !!checkedList.find((item) => item === config.value);
+      return () => createVNode("ul", {
+        "class": "devui-dropdown-menu data-table-column-filter-content",
+        "style": "padding:10px"
+      }, [props.filterList.map((item, index2) => {
+        return createVNode("li", {
+          "style": index2 > 0 ? "margin-top:10px" : ""
+        }, [props.filterMultiple ? createVNode(Checkbox, {
+          "modelValue": isContained(item),
+          "onUpdate:modelValue": (value) => onUpdateChecked(item, value)
+        }, {
+          default: () => [item.name]
+        }) : createVNode("span", {
+          "onClick": () => updateSingleChecked(item)
+        }, [item.name])]);
+      })]);
+    });
+    return () => createVNode(Fragment, null, [createVNode("span", {
+      "ref": filterOrigin
+    }, [createVNode("i", {
+      "class": ["filter-icon", {
+        "filter-icon-active": true
+      }]
+    }, [createVNode("svg", {
+      "width": "16px",
+      "height": "16px",
+      "viewBox": "0 0 16 16",
+      "version": "1.1",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "xmlns:xlink": "http://www.w3.org/1999/xlink"
+    }, [createVNode("g", {
+      "stroke": "none",
+      "stroke-width": "1",
+      "fill": "none",
+      "fill-rule": "evenodd"
+    }, [createVNode("g", null, [createVNode("polygon", {
+      "points": "10.0085775 7 10.0085775 15 6 13 6 7 2 3 2 1 14 1 14 3"
+    }, null)])])])])]), createVNode(Dropdown, {
+      "origin": filterOrigin.value,
+      "closeScope": "blank"
+    }, {
+      default: () => {
+        var _a, _b;
+        return [(_b = (_a = props.customTemplate) == null ? void 0 : _a.call(props, {
+          value: props.modelValue,
+          onChange: props["onUpdate:modelValue"]
+        })) != null ? _b : dropdownContent.value()];
+      }
+    })]);
+  }
+});
+var header = "";
+var body = "";
+const useSort = (store, column) => {
+  const directionRef = ref("DESC");
+  watch([directionRef, column], ([direction, column2]) => {
+    if (column2.sortable) {
+      store.sortData(column2.field, direction, column2.compareFn);
+    }
+  }, { immediate: true });
+  return directionRef;
+};
+const useFliter = (store, column) => {
+  const filteredRef = shallowRef();
+  watch(filteredRef, (results) => {
+    store.filterData(column.value.field, results);
+  });
+  return filteredRef;
+};
+var TableHeader = defineComponent({
+  name: "DTableHeader",
+  setup() {
+    const table2 = inject(TABLE_TOKEN);
     const {
-      rowColumns
-    } = useTableBody(props);
-    return {
-      rowColumns
+      _checkAll: checkAll,
+      _halfChecked: halfChecked,
+      _columns: columns,
+      isFixedLeft
+    } = table2.store.states;
+    const thAttrs = computed(() => isFixedLeft.value ? {
+      class: "devui-sticky-cell left",
+      style: "left:0;"
+    } : null);
+    const checkbox2 = computed(() => table2.props.checkable ? createVNode("th", thAttrs.value, [createVNode(Checkbox, {
+      "style": "padding:10px;",
+      "modelValue": checkAll.value,
+      "onUpdate:modelValue": ($event) => checkAll.value = $event,
+      "halfchecked": halfChecked.value
+    }, null)]) : null);
+    return () => {
+      return createVNode("thead", {
+        "class": "devui-thead"
+      }, [createVNode("tr", null, [checkbox2.value, columns.value.map((column, index2) => createVNode(Th, {
+        "key": index2,
+        "column": column
+      }, null))])]);
     };
+  }
+});
+const Th = defineComponent({
+  props: {
+    column: {
+      type: Object,
+      required: true
+    }
   },
-  render() {
+  setup(props) {
+    const table2 = inject(TABLE_TOKEN);
     const {
-      rowColumns
-    } = this;
-    return createVNode("tbody", {
+      column
+    } = toRefs(props);
+    const directionRef = useSort(table2.store, column);
+    const filteredRef = useFliter(table2.store, column);
+    const {
+      stickyCell,
+      offsetStyle
+    } = useFixedColumn(column);
+    return () => createVNode("th", {
+      "class": stickyCell.value,
+      "style": offsetStyle.value
+    }, [createVNode("div", {
+      "class": "header-container"
+    }, [props.column.renderHeader(), props.column.filterable && createVNode(Filter, {
+      "modelValue": filteredRef.value,
+      "onUpdate:modelValue": ($event) => filteredRef.value = $event,
+      "filterList": props.column.filterList,
+      "customTemplate": props.column.customFilterTemplate
+    }, null)]), props.column.sortable && createVNode(Sort, {
+      "modelValue": directionRef.value,
+      "onUpdate:modelValue": ($event) => directionRef.value = $event
+    }, null)]);
+  }
+});
+var TableBody = defineComponent({
+  name: "DTableBody",
+  setup() {
+    const table2 = inject(TABLE_TOKEN);
+    const {
+      _data: data,
+      _columns: columns,
+      _checkList: checkList,
+      isFixedLeft
+    } = table2.store.states;
+    const hoverEnabled = computed(() => table2.props.rowHoveredHighlight);
+    const tdAttrs = computed(() => isFixedLeft.value ? {
+      class: "devui-sticky-cell left",
+      style: "left:0;"
+    } : null);
+    const renderCheckbox = (index2) => table2.props.checkable ? createVNode("td", tdAttrs.value, [createVNode(Checkbox, {
+      "modelValue": checkList.value[index2],
+      "onUpdate:modelValue": ($event) => checkList.value[index2] = $event
+    }, null)]) : null;
+    return () => createVNode("tbody", {
       "class": "devui-tbody"
-    }, [rowColumns.map((row, rowIndex) => {
+    }, [data.value.map((row, rowIndex) => {
       return createVNode("tr", {
-        "key": rowIndex
-      }, [row.columns.map((column, index2) => {
-        return createVNode("td", {
-          "key": index2
-        }, [column.renderCell({
-          row,
-          column,
-          $index: index2
-        })]);
-      })]);
+        "key": rowIndex,
+        "class": {
+          "hover-enabled": hoverEnabled.value
+        }
+      }, [renderCheckbox(rowIndex), columns.value.map((column, index2) => createVNode(TD, {
+        "column": column,
+        "index": index2,
+        "row": row
+      }, null))]);
     })]);
   }
 });
+const TD = defineComponent({
+  props: {
+    column: {
+      type: Object
+    },
+    row: {
+      type: Object
+    },
+    index: {
+      type: Number
+    }
+  },
+  setup(props) {
+    const column = toRef(props, "column");
+    const {
+      stickyCell,
+      offsetStyle
+    } = useFixedColumn(column);
+    return () => createVNode("td", {
+      "class": stickyCell.value,
+      "style": offsetStyle.value
+    }, [column.value.renderCell(props.row, props.index)]);
+  }
+});
 var table = "";
 var Table = defineComponent({
   name: "DTable",
   props: TableProps,
-  setup(props) {
+  setup(props, ctx) {
     const table2 = getCurrentInstance();
-    const store = createStore(props);
+    const store = createStore(toRef(props, "data"));
     table2.store = store;
+    provide(TABLE_TOKEN, table2);
     const {
-      classes
-    } = useTable(props);
-    provide("table", table2);
-    return {
       classes,
-      store
-    };
-  },
-  render() {
-    const {
-      classes,
-      data,
-      store,
-      $slots
-    } = this;
-    return createVNode("div", {
-      "class": "devui-table-wrapper"
-    }, [$slots.default(), createVNode("table", {
-      "class": classes,
-      "cellpadding": "0",
-      "cellspacing": "0"
-    }, [createVNode(ColGroup, null, null), createVNode(TableHeader, {
-      "store": store
-    }, null), !!data.length && createVNode(TableBody, {
-      "store": store
-    }, null)]), !data.length && createVNode("div", {
+      style
+    } = useTable(props);
+    const isEmpty = computed(() => props.data.length === 0);
+    const fixHeaderCompo = computed(() => {
+      return createVNode("div", {
+        "class": "devui-table-view"
+      }, [createVNode("div", {
+        "style": "overflow: hidden scroll;"
+      }, [createVNode("table", {
+        "class": classes.value,
+        "cellpadding": "0",
+        "cellspacing": "0"
+      }, [createVNode(ColGroup, null, null), createVNode(TableHeader, null, null)])]), createVNode("div", {
+        "class": "scroll-view"
+      }, [createVNode("table", {
+        "class": classes.value,
+        "cellpadding": "0",
+        "cellspacing": "0"
+      }, [createVNode(ColGroup, null, null), !isEmpty.value && createVNode(TableBody, {
+        "style": "flex: 1"
+      }, null)])])]);
+    });
+    const normalHeaderCompo = computed(() => {
+      return createVNode("table", {
+        "class": classes.value,
+        "cellpadding": "0",
+        "cellspacing": "0"
+      }, [createVNode(ColGroup, null, null), createVNode(TableHeader, {
+        "style": "position: relative"
+      }, null), !isEmpty.value && createVNode(TableBody, null, null)]);
+    });
+    ctx.expose({
+      getCheckedRows() {
+        return store.getCheckedRows();
+      }
+    });
+    return () => withDirectives(createVNode("div", {
+      "class": "devui-table-wrapper",
+      "style": style.value
+    }, [ctx.slots.default(), props.fixHeader ? fixHeaderCompo.value : normalHeaderCompo.value, isEmpty.value && createVNode("div", {
       "class": "devui-table-empty"
-    }, [createTextVNode("No Data")])]);
+    }, [createTextVNode("No Data")])]), [[resolveDirective("dLoading"), props.showLoading]]);
   }
 });
 const TableColumnProps = {
@@ -199,6 +1486,36 @@ const TableColumnProps = {
   },
   formatter: {
     type: Function
+  },
+  order: {
+    type: Number,
+    default: 0
+  },
+  sortable: {
+    type: Boolean,
+    default: false
+  },
+  compareFn: {
+    type: Function,
+    default: (field, a, b) => a[field] < b[field]
+  },
+  filterable: {
+    type: Boolean,
+    default: false
+  },
+  filterMultiple: {
+    type: Boolean,
+    default: false
+  },
+  filterList: {
+    type: Array,
+    default: []
+  },
+  fixedLeft: {
+    type: String
+  },
+  fixedRight: {
+    type: String
   }
 };
 function formatWidth(width) {
@@ -210,59 +1527,84 @@ function formatWidth(width) {
 function formatMinWidth(minWidth) {
   return formatWidth(minWidth) || 80;
 }
-function useRender(props) {
-  const formatedWidth = ref(formatWidth(props.width));
-  const formatedMinWidth = ref(formatMinWidth(props.minWidth));
-  const setColumnWidth = (column) => {
-    column.width = formatedWidth.value;
-    column.minWidth = formatedMinWidth.value;
+function createColumn(props, templates) {
+  const {
+    field,
+    header: header2,
+    sortable,
+    width,
+    minWidth,
+    formatter,
+    compareFn,
+    filterable,
+    filterList,
+    filterMultiple,
+    order,
+    fixedLeft,
+    fixedRight
+  } = props;
+  const column = reactive({});
+  watch([field, header2, order], ([field2, header22, order2]) => {
+    column.field = field2;
+    column.header = header22;
+    column.order = order2;
+  }, { immediate: true });
+  watch([sortable, compareFn], ([sortable2, compareFn2]) => {
+    column.sortable = sortable2;
+    column.compareFn = compareFn2;
+  });
+  watch([
+    filterable,
+    filterList,
+    filterMultiple
+  ], ([filterable2, filterList2, filterMultiple2]) => {
+    column.filterable = filterable2;
+    column.filterMultiple = filterMultiple2;
+    column.filterList = filterList2;
+  }, { immediate: true });
+  watch([fixedLeft, fixedRight], ([left, right]) => {
+    column.fixedLeft = left;
+    column.fixedRight = right;
+  }, { immediate: true });
+  watch([width, minWidth], ([width2, minWidth2]) => {
+    column.width = formatWidth(width2);
+    column.minWidth = formatMinWidth(minWidth2);
     column.realWidth = column.width || column.minWidth;
-    return column;
-  };
-  const setColumnRender = (column) => {
-    column.renderHeader = () => {
-      return defaultRenderHeader(column);
-    };
-    column.renderCell = (data) => {
-      return defaultRenderCell(data);
-    };
-  };
-  return { setColumnWidth, setColumnRender };
+  });
+  onBeforeMount(() => {
+    column.renderHeader = defaultRenderHeader;
+    column.renderCell = defaultRenderCell;
+    column.formatter = formatter.value;
+    column.customFilterTemplate = templates.customFilterTemplate;
+    column.subColumns = templates.subColumns;
+  });
+  return column;
 }
-function defaultRenderHeader(column) {
-  return column.header;
+function defaultRenderHeader() {
+  return h("span", { class: "title" }, this.header);
 }
-function defaultRenderCell({
-  row,
-  column,
-  $index
-}) {
-  var _a;
-  const value = row[column.field];
-  if (column.formatter) {
-    return column.formatter(row, column, value, $index);
-  }
-  return ((_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) || "";
+function defaultRenderCell(rowData, index2) {
+  var _a, _b;
+  const value = rowData[this.field];
+  if (this.formatter) {
+    return this.formatter(rowData, value, index2);
+  }
+  return (_b = (_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) != null ? _b : "";
 }
 var Column = defineComponent({
   name: "DColumn",
   props: TableColumnProps,
-  setup(props) {
-    const column = {
-      field: props.field,
-      header: props.header
-    };
-    const parent = inject("table");
-    const {
-      setColumnWidth,
-      setColumnRender
-    } = useRender(props);
-    onBeforeMount(() => {
-      setColumnWidth(column);
-      setColumnRender(column);
-    });
+  setup(props, ctx) {
+    const column = createColumn(toRefs(props), ctx.slots);
+    const parent = inject(TABLE_TOKEN);
     onMounted(() => {
       parent.store.insertColumn(column);
+      watch(() => column.order, () => {
+        parent.store.sortColumn();
+      });
+    });
+    onBeforeUnmount(() => {
+      parent.store.removeColumn(column);
     });
   },
   render() {