@hi-ui/table 4.0.0-beta.45 → 4.0.0-beta.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/lib/cjs/TableAdvancedFilter.js +13 -8
  2. package/lib/cjs/styles/index.scss.js +1 -1
  3. package/lib/esm/TableAdvancedFilter.js +13 -8
  4. package/lib/esm/styles/index.scss.js +1 -1
  5. package/lib/types/BaseTable.d.ts +4 -4
  6. package/lib/types/context.d.ts +5 -7
  7. package/lib/types/types.d.ts +106 -28
  8. package/lib/types/use-table.d.ts +14 -4
  9. package/package.json +31 -31
package/lib/cjs/TableAdvancedFilter.js CHANGED
@@ -126,17 +126,21 @@ var FilterDropdown = function FilterDropdown(_ref3) {
126
126
  filterIcon = _column$raw2.filterIcon,
127
127
  filterDropdown = _column$raw2.filterDropdown,
128
128
  filterDropdownWidth = _column$raw2.filterDropdownWidth,
129
+ filterDropdownVisible = _column$raw2.filterDropdownVisible,
130
+ filterDropdownOverlay = _column$raw2.filterDropdownOverlay,
129
131
  onFilterDropdownVisibleChange = _column$raw2.onFilterDropdownVisibleChange,
130
132
  filterDropdownClassName = _column$raw2.filterDropdownClassName;
131
133
 
132
134
  var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
135
+ defaultVisible: false,
136
+ visible: filterDropdownVisible,
133
137
  onOpen: function onOpen() {
134
138
  _onOpen === null || _onOpen === void 0 ? void 0 : _onOpen();
135
- onFilterDropdownVisibleChange === null || onFilterDropdownVisibleChange === void 0 ? void 0 : onFilterDropdownVisibleChange(true, column);
139
+ onFilterDropdownVisibleChange === null || onFilterDropdownVisibleChange === void 0 ? void 0 : onFilterDropdownVisibleChange(true, column.raw);
136
140
  },
137
141
  onClose: function onClose() {
138
142
  _onClose === null || _onClose === void 0 ? void 0 : _onClose();
139
- onFilterDropdownVisibleChange === null || onFilterDropdownVisibleChange === void 0 ? void 0 : onFilterDropdownVisibleChange(false, column);
143
+ onFilterDropdownVisibleChange === null || onFilterDropdownVisibleChange === void 0 ? void 0 : onFilterDropdownVisibleChange(false, column.raw);
140
144
  }
141
145
  }),
142
146
  menuVisible = _useUncontrolledToggl[0],
@@ -150,20 +154,21 @@ var FilterDropdown = function FilterDropdown(_ref3) {
150
154
  className: prefixCls + "__trigger",
151
155
  ref: setMenuTrigger,
152
156
  onClick: menuVisibleAction.not
153
- }, filterIcon), /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
157
+ }, filterIcon), /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], Object.assign({
154
158
  className: prefixCls + "__popper",
155
- visible: menuVisible,
156
- attachEl: menuTrigger,
157
- onClose: menuVisibleAction.off,
158
159
  // @DesignToken zIndex: `overlay`
159
160
  zIndex: 1050
160
- }, /*#__PURE__*/React__default["default"].createElement("div", {
161
+ }, filterDropdownOverlay, {
162
+ visible: menuVisible,
163
+ attachEl: menuTrigger,
164
+ onClose: menuVisibleAction.off
165
+ }), /*#__PURE__*/React__default["default"].createElement("div", {
161
166
  className: classname.cx(prefixCls + "__content", filterDropdownClassName),
162
167
  style: {
163
168
  width: filterDropdownWidth
164
169
  }
165
170
  }, typeAssertion.isFunction(filterDropdown) ? filterDropdown({
166
- columnData: column,
171
+ columnData: column.raw,
167
172
  setFilterDropdownVisible: menuVisibleAction.set
168
173
  }) : null)));
169
174
  };
package/lib/cjs/styles/index.scss.js CHANGED
@@ -14,7 +14,7 @@ Object.defineProperty(exports, '__esModule', {
14
14
  });
15
15
  var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative; }.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed; }.hi-v4-table__wrapper {position: relative;z-index: 0; }.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff)); }.hi-v4-table--size-md table tbody > tr > td {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-sm table tbody > tr > td {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-lg table tbody > tr > td {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--sticky {position: -webkit-sticky;position: sticky;top: 0; }.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden; }.hi-v4-table-header__resizable {position: relative;background-clip: padding-box; }.hi-v4-table-header__resizable-handle {position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;cursor: col-resize;z-index: 1; }.hi-v4-table-header__resizable-handle:hover {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-body {position: relative;overflow: auto; }.hi-v4-table-header-cell {color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px); }.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px; }.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px; }.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400); }.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem); }.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0; }.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;margin-top: 2px;margin-left: 6px; }.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px; }.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer; }.hi-v4-table-header-filter-custom__content {padding: 12px 8px; }.hi-v4-table-embed-row {position: relative;z-index: 0; }.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px); }.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6; }.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: '';background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%; }.hi-v4-table-setting-item::after {position: absolute;content: '';z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%; }.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px; }.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px); }.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px; }.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px); }.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px; }.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start; }.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; }.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0; }.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }";
16
16
 
17
- var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
17
+ var __styleInject__ = require('inject-head-style')["default"];
18
18
 
19
19
  __styleInject__(css_248z);
20
20
 
package/lib/esm/TableAdvancedFilter.js CHANGED
@@ -98,17 +98,21 @@ var FilterDropdown = function FilterDropdown(_ref3) {
98
98
  filterIcon = _column$raw2.filterIcon,
99
99
  filterDropdown = _column$raw2.filterDropdown,
100
100
  filterDropdownWidth = _column$raw2.filterDropdownWidth,
101
+ filterDropdownVisible = _column$raw2.filterDropdownVisible,
102
+ filterDropdownOverlay = _column$raw2.filterDropdownOverlay,
101
103
  onFilterDropdownVisibleChange = _column$raw2.onFilterDropdownVisibleChange,
102
104
  filterDropdownClassName = _column$raw2.filterDropdownClassName;
103
105
 
104
106
  var _useUncontrolledToggl = useUncontrolledToggle({
107
+ defaultVisible: false,
108
+ visible: filterDropdownVisible,
105
109
  onOpen: function onOpen() {
106
110
  _onOpen === null || _onOpen === void 0 ? void 0 : _onOpen();
107
- onFilterDropdownVisibleChange === null || onFilterDropdownVisibleChange === void 0 ? void 0 : onFilterDropdownVisibleChange(true, column);
111
+ onFilterDropdownVisibleChange === null || onFilterDropdownVisibleChange === void 0 ? void 0 : onFilterDropdownVisibleChange(true, column.raw);
108
112
  },
109
113
  onClose: function onClose() {
110
114
  _onClose === null || _onClose === void 0 ? void 0 : _onClose();
111
- onFilterDropdownVisibleChange === null || onFilterDropdownVisibleChange === void 0 ? void 0 : onFilterDropdownVisibleChange(false, column);
115
+ onFilterDropdownVisibleChange === null || onFilterDropdownVisibleChange === void 0 ? void 0 : onFilterDropdownVisibleChange(false, column.raw);
112
116
  }
113
117
  }),
114
118
  menuVisible = _useUncontrolledToggl[0],
@@ -122,20 +126,21 @@ var FilterDropdown = function FilterDropdown(_ref3) {
122
126
  className: prefixCls + "__trigger",
123
127
  ref: setMenuTrigger,
124
128
  onClick: menuVisibleAction.not
125
- }, filterIcon), /*#__PURE__*/React.createElement(Popper, {
129
+ }, filterIcon), /*#__PURE__*/React.createElement(Popper, Object.assign({
126
130
  className: prefixCls + "__popper",
127
- visible: menuVisible,
128
- attachEl: menuTrigger,
129
- onClose: menuVisibleAction.off,
130
131
  // @DesignToken zIndex: `overlay`
131
132
  zIndex: 1050
132
- }, /*#__PURE__*/React.createElement("div", {
133
+ }, filterDropdownOverlay, {
134
+ visible: menuVisible,
135
+ attachEl: menuTrigger,
136
+ onClose: menuVisibleAction.off
137
+ }), /*#__PURE__*/React.createElement("div", {
133
138
  className: cx(prefixCls + "__content", filterDropdownClassName),
134
139
  style: {
135
140
  width: filterDropdownWidth
136
141
  }
137
142
  }, isFunction(filterDropdown) ? filterDropdown({
138
- columnData: column,
143
+ columnData: column.raw,
139
144
  setFilterDropdownVisible: menuVisibleAction.set
140
145
  }) : null)));
141
146
  };
package/lib/esm/styles/index.scss.js CHANGED
@@ -7,7 +7,7 @@
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
- import __styleInject__ from 'style-inject/dist/style-inject.es.js';
10
+ import __styleInject__ from 'inject-head-style';
11
11
  var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative; }.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed; }.hi-v4-table__wrapper {position: relative;z-index: 0; }.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff)); }.hi-v4-table--size-md table tbody > tr > td {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-sm table tbody > tr > td {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-lg table tbody > tr > td {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--sticky {position: -webkit-sticky;position: sticky;top: 0; }.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden; }.hi-v4-table-header__resizable {position: relative;background-clip: padding-box; }.hi-v4-table-header__resizable-handle {position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;cursor: col-resize;z-index: 1; }.hi-v4-table-header__resizable-handle:hover {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-body {position: relative;overflow: auto; }.hi-v4-table-header-cell {color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px); }.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px; }.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px; }.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400); }.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem); }.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0; }.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;margin-top: 2px;margin-left: 6px; }.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px; }.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer; }.hi-v4-table-header-filter-custom__content {padding: 12px 8px; }.hi-v4-table-embed-row {position: relative;z-index: 0; }.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px); }.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6; }.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: '';background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%; }.hi-v4-table-setting-item::after {position: absolute;content: '';z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%; }.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px; }.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px); }.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px; }.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px); }.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px; }.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start; }.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; }.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0; }.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }";
12
12
 
13
13
  __styleInject__(css_248z);
package/lib/types/BaseTable.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { HiBaseHTMLProps } from '@hi-ui/core';
3
- import { TableExtra, TableRowFunc, TableHeaderRowFunc } from './types';
3
+ import { TableExtra, TableColumnItem, TableOnRowReturn } from './types';
4
4
  import { UseTableProps } from './use-table';
5
5
  import { UseEmbedExpandProps } from './hooks/use-embed-expand';
6
6
  export declare const EMBED_DATA_KEY: string;
@@ -19,13 +19,13 @@ export interface BaseTableProps extends Omit<HiBaseHTMLProps<'div'>, 'onDrop' |
19
19
  */
20
20
  striped?: boolean;
21
21
  /**
22
- * 表格内容行事件处理函数
22
+ * 表格内容行事件处理函数，对于统计行（合计或均值），rowData 为 null
23
23
  */
24
- onRow?: TableRowFunc;
24
+ onRow?: (rowData: Record<string, any> | null, index: number) => TableOnRowReturn;
25
25
  /**
26
26
  * 行标题事件处理函数
27
27
  */
28
- onHeaderRow?: TableHeaderRowFunc;
28
+ onHeaderRow?: (columns: TableColumnItem[], index: number) => TableOnRowReturn;
29
29
  /**
30
30
  * 数据为空时的展示内容
31
31
  */
package/lib/types/context.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { TableRowFunc } from './types';
2
+ import { TableOnRowReturn } from './types';
3
3
  export declare const TableProvider: import("react").Provider<(Omit<{
4
4
  getColgroupProps: (column: import("./types").FlattedTableColumnItemData, index: number) => {
5
5
  style: {
@@ -38,7 +38,7 @@ export declare const TableProvider: import("react").Provider<(Omit<{
38
38
  isTree: boolean;
39
39
  cellRender: ((text: any) => import("react").ReactNode) | undefined;
40
40
  showColMenu: boolean | undefined;
41
- onLoadChildren: any;
41
+ onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
42
42
  scrollLeft: number;
43
43
  scrollRight: number;
44
44
  rootProps: {
@@ -47,7 +47,6 @@ export declare const TableProvider: import("react").Provider<(Omit<{
47
47
  setting?: boolean | undefined;
48
48
  loading?: boolean | undefined;
49
49
  uniqueId?: string | undefined;
50
- extra?: import("react").ReactNode;
51
50
  };
52
51
  activeSorterColumn: string | null;
53
52
  setActiveSorterColumn: import("react").Dispatch<import("react").SetStateAction<string | null>>;
@@ -101,7 +100,7 @@ export declare const TableProvider: import("react").Provider<(Omit<{
101
100
  hasAvgColumn: boolean;
102
101
  sumRow: Record<string, any>;
103
102
  hasSumColumn: boolean;
104
- onRow?: TableRowFunc | undefined;
103
+ onRow?: ((rowData: Record<string, any> | null, index: number) => TableOnRowReturn) | undefined;
105
104
  striped: boolean;
106
105
  }) | null>;
107
106
  export declare const useTableContext: () => Omit<{
@@ -142,7 +141,7 @@ export declare const useTableContext: () => Omit<{
142
141
  isTree: boolean;
143
142
  cellRender: ((text: any) => import("react").ReactNode) | undefined;
144
143
  showColMenu: boolean | undefined;
145
- onLoadChildren: any;
144
+ onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
146
145
  scrollLeft: number;
147
146
  scrollRight: number;
148
147
  rootProps: {
@@ -151,7 +150,6 @@ export declare const useTableContext: () => Omit<{
151
150
  setting?: boolean | undefined;
152
151
  loading?: boolean | undefined;
153
152
  uniqueId?: string | undefined;
154
- extra?: import("react").ReactNode;
155
153
  };
156
154
  activeSorterColumn: string | null;
157
155
  setActiveSorterColumn: import("react").Dispatch<import("react").SetStateAction<string | null>>;
@@ -205,6 +203,6 @@ export declare const useTableContext: () => Omit<{
205
203
  hasAvgColumn: boolean;
206
204
  sumRow: Record<string, any>;
207
205
  hasSumColumn: boolean;
208
- onRow?: TableRowFunc | undefined;
206
+ onRow?: ((rowData: Record<string, any> | null, index: number) => TableOnRowReturn) | undefined;
209
207
  striped: boolean;
210
208
  };
package/lib/types/types.d.ts CHANGED
@@ -1,9 +1,15 @@
1
1
  import React from 'react';
2
- import { SelectProps } from '@hi-ui/select';
3
2
  import { PaginationProps } from '@hi-ui/pagination';
4
- export declare type TableAlign = 'left' | 'right' | 'center';
3
+ import { PopperOverlayProps } from '@hi-ui/popper';
4
+ export declare type TableColumnItemAlignEnum = 'left' | 'right' | 'center';
5
5
  export declare type TableFrozenColumnOptions = {
6
+ /**
7
+ * 表格从左侧冻结至某列
8
+ */
6
9
  left?: React.ReactText;
10
+ /**
11
+ * 表格从右侧冻结至某列
12
+ */
7
13
  right?: React.ReactText;
8
14
  };
9
15
  export declare type TableExtra = {
@@ -11,68 +17,140 @@ export declare type TableExtra = {
11
17
  header?: React.ReactNode;
12
18
  };
13
19
  export declare type TableCheckAllOptions = {
14
- title?: React.ReactNode;
20
+ /**
21
+ * 添加全选按钮右侧过滤 icon
22
+ */
15
23
  filterIcon?: React.ReactNode;
24
+ /**
25
+ * 自定义渲染全选内容
26
+ */
16
27
  render?: (checkboxNode: React.ReactNode) => React.ReactNode;
17
28
  };
18
29
  export declare type TableRowSelection = {
30
+ /**
31
+ * 设置选中列列宽
32
+ */
19
33
  checkboxColWidth?: number;
34
+ /**
35
+ * 选中的行（受控
36
+ */
20
37
  selectedRowKeys?: React.ReactText[];
38
+ /**
39
+ * 行选择的配置项
40
+ */
21
41
  getCheckboxConfig?: (rowData: object) => {
22
42
  disabled?: boolean;
23
43
  };
24
- onChange?: (selectedRowKeys: React.ReactText[], targetRow?: object | object[], shouldChecked?: boolean) => void;
25
44
  /**
26
- *。暂不对外暴露
27
- * @private
45
+ * 选中项发生变化时的回调
28
46
  */
47
+ onChange?: (selectedRowKeys: React.ReactText[], targetRow?: object | object[], shouldChecked?: boolean) => void;
29
48
  /**
30
49
  * 全选配置集合
31
50
  */
32
51
  checkAllOptions?: TableCheckAllOptions;
33
52
  };
34
- export declare type TableRowReturn = {
53
+ export declare type TableOnRowReturn = {
54
+ /**
55
+ * 行点击事件
56
+ */
35
57
  onClick?: (event: React.MouseEvent) => void;
58
+ /**
59
+ * 行双击事件
60
+ */
36
61
  onDoubleClick?: (event: React.MouseEvent) => void;
62
+ /**
63
+ * 行右键菜单事件
64
+ */
37
65
  onContextMenu?: (event: React.MouseEvent) => void;
66
+ /**
67
+ * 行鼠标入场事件
68
+ */
38
69
  onMouseEnter?: (event: React.MouseEvent) => void;
70
+ /**
71
+ * 行鼠标出场事件
72
+ */
39
73
  onMouseLeave?: (event: React.MouseEvent) => void;
40
74
  };
41
- export declare type TableHeaderRowFunc = (columns: TableColumnItem[], index: number) => TableRowReturn;
42
- /**
43
- * 对于合计行或者均值行统计，rowData 为 null
44
- */
45
- export declare type TableRowFunc = (rowData: Record<string, any> | null, index: number) => TableRowReturn;
75
+ export interface TableColumnItemRenderReturn {
76
+ children: React.ReactNode;
77
+ props: {
78
+ colSpan?: number;
79
+ rowSpan?: number;
80
+ };
81
+ }
46
82
  export declare type TableColumnItem = {
47
- title: React.ReactNode;
83
+ /**
84
+ * 列标题
85
+ */
86
+ title: React.ReactNode | ((column: TableColumnEventData) => React.ReactNode);
87
+ /**
88
+ * 列对应数据项的唯一标识
89
+ */
48
90
  dataKey?: string;
49
- align?: TableAlign;
91
+ /**
92
+ * 该列宽度
93
+ */
94
+ width?: number;
95
+ /**
96
+ * 列对齐方式
97
+ */
98
+ align?: TableColumnItemAlignEnum;
99
+ /**
100
+ * 列排序函数
101
+ */
50
102
  sorter?: (a: any, b: any) => number;
103
+ /**
104
+ * 该列是否支持平均值
105
+ */
51
106
  avg?: boolean;
107
+ /**
108
+ * 该列是否支持合计
109
+ */
52
110
  total?: boolean;
53
- width?: number;
111
+ /**
112
+ * 多级表头
113
+ */
54
114
  children?: TableColumnItem[];
55
115
  /**
56
- * @deprecated
116
+ * 控制单元格自定义渲染
117
+ */
118
+ render?: (text: any, rowItem: Record<string, any>, rowIndex: number, dataKey: string) => React.ReactNode | TableColumnItemRenderReturn;
119
+ /**
120
+ * 列类名 className
57
121
  */
58
- selectFilters?: SelectProps;
59
- defaultSortOrder?: 'ascend' | 'descend';
60
122
  className?: string;
61
- render?: (text: any, rowItem: Record<string, any>, rowIndex: number, dataKey: string) => React.ReactNode | {
62
- children: React.ReactNode;
63
- props: {
64
- colSpan?: number;
65
- rowSpan?: number;
66
- };
67
- };
123
+ /**
124
+ * 自定义 filter 图标
125
+ */
68
126
  filterIcon?: React.ReactNode;
127
+ /**
128
+ * 自定义筛选菜单宽度
129
+ */
69
130
  filterDropdownWidth?: number;
131
+ /**
132
+ * 受控控制 dropdown 显隐
133
+ */
134
+ filterDropdownVisible?: boolean;
135
+ /**
136
+ * 自定义筛选菜单 className
137
+ */
70
138
  filterDropdownClassName?: string;
139
+ /**
140
+ * 自定义筛选菜单弹窗交互
141
+ */
142
+ filterDropdownOverlay?: PopperOverlayProps;
143
+ /**
144
+ * 自定义筛选下拉选项显示状态改变时的回调方法
145
+ */
146
+ onFilterDropdownVisibleChange?: (filterDropdownVisible: boolean, item: TableColumnItem) => void;
147
+ /**
148
+ * 自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互
149
+ */
71
150
  filterDropdown?: (props: {
72
151
  columnData: TableColumnItem;
73
152
  setFilterDropdownVisible: Function;
74
153
  }) => React.ReactNode;
75
- onFilterDropdownVisibleChange?: (filterDropdownVisible: boolean, item: TableColumnItem) => void;
76
154
  };
77
155
  export declare type TableDataSource = {
78
156
  url: string;
@@ -150,9 +228,9 @@ export interface FlattedTableColumnItemData extends TableColumnItem {
150
228
  leftStickyWidth?: number;
151
229
  rightStickyWidth?: number;
152
230
  }
153
- export interface TableNodeRequiredProps {
231
+ export interface TableColumnEventData extends FlattedTableColumnItemData {
154
232
  }
155
- export interface TableRowEventData extends FlattedTableRowData, TableNodeRequiredProps {
233
+ export interface TableRowEventData extends FlattedTableRowData {
156
234
  }
157
235
  export interface TableRowRequiredProps {
158
236
  expanded: boolean;
package/lib/types/use-table.d.ts CHANGED
@@ -39,7 +39,7 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
39
39
  isTree: boolean;
40
40
  cellRender: ((text: any) => React.ReactNode) | undefined;
41
41
  showColMenu: boolean | undefined;
42
- onLoadChildren: any;
42
+ onLoadChildren: ((item: TableRowEventData) => Promise<any[] | void> | void) | undefined;
43
43
  scrollLeft: number;
44
44
  scrollRight: number;
45
45
  rootProps: {
@@ -63,7 +63,6 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
63
63
  * 唯一 id 前缀，废弃
64
64
  */
65
65
  uniqueId?: string | undefined;
66
- extra?: React.ReactNode;
67
66
  };
68
67
  activeSorterColumn: string | null;
69
68
  setActiveSorterColumn: React.Dispatch<React.SetStateAction<string | null>>;
@@ -216,9 +215,15 @@ export interface UseTableProps {
216
215
  * 唯一 id 前缀，废弃
217
216
  */
218
217
  uniqueId?: string;
218
+ /**
219
+ * 开始拖拽时触发
220
+ */
219
221
  onDragStart?: (evt: React.DragEvent, option: {
220
222
  dragNode: object;
221
223
  }) => void;
224
+ /**
225
+ * 拖拽行放开时触发
226
+ */
222
227
  onDrop?: (evt: React.DragEvent, option: {
223
228
  dragNode: object;
224
229
  dropNode: object;
@@ -226,6 +231,9 @@ export interface UseTableProps {
226
231
  after: object;
227
232
  };
228
233
  }) => boolean | Promise<any>;
234
+ /**
235
+ * 拖拽成功时触发
236
+ */
229
237
  onDropEnd?: (option: {
230
238
  dragNode: object;
231
239
  dropNode: object;
@@ -237,11 +245,13 @@ export interface UseTableProps {
237
245
  * 初始时展开所有行
238
246
  */
239
247
  defaultExpandAll?: boolean;
240
- extra?: React.ReactNode;
241
248
  /**
242
249
  * 全局控制单元格自定义渲染，优先级低于 column 的 render 方法
243
250
  */
244
251
  cellRender?: (text: any) => React.ReactNode;
245
- onLoadChildren?: any;
252
+ /**
253
+ * 点击异步加载子项
254
+ */
255
+ onLoadChildren?: (item: TableRowEventData) => Promise<any[] | void> | void;
246
256
  }
247
257
  export declare type UseTableReturn = ReturnType<typeof useTable>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/table",
3
- "version": "4.0.0-beta.45",
3
+ "version": "4.0.0-beta.48",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -43,36 +43,36 @@
43
43
  "url": "https://github.com/XiaoMi/hiui/issues"
44
44
  },
45
45
  "dependencies": {
46
- "@hi-ui/button": "^4.0.0-beta.12",
47
- "@hi-ui/checkbox": "^4.0.0-beta.11",
46
+ "@hi-ui/button": "^4.0.0-beta.14",
47
+ "@hi-ui/checkbox": "^4.0.0-beta.13",
48
48
  "@hi-ui/classname": "^4.0.0-beta.0",
49
49
  "@hi-ui/core-css": "^4.0.0-beta.5",
50
- "@hi-ui/dom-utils": "^4.0.0-beta.5",
51
- "@hi-ui/drawer": "^4.0.0-beta.24",
52
- "@hi-ui/empty-state": "^4.0.0-beta.19",
53
- "@hi-ui/env": "^4.0.0-beta.0",
54
- "@hi-ui/func-utils": "^4.0.0-beta.12",
55
- "@hi-ui/icon-button": "^4.0.0-beta.9",
56
- "@hi-ui/icons": "^4.0.0-beta.10",
57
- "@hi-ui/loading": "^4.0.0-beta.17",
58
- "@hi-ui/locale-context": "^4.0.0-beta.18",
59
- "@hi-ui/object-utils": "^4.0.0-beta.11",
60
- "@hi-ui/pagination": "^4.0.0-beta.28",
61
- "@hi-ui/popper": "^4.0.0-beta.13",
62
- "@hi-ui/react-utils": "^4.0.0-beta.5",
63
- "@hi-ui/select": "^4.0.0-beta.26",
64
- "@hi-ui/spinner": "^4.0.0-beta.9",
65
- "@hi-ui/times": "^4.0.0-beta.5",
66
- "@hi-ui/tree-utils": "^4.0.0-beta.4",
67
- "@hi-ui/type-assertion": "^4.0.0-beta.4",
68
- "@hi-ui/use-cache": "^4.0.0-beta.4",
69
- "@hi-ui/use-check": "^4.0.0-beta.4",
70
- "@hi-ui/use-check-state": "^4.0.0-beta.4",
71
- "@hi-ui/use-drag-sorter": "^4.0.0-beta.8",
72
- "@hi-ui/use-latest": "^4.0.0-beta.4",
73
- "@hi-ui/use-toggle": "^4.0.0-beta.4",
74
- "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.4",
75
- "@hi-ui/use-update-effect": "^4.0.0-beta.4",
50
+ "@hi-ui/dom-utils": "^4.0.0-beta.6",
51
+ "@hi-ui/drawer": "^4.0.0-beta.26",
52
+ "@hi-ui/empty-state": "^4.0.0-beta.21",
53
+ "@hi-ui/env": "^4.0.0-beta.1",
54
+ "@hi-ui/func-utils": "^4.0.0-beta.13",
55
+ "@hi-ui/icon-button": "^4.0.0-beta.10",
56
+ "@hi-ui/icons": "^4.0.0-beta.11",
57
+ "@hi-ui/loading": "^4.0.0-beta.19",
58
+ "@hi-ui/locale-context": "^4.0.0-beta.19",
59
+ "@hi-ui/object-utils": "^4.0.0-beta.12",
60
+ "@hi-ui/pagination": "^4.0.0-beta.30",
61
+ "@hi-ui/popper": "^4.0.0-beta.15",
62
+ "@hi-ui/react-utils": "^4.0.0-beta.6",
63
+ "@hi-ui/select": "^4.0.0-beta.28",
64
+ "@hi-ui/spinner": "^4.0.0-beta.10",
65
+ "@hi-ui/times": "^4.0.0-beta.6",
66
+ "@hi-ui/tree-utils": "^4.0.0-beta.5",
67
+ "@hi-ui/type-assertion": "^4.0.0-beta.5",
68
+ "@hi-ui/use-cache": "^4.0.0-beta.5",
69
+ "@hi-ui/use-check": "^4.0.0-beta.5",
70
+ "@hi-ui/use-check-state": "^4.0.0-beta.5",
71
+ "@hi-ui/use-drag-sorter": "^4.0.0-beta.9",
72
+ "@hi-ui/use-latest": "^4.0.0-beta.5",
73
+ "@hi-ui/use-toggle": "^4.0.0-beta.5",
74
+ "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.5",
75
+ "@hi-ui/use-update-effect": "^4.0.0-beta.5",
76
76
  "axios": "^0.24.0",
77
77
  "react-resizable": "^3.0.4"
78
78
  },
@@ -81,10 +81,10 @@
81
81
  "react-dom": ">=16.8.6"
82
82
  },
83
83
  "devDependencies": {
84
- "@hi-ui/hi-build": "^4.0.0-beta.4",
84
+ "@hi-ui/hi-build": "^4.0.0-beta.5",
85
85
  "@types/react-resizable": "^1.7.4",
86
86
  "react": "^17.0.1",
87
87
  "react-dom": "^17.0.1"
88
88
  },
89
- "gitHead": "1639653e72981dcce445765c8b80866adcffcad0"
89
+ "gitHead": "ef96654e009a72c3445d8df4a4182973631d00e9"
90
90
  }