table-grid.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. require("../../../_virtual/_rolldown/runtime.js");
  2. const require_types = require("../../../utils/types.js");
  3. const require_fixed_size_grid = require("../../virtual-list/src/components/fixed-size-grid.js");
  4. const require_dynamic_size_grid = require("../../virtual-list/src/components/dynamic-size-grid.js");
  5. const require_utils = require("./utils.js");
  6. const require_tokens = require("./tokens.js");
  7. const require_grid = require("./grid.js");
  8. const require_header = require("./components/header.js");
  9. let vue = require("vue");
  10. let _vue_shared = require("@vue/shared");
  11. //#region ../../packages/components/table-v2/src/table-grid.tsx
  12. const COMPONENT_NAME = "ElTableV2Grid";
  13. const useTableGrid = (props) => {
  14. const headerRef = (0, vue.ref)();
  15. const bodyRef = (0, vue.ref)();
  16. const scrollLeft = (0, vue.ref)(0);
  17. const totalHeight = (0, vue.computed)(() => {
  18. const { data, rowHeight, estimatedRowHeight } = props;
  19. if (estimatedRowHeight) return;
  20. return data.length * rowHeight;
  21. });
  22. const fixedRowHeight = (0, vue.computed)(() => {
  23. const { fixedData, rowHeight } = props;
  24. return (fixedData?.length || 0) * rowHeight;
  25. });
  26. const headerHeight = (0, vue.computed)(() => require_utils.sum(props.headerHeight));
  27. const gridHeight = (0, vue.computed)(() => {
  28. const { height } = props;
  29. return Math.max(0, height - (0, vue.unref)(headerHeight) - (0, vue.unref)(fixedRowHeight));
  30. });
  31. const hasHeader = (0, vue.computed)(() => {
  32. return (0, vue.unref)(headerHeight) + (0, vue.unref)(fixedRowHeight) > 0;
  33. });
  34. const itemKey = ({ data, rowIndex }) => data[rowIndex][props.rowKey];
  35. function onItemRendered({ rowCacheStart, rowCacheEnd, rowVisibleStart, rowVisibleEnd }) {
  36. props.onRowsRendered?.({
  37. rowCacheStart,
  38. rowCacheEnd,
  39. rowVisibleStart,
  40. rowVisibleEnd
  41. });
  42. }
  43. function resetAfterRowIndex(index, forceUpdate) {
  44. bodyRef.value?.resetAfterRowIndex(index, forceUpdate);
  45. }
  46. function scrollTo(leftOrOptions, top) {
  47. const header$ = (0, vue.unref)(headerRef);
  48. const body$ = (0, vue.unref)(bodyRef);
  49. if ((0, _vue_shared.isObject)(leftOrOptions)) {
  50. header$?.scrollToLeft(leftOrOptions.scrollLeft);
  51. scrollLeft.value = leftOrOptions.scrollLeft;
  52. body$?.scrollTo(leftOrOptions);
  53. } else {
  54. header$?.scrollToLeft(leftOrOptions);
  55. scrollLeft.value = leftOrOptions;
  56. body$?.scrollTo({
  57. scrollLeft: leftOrOptions,
  58. scrollTop: top
  59. });
  60. }
  61. }
  62. function scrollToTop(scrollTop) {
  63. (0, vue.unref)(bodyRef)?.scrollTo({ scrollTop });
  64. }
  65. function scrollToRow(row, strategy) {
  66. const body = (0, vue.unref)(bodyRef);
  67. if (!body) return;
  68. const prevScrollLeft = scrollLeft.value;
  69. body.scrollToItem(row, 0, strategy);
  70. if (prevScrollLeft) scrollTo({ scrollLeft: prevScrollLeft });
  71. }
  72. function forceUpdate() {
  73. (0, vue.unref)(bodyRef)?.$forceUpdate();
  74. (0, vue.unref)(headerRef)?.$forceUpdate();
  75. }
  76. (0, vue.watch)(() => props.bodyWidth, () => {
  77. if (require_types.isNumber(props.estimatedRowHeight)) bodyRef.value?.resetAfter({ columnIndex: 0 }, false);
  78. });
  79. return {
  80. bodyRef,
  81. forceUpdate,
  82. fixedRowHeight,
  83. gridHeight,
  84. hasHeader,
  85. headerHeight,
  86. headerRef,
  87. totalHeight,
  88. itemKey,
  89. onItemRendered,
  90. resetAfterRowIndex,
  91. scrollTo,
  92. scrollToTop,
  93. scrollToRow,
  94. scrollLeft
  95. };
  96. };
  97. const TableGrid = /* @__PURE__ */ (0, vue.defineComponent)({
  98. name: COMPONENT_NAME,
  99. props: require_grid.tableV2GridProps,
  100. setup(props, { slots, expose }) {
  101. const { ns } = (0, vue.inject)(require_tokens.TableV2InjectionKey);
  102. const { bodyRef, fixedRowHeight, gridHeight, hasHeader, headerRef, headerHeight, totalHeight, forceUpdate, itemKey, onItemRendered, resetAfterRowIndex, scrollTo, scrollToTop, scrollToRow, scrollLeft } = useTableGrid(props);
  103. (0, vue.provide)(require_tokens.TABLE_V2_GRID_INJECTION_KEY, scrollLeft);
  104. (0, vue.onActivated)(async () => {
  105. await (0, vue.nextTick)();
  106. const scrollTop = bodyRef.value?.states.scrollTop;
  107. scrollTop && scrollToTop(Math.round(scrollTop) + 1);
  108. });
  109. expose({
  110. forceUpdate,
  111. /**
  112. * @description fetch total height
  113. */
  114. totalHeight,
  115. /**
  116. * @description scroll to a position
  117. */
  118. scrollTo,
  119. /**
  120. * @description scroll vertically to position y
  121. */
  122. scrollToTop,
  123. /**
  124. * @description scroll to a given row
  125. * @params row {Number} which row to scroll to
  126. * @params strategy {ScrollStrategy} use what strategy to scroll to
  127. */
  128. scrollToRow,
  129. /**
  130. * @description reset rendered state after row index
  131. */
  132. resetAfterRowIndex
  133. });
  134. const getColumnWidth = () => props.bodyWidth;
  135. return () => {
  136. const { cache, columns, data, fixedData, useIsScrolling, scrollbarAlwaysOn, scrollbarEndGap, scrollbarStartGap, style, rowHeight, bodyWidth, estimatedRowHeight, headerWidth, height, width, getRowHeight, onScroll } = props;
  137. const isDynamicRowEnabled = require_types.isNumber(estimatedRowHeight);
  138. const Grid = isDynamicRowEnabled ? require_dynamic_size_grid.default : require_fixed_size_grid.default;
  139. const _headerHeight = (0, vue.unref)(headerHeight);
  140. return (0, vue.createVNode)("div", {
  141. "role": "table",
  142. "class": [ns.e("table"), props.class],
  143. "style": style
  144. }, [(0, vue.createVNode)(Grid, {
  145. "ref": bodyRef,
  146. "data": data,
  147. "useIsScrolling": useIsScrolling,
  148. "itemKey": itemKey,
  149. "columnCache": 0,
  150. "columnWidth": isDynamicRowEnabled ? getColumnWidth : bodyWidth,
  151. "totalColumn": 1,
  152. "totalRow": data.length,
  153. "rowCache": cache,
  154. "rowHeight": isDynamicRowEnabled ? getRowHeight : rowHeight,
  155. "width": width,
  156. "height": (0, vue.unref)(gridHeight),
  157. "class": ns.e("body"),
  158. "role": "rowgroup",
  159. "scrollbarStartGap": scrollbarStartGap,
  160. "scrollbarEndGap": scrollbarEndGap,
  161. "scrollbarAlwaysOn": scrollbarAlwaysOn,
  162. "onScroll": onScroll,
  163. "onItemRendered": onItemRendered,
  164. "perfMode": false
  165. }, { default: (params) => {
  166. const rowData = data[params.rowIndex];
  167. return slots.row?.({
  168. ...params,
  169. columns,
  170. rowData
  171. });
  172. } }), (0, vue.unref)(hasHeader) && (0, vue.createVNode)(require_header.default, {
  173. "ref": headerRef,
  174. "class": ns.e("header-wrapper"),
  175. "columns": columns,
  176. "headerData": data,
  177. "headerHeight": props.headerHeight,
  178. "fixedHeaderData": fixedData,
  179. "rowWidth": headerWidth,
  180. "rowHeight": rowHeight,
  181. "width": width,
  182. "height": Math.min(_headerHeight + (0, vue.unref)(fixedRowHeight), height)
  183. }, {
  184. dynamic: slots.header,
  185. fixed: slots.row
  186. })]);
  187. };
  188. }
  189. });
  190. //#endregion
  191. exports.default = TableGrid;
  192. //# sourceMappingURL=table-grid.js.map