Table.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  4. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  5. import _typeof from "@babel/runtime/helpers/esm/typeof";
  6. import { Fragment as _Fragment, createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
  7. import Header from './Header/Header';
  8. import Body from './Body';
  9. import useColumns from './hooks/useColumns';
  10. import { useLayoutState, useTimeoutLock } from './hooks/useFrame';
  11. import { getPathValue, mergeObject, validateValue, getColumnsKey } from './utils/valueUtil';
  12. import useStickyOffsets from './hooks/useStickyOffsets';
  13. import ColGroup from './ColGroup';
  14. import Panel from './Panel';
  15. import Footer from './Footer';
  16. import { findAllChildrenKeys, renderExpandIcon } from './utils/expandUtil';
  17. import { getCellFixedInfo } from './utils/fixUtil';
  18. import StickyScrollBar from './stickyScrollBar';
  19. import useSticky from './hooks/useSticky';
  20. import FixedHolder from './FixedHolder';
  21. import { onUpdated, computed, defineComponent, nextTick, onMounted, reactive, ref, shallowRef, toRef, toRefs, watch, watchEffect } from 'vue';
  22. import { warning } from '../vc-util/warning';
  23. import { reactivePick } from '../_util/reactivePick';
  24. import useState from '../_util/hooks/useState';
  25. import { toPx } from '../_util/util';
  26. import isVisible from '../vc-util/Dom/isVisible';
  27. import { getTargetScrollBarSize } from '../_util/getScrollBarSize';
  28. import classNames from '../_util/classNames';
  29. import VCResizeObserver from '../vc-resize-observer';
  30. import { useProvideTable } from './context/TableContext';
  31. import { useProvideBody } from './context/BodyContext';
  32. import { useProvideResize } from './context/ResizeContext';
  33. import { useProvideSticky } from './context/StickyContext';
  34. import pickAttrs from '../_util/pickAttrs';
  35. import { useProvideExpandedRow } from './context/ExpandedRowContext';
  36. // Used for conditions cache
  37. var EMPTY_DATA = [];
  38. // Used for customize scroll
  39. var EMPTY_SCROLL_TARGET = {};
  40. export var INTERNAL_HOOKS = 'rc-table-internal-hook';
  41. export default defineComponent({
  42. name: 'Table',
  43. inheritAttrs: false,
  44. props: ['prefixCls', 'data', 'columns', 'rowKey', 'tableLayout', 'scroll', 'rowClassName', 'title', 'footer', 'id', 'showHeader', 'components', 'customRow', 'customHeaderRow', 'direction', 'expandFixed', 'expandColumnWidth', 'expandedRowKeys', 'defaultExpandedRowKeys', 'expandedRowRender', 'expandRowByClick', 'expandIcon', 'onExpand', 'onExpandedRowsChange', 'onUpdate:expandedRowKeys', 'defaultExpandAllRows', 'indentSize', 'expandIconColumnIndex', 'expandedRowClassName', 'childrenColumnName', 'rowExpandable', 'sticky', 'transformColumns', 'internalHooks', 'internalRefs', 'canExpandable', 'onUpdateInternalRefs', 'transformCellText'],
  45. slots: ['title', 'footer', 'summary', 'emptyText'],
  46. emits: ['expand', 'expandedRowsChange', 'updateInternalRefs', 'update:expandedRowKeys'],
  47. setup: function setup(props, _ref) {
  48. var attrs = _ref.attrs,
  49. slots = _ref.slots,
  50. emit = _ref.emit;
  51. var mergedData = computed(function () {
  52. return props.data || EMPTY_DATA;
  53. });
  54. var hasData = computed(function () {
  55. return !!mergedData.value.length;
  56. });
  57. // ==================== Customize =====================
  58. var mergedComponents = computed(function () {
  59. return mergeObject(props.components, {});
  60. });
  61. var getComponent = function getComponent(path, defaultComponent) {
  62. return getPathValue(mergedComponents.value, path) || defaultComponent;
  63. };
  64. var getRowKey = computed(function () {
  65. var rowKey = props.rowKey;
  66. if (typeof rowKey === 'function') {
  67. return rowKey;
  68. }
  69. return function (record) {
  70. var key = record && record[rowKey];
  71. if (process.env.NODE_ENV !== 'production') {
  72. warning(key !== undefined, 'Each record in table should have a unique `key` prop, or set `rowKey` to an unique primary key.');
  73. }
  74. return key;
  75. };
  76. });
  77. // ====================== Expand ======================
  78. var mergedExpandIcon = computed(function () {
  79. return props.expandIcon || renderExpandIcon;
  80. });
  81. var mergedChildrenColumnName = computed(function () {
  82. return props.childrenColumnName || 'children';
  83. });
  84. var expandableType = computed(function () {
  85. if (props.expandedRowRender) {
  86. return 'row';
  87. }
  88. /* eslint-disable no-underscore-dangle */
  89. /**
  90. * Fix https://github.com/ant-design/ant-design/issues/21154
  91. * This is a workaround to not to break current behavior.
  92. * We can remove follow code after final release.
  93. *
  94. * To other developer:
  95. * Do not use `__PARENT_RENDER_ICON__` in prod since we will remove this when refactor
  96. */
  97. if (props.canExpandable || mergedData.value.some(function (record) {
  98. return record && _typeof(record) === 'object' && record[mergedChildrenColumnName.value];
  99. })) {
  100. return 'nest';
  101. }
  102. /* eslint-enable */
  103. return false;
  104. });
  105. var innerExpandedKeys = shallowRef([]);
  106. var stop = watchEffect(function () {
  107. if (props.defaultExpandedRowKeys) {
  108. innerExpandedKeys.value = props.defaultExpandedRowKeys;
  109. }
  110. if (props.defaultExpandAllRows) {
  111. innerExpandedKeys.value = findAllChildrenKeys(mergedData.value, getRowKey.value, mergedChildrenColumnName.value);
  112. }
  113. });
  114. // defalutXxxx 仅仅第一次生效
  115. stop();
  116. var mergedExpandedKeys = computed(function () {
  117. return new Set(props.expandedRowKeys || innerExpandedKeys.value || []);
  118. });
  119. var onTriggerExpand = function onTriggerExpand(record) {
  120. var key = getRowKey.value(record, mergedData.value.indexOf(record));
  121. var newExpandedKeys;
  122. var hasKey = mergedExpandedKeys.value.has(key);
  123. if (hasKey) {
  124. mergedExpandedKeys.value.delete(key);
  125. newExpandedKeys = _toConsumableArray(mergedExpandedKeys.value);
  126. } else {
  127. newExpandedKeys = [].concat(_toConsumableArray(mergedExpandedKeys.value), [key]);
  128. }
  129. innerExpandedKeys.value = newExpandedKeys;
  130. emit('expand', !hasKey, record);
  131. emit('update:expandedRowKeys', newExpandedKeys);
  132. emit('expandedRowsChange', newExpandedKeys);
  133. };
  134. // Warning if use `expandedRowRender` and nest children in the same time
  135. if (process.env.NODE_ENV !== 'production' && props.expandedRowRender && mergedData.value.some(function (record) {
  136. return Array.isArray(record === null || record === void 0 ? void 0 : record[mergedChildrenColumnName.value]);
  137. })) {
  138. warning(false, '`expandedRowRender` should not use with nested Table');
  139. }
  140. var componentWidth = ref(0);
  141. var _useColumns = useColumns(_objectSpread(_objectSpread({}, toRefs(props)), {}, {
  142. // children,
  143. expandable: computed(function () {
  144. return !!props.expandedRowRender;
  145. }),
  146. expandedKeys: mergedExpandedKeys,
  147. getRowKey: getRowKey,
  148. onTriggerExpand: onTriggerExpand,
  149. expandIcon: mergedExpandIcon
  150. }), computed(function () {
  151. return props.internalHooks === INTERNAL_HOOKS ? props.transformColumns : null;
  152. })),
  153. _useColumns2 = _slicedToArray(_useColumns, 2),
  154. columns = _useColumns2[0],
  155. flattenColumns = _useColumns2[1];
  156. var columnContext = computed(function () {
  157. return {
  158. columns: columns.value,
  159. flattenColumns: flattenColumns.value
  160. };
  161. });
  162. // ====================== Scroll ======================
  163. var fullTableRef = ref();
  164. var scrollHeaderRef = ref();
  165. var scrollBodyRef = ref();
  166. var scrollBodySizeInfo = ref({
  167. scrollWidth: 0,
  168. clientWidth: 0
  169. });
  170. var scrollSummaryRef = ref();
  171. var _useState = useState(false),
  172. _useState2 = _slicedToArray(_useState, 2),
  173. pingedLeft = _useState2[0],
  174. setPingedLeft = _useState2[1];
  175. var _useState3 = useState(false),
  176. _useState4 = _slicedToArray(_useState3, 2),
  177. pingedRight = _useState4[0],
  178. setPingedRight = _useState4[1];
  179. var _useLayoutState = useLayoutState(new Map()),
  180. _useLayoutState2 = _slicedToArray(_useLayoutState, 2),
  181. colsWidths = _useLayoutState2[0],
  182. updateColsWidths = _useLayoutState2[1];
  183. // Convert map to number width
  184. var colsKeys = computed(function () {
  185. return getColumnsKey(flattenColumns.value);
  186. });
  187. var colWidths = computed(function () {
  188. return colsKeys.value.map(function (columnKey) {
  189. return colsWidths.value.get(columnKey);
  190. });
  191. });
  192. var columnCount = computed(function () {
  193. return flattenColumns.value.length;
  194. });
  195. var stickyOffsets = useStickyOffsets(colWidths, columnCount, toRef(props, 'direction'));
  196. var fixHeader = computed(function () {
  197. return props.scroll && validateValue(props.scroll.y);
  198. });
  199. var horizonScroll = computed(function () {
  200. return props.scroll && validateValue(props.scroll.x) || Boolean(props.expandFixed);
  201. });
  202. var fixColumn = computed(function () {
  203. return horizonScroll.value && flattenColumns.value.some(function (_ref2) {
  204. var fixed = _ref2.fixed;
  205. return fixed;
  206. });
  207. });
  208. // Sticky
  209. var stickyRef = ref();
  210. var stickyState = useSticky(toRef(props, 'sticky'), toRef(props, 'prefixCls'));
  211. var summaryFixedInfos = reactive({});
  212. var fixFooter = computed(function () {
  213. var info = Object.values(summaryFixedInfos)[0];
  214. return (fixHeader.value || stickyState.value.isSticky) && info;
  215. });
  216. var summaryCollect = function summaryCollect(uniKey, fixed) {
  217. if (fixed) {
  218. summaryFixedInfos[uniKey] = fixed;
  219. } else {
  220. delete summaryFixedInfos[uniKey];
  221. }
  222. };
  223. // Scroll
  224. var scrollXStyle = ref({});
  225. var scrollYStyle = ref({});
  226. var scrollTableStyle = ref({});
  227. watchEffect(function () {
  228. if (fixHeader.value) {
  229. scrollYStyle.value = {
  230. overflowY: 'scroll',
  231. maxHeight: toPx(props.scroll.y)
  232. };
  233. }
  234. if (horizonScroll.value) {
  235. scrollXStyle.value = {
  236. overflowX: 'auto'
  237. };
  238. // When no vertical scrollbar, should hide it
  239. // https://github.com/ant-design/ant-design/pull/20705
  240. // https://github.com/ant-design/ant-design/issues/21879
  241. if (!fixHeader.value) {
  242. scrollYStyle.value = {
  243. overflowY: 'hidden'
  244. };
  245. }
  246. scrollTableStyle.value = {
  247. width: props.scroll.x === true ? 'auto' : toPx(props.scroll.x),
  248. minWidth: '100%'
  249. };
  250. }
  251. });
  252. var onColumnResize = function onColumnResize(columnKey, width) {
  253. if (isVisible(fullTableRef.value)) {
  254. updateColsWidths(function (widths) {
  255. if (widths.get(columnKey) !== width) {
  256. var newWidths = new Map(widths);
  257. newWidths.set(columnKey, width);
  258. return newWidths;
  259. }
  260. return widths;
  261. });
  262. }
  263. };
  264. var _useTimeoutLock = useTimeoutLock(null),
  265. _useTimeoutLock2 = _slicedToArray(_useTimeoutLock, 2),
  266. setScrollTarget = _useTimeoutLock2[0],
  267. getScrollTarget = _useTimeoutLock2[1];
  268. function forceScroll(scrollLeft, target) {
  269. if (!target) {
  270. return;
  271. }
  272. if (typeof target === 'function') {
  273. target(scrollLeft);
  274. return;
  275. }
  276. var domTarget = target.$el || target;
  277. if (domTarget.scrollLeft !== scrollLeft) {
  278. // eslint-disable-next-line no-param-reassign
  279. domTarget.scrollLeft = scrollLeft;
  280. }
  281. }
  282. var onScroll = function onScroll(_ref3) {
  283. var currentTarget = _ref3.currentTarget,
  284. scrollLeft = _ref3.scrollLeft;
  285. var isRTL = props.direction === 'rtl';
  286. var mergedScrollLeft = typeof scrollLeft === 'number' ? scrollLeft : currentTarget.scrollLeft;
  287. var compareTarget = currentTarget || EMPTY_SCROLL_TARGET;
  288. if (!getScrollTarget() || getScrollTarget() === compareTarget) {
  289. var _stickyRef$value;
  290. setScrollTarget(compareTarget);
  291. forceScroll(mergedScrollLeft, scrollHeaderRef.value);
  292. forceScroll(mergedScrollLeft, scrollBodyRef.value);
  293. forceScroll(mergedScrollLeft, scrollSummaryRef.value);
  294. forceScroll(mergedScrollLeft, (_stickyRef$value = stickyRef.value) === null || _stickyRef$value === void 0 ? void 0 : _stickyRef$value.setScrollLeft);
  295. }
  296. if (currentTarget) {
  297. var scrollWidth = currentTarget.scrollWidth,
  298. clientWidth = currentTarget.clientWidth;
  299. if (isRTL) {
  300. setPingedLeft(-mergedScrollLeft < scrollWidth - clientWidth);
  301. setPingedRight(-mergedScrollLeft > 0);
  302. } else {
  303. setPingedLeft(mergedScrollLeft > 0);
  304. setPingedRight(mergedScrollLeft < scrollWidth - clientWidth);
  305. }
  306. }
  307. };
  308. var triggerOnScroll = function triggerOnScroll() {
  309. if (horizonScroll.value && scrollBodyRef.value) {
  310. onScroll({
  311. currentTarget: scrollBodyRef.value
  312. });
  313. } else {
  314. setPingedLeft(false);
  315. setPingedRight(false);
  316. }
  317. };
  318. var timtout;
  319. var updateWidth = function updateWidth(width) {
  320. if (width !== componentWidth.value) {
  321. triggerOnScroll();
  322. componentWidth.value = fullTableRef.value ? fullTableRef.value.offsetWidth : width;
  323. }
  324. };
  325. var onFullTableResize = function onFullTableResize(_ref4) {
  326. var width = _ref4.width;
  327. clearTimeout(timtout);
  328. if (componentWidth.value === 0) {
  329. updateWidth(width);
  330. return;
  331. }
  332. timtout = setTimeout(function () {
  333. updateWidth(width);
  334. }, 100);
  335. };
  336. watch([horizonScroll, function () {
  337. return props.data;
  338. }, function () {
  339. return props.columns;
  340. }], function () {
  341. if (horizonScroll.value) {
  342. triggerOnScroll();
  343. }
  344. }, {
  345. flush: 'post'
  346. });
  347. var _useState5 = useState(0),
  348. _useState6 = _slicedToArray(_useState5, 2),
  349. scrollbarSize = _useState6[0],
  350. setScrollbarSize = _useState6[1];
  351. useProvideSticky();
  352. onMounted(function () {
  353. nextTick(function () {
  354. var _scrollBodyRef$value, _scrollBodyRef$value2;
  355. triggerOnScroll();
  356. setScrollbarSize(getTargetScrollBarSize(scrollBodyRef.value).width);
  357. scrollBodySizeInfo.value = {
  358. scrollWidth: ((_scrollBodyRef$value = scrollBodyRef.value) === null || _scrollBodyRef$value === void 0 ? void 0 : _scrollBodyRef$value.scrollWidth) || 0,
  359. clientWidth: ((_scrollBodyRef$value2 = scrollBodyRef.value) === null || _scrollBodyRef$value2 === void 0 ? void 0 : _scrollBodyRef$value2.clientWidth) || 0
  360. };
  361. });
  362. });
  363. onUpdated(function () {
  364. nextTick(function () {
  365. var _scrollBodyRef$value3, _scrollBodyRef$value4;
  366. var scrollWidth = ((_scrollBodyRef$value3 = scrollBodyRef.value) === null || _scrollBodyRef$value3 === void 0 ? void 0 : _scrollBodyRef$value3.scrollWidth) || 0;
  367. var clientWidth = ((_scrollBodyRef$value4 = scrollBodyRef.value) === null || _scrollBodyRef$value4 === void 0 ? void 0 : _scrollBodyRef$value4.clientWidth) || 0;
  368. if (scrollBodySizeInfo.value.scrollWidth !== scrollWidth || scrollBodySizeInfo.value.clientWidth !== clientWidth) {
  369. scrollBodySizeInfo.value = {
  370. scrollWidth: scrollWidth,
  371. clientWidth: clientWidth
  372. };
  373. }
  374. });
  375. });
  376. watchEffect(function () {
  377. if (props.internalHooks === INTERNAL_HOOKS && props.internalRefs) {
  378. props.onUpdateInternalRefs({
  379. body: scrollBodyRef.value ? scrollBodyRef.value.$el || scrollBodyRef.value : null
  380. });
  381. }
  382. }, {
  383. flush: 'post'
  384. });
  385. // Table layout
  386. var mergedTableLayout = computed(function () {
  387. if (props.tableLayout) {
  388. return props.tableLayout;
  389. }
  390. // https://github.com/ant-design/ant-design/issues/25227
  391. // When scroll.x is max-content, no need to fix table layout
  392. // it's width should stretch out to fit content
  393. if (fixColumn.value) {
  394. return props.scroll.x === 'max-content' ? 'auto' : 'fixed';
  395. }
  396. if (fixHeader.value || stickyState.value.isSticky || flattenColumns.value.some(function (_ref5) {
  397. var ellipsis = _ref5.ellipsis;
  398. return ellipsis;
  399. })) {
  400. return 'fixed';
  401. }
  402. return 'auto';
  403. });
  404. var emptyNode = function emptyNode() {
  405. var _slots$emptyText;
  406. return hasData.value ? null : ((_slots$emptyText = slots.emptyText) === null || _slots$emptyText === void 0 ? void 0 : _slots$emptyText.call(slots)) || 'No Data';
  407. };
  408. useProvideTable(reactive(_objectSpread(_objectSpread({}, toRefs(reactivePick(props, 'prefixCls', 'direction', 'transformCellText'))), {}, {
  409. getComponent: getComponent,
  410. scrollbarSize: scrollbarSize,
  411. fixedInfoList: computed(function () {
  412. return flattenColumns.value.map(function (_, colIndex) {
  413. return getCellFixedInfo(colIndex, colIndex, flattenColumns.value, stickyOffsets.value, props.direction);
  414. });
  415. }),
  416. isSticky: computed(function () {
  417. return stickyState.value.isSticky;
  418. }),
  419. summaryCollect: summaryCollect
  420. })));
  421. useProvideBody(reactive(_objectSpread(_objectSpread({}, toRefs(reactivePick(props, 'rowClassName', 'expandedRowClassName', 'expandRowByClick', 'expandedRowRender', 'expandIconColumnIndex', 'indentSize'))), {}, {
  422. columns: columns,
  423. flattenColumns: flattenColumns,
  424. tableLayout: mergedTableLayout,
  425. expandIcon: mergedExpandIcon,
  426. expandableType: expandableType,
  427. onTriggerExpand: onTriggerExpand
  428. })));
  429. useProvideResize({
  430. onColumnResize: onColumnResize
  431. });
  432. useProvideExpandedRow({
  433. componentWidth: componentWidth,
  434. fixHeader: fixHeader,
  435. fixColumn: fixColumn,
  436. horizonScroll: horizonScroll
  437. });
  438. // Body
  439. var bodyTable = function bodyTable() {
  440. return _createVNode(Body, {
  441. "data": mergedData.value,
  442. "measureColumnWidth": fixHeader.value || horizonScroll.value || stickyState.value.isSticky,
  443. "expandedKeys": mergedExpandedKeys.value,
  444. "rowExpandable": props.rowExpandable,
  445. "getRowKey": getRowKey.value,
  446. "customRow": props.customRow,
  447. "childrenColumnName": mergedChildrenColumnName.value
  448. }, {
  449. emptyNode: emptyNode
  450. });
  451. };
  452. var bodyColGroup = function bodyColGroup() {
  453. return _createVNode(ColGroup, {
  454. "colWidths": flattenColumns.value.map(function (_ref6) {
  455. var width = _ref6.width;
  456. return width;
  457. }),
  458. "columns": flattenColumns.value
  459. }, null);
  460. };
  461. return function () {
  462. var _slots$summary;
  463. var prefixCls = props.prefixCls,
  464. scroll = props.scroll,
  465. tableLayout = props.tableLayout,
  466. direction = props.direction,
  467. _props$title = props.title,
  468. title = _props$title === void 0 ? slots.title : _props$title,
  469. _props$footer = props.footer,
  470. footer = _props$footer === void 0 ? slots.footer : _props$footer,
  471. id = props.id,
  472. showHeader = props.showHeader,
  473. customHeaderRow = props.customHeaderRow;
  474. var _stickyState$value = stickyState.value,
  475. isSticky = _stickyState$value.isSticky,
  476. offsetHeader = _stickyState$value.offsetHeader,
  477. offsetSummary = _stickyState$value.offsetSummary,
  478. offsetScroll = _stickyState$value.offsetScroll,
  479. stickyClassName = _stickyState$value.stickyClassName,
  480. container = _stickyState$value.container;
  481. var TableComponent = getComponent(['table'], 'table');
  482. var customizeScrollBody = getComponent(['body']);
  483. var summaryNode = (_slots$summary = slots.summary) === null || _slots$summary === void 0 ? void 0 : _slots$summary.call(slots, {
  484. pageData: mergedData.value
  485. });
  486. var groupTableNode = function groupTableNode() {
  487. return null;
  488. };
  489. // Header props
  490. var headerProps = {
  491. colWidths: colWidths.value,
  492. columCount: flattenColumns.value.length,
  493. stickyOffsets: stickyOffsets.value,
  494. customHeaderRow: customHeaderRow,
  495. fixHeader: fixHeader.value,
  496. scroll: scroll
  497. };
  498. if (process.env.NODE_ENV !== 'production' && typeof customizeScrollBody === 'function' && hasData.value && !fixHeader.value) {
  499. warning(false, '`components.body` with render props is only work on `scroll.y`.');
  500. }
  501. if (fixHeader.value || isSticky) {
  502. // >>>>>> Fixed Header
  503. var bodyContent = function bodyContent() {
  504. return null;
  505. };
  506. if (typeof customizeScrollBody === 'function') {
  507. bodyContent = function bodyContent() {
  508. return customizeScrollBody(mergedData.value, {
  509. scrollbarSize: scrollbarSize.value,
  510. ref: scrollBodyRef,
  511. onScroll: onScroll
  512. });
  513. };
  514. headerProps.colWidths = flattenColumns.value.map(function (_ref7, index) {
  515. var width = _ref7.width;
  516. var colWidth = index === columns.value.length - 1 ? width - scrollbarSize.value : width;
  517. if (typeof colWidth === 'number' && !Number.isNaN(colWidth)) {
  518. return colWidth;
  519. }
  520. warning(false, 'When use `components.body` with render props. Each column should have a fixed `width` value.');
  521. return 0;
  522. });
  523. } else {
  524. bodyContent = function bodyContent() {
  525. return _createVNode("div", {
  526. "style": _objectSpread(_objectSpread({}, scrollXStyle.value), scrollYStyle.value),
  527. "onScroll": onScroll,
  528. "ref": scrollBodyRef,
  529. "class": classNames("".concat(prefixCls, "-body"))
  530. }, [_createVNode(TableComponent, {
  531. "style": _objectSpread(_objectSpread({}, scrollTableStyle.value), {}, {
  532. tableLayout: mergedTableLayout.value
  533. })
  534. }, {
  535. default: function _default() {
  536. return [bodyColGroup(), bodyTable(), !fixFooter.value && summaryNode && _createVNode(Footer, {
  537. "stickyOffsets": stickyOffsets.value,
  538. "flattenColumns": flattenColumns.value
  539. }, {
  540. default: function _default() {
  541. return [summaryNode];
  542. }
  543. })];
  544. }
  545. })]);
  546. };
  547. }
  548. // Fixed holder share the props
  549. var fixedHolderProps = _objectSpread(_objectSpread(_objectSpread({
  550. noData: !mergedData.value.length,
  551. maxContentScroll: horizonScroll.value && scroll.x === 'max-content'
  552. }, headerProps), columnContext.value), {}, {
  553. direction: direction,
  554. stickyClassName: stickyClassName,
  555. onScroll: onScroll
  556. });
  557. groupTableNode = function groupTableNode() {
  558. return _createVNode(_Fragment, null, [showHeader !== false && _createVNode(FixedHolder, _objectSpread(_objectSpread({}, fixedHolderProps), {}, {
  559. "stickyTopOffset": offsetHeader,
  560. "class": "".concat(prefixCls, "-header"),
  561. "ref": scrollHeaderRef
  562. }), {
  563. default: function _default(fixedHolderPassProps) {
  564. return _createVNode(_Fragment, null, [_createVNode(Header, fixedHolderPassProps, null), fixFooter.value === 'top' && _createVNode(Footer, fixedHolderPassProps, {
  565. default: function _default() {
  566. return [summaryNode];
  567. }
  568. })]);
  569. }
  570. }), bodyContent(), fixFooter.value && fixFooter.value !== 'top' && _createVNode(FixedHolder, _objectSpread(_objectSpread({}, fixedHolderProps), {}, {
  571. "stickyBottomOffset": offsetSummary,
  572. "class": "".concat(prefixCls, "-summary"),
  573. "ref": scrollSummaryRef
  574. }), {
  575. default: function _default(fixedHolderPassProps) {
  576. return _createVNode(Footer, fixedHolderPassProps, {
  577. default: function _default() {
  578. return [summaryNode];
  579. }
  580. });
  581. }
  582. }), isSticky && scrollBodyRef.value && _createVNode(StickyScrollBar, {
  583. "ref": stickyRef,
  584. "offsetScroll": offsetScroll,
  585. "scrollBodyRef": scrollBodyRef,
  586. "onScroll": onScroll,
  587. "container": container,
  588. "scrollBodySizeInfo": scrollBodySizeInfo.value
  589. }, null)]);
  590. };
  591. } else {
  592. // >>>>>> Unique table
  593. groupTableNode = function groupTableNode() {
  594. return _createVNode("div", {
  595. "style": _objectSpread(_objectSpread({}, scrollXStyle.value), scrollYStyle.value),
  596. "class": classNames("".concat(prefixCls, "-content")),
  597. "onScroll": onScroll,
  598. "ref": scrollBodyRef
  599. }, [_createVNode(TableComponent, {
  600. "style": _objectSpread(_objectSpread({}, scrollTableStyle.value), {}, {
  601. tableLayout: mergedTableLayout.value
  602. })
  603. }, {
  604. default: function _default() {
  605. return [bodyColGroup(), showHeader !== false && _createVNode(Header, _objectSpread(_objectSpread({}, headerProps), columnContext.value), null), bodyTable(), summaryNode && _createVNode(Footer, {
  606. "stickyOffsets": stickyOffsets.value,
  607. "flattenColumns": flattenColumns.value
  608. }, {
  609. default: function _default() {
  610. return [summaryNode];
  611. }
  612. })];
  613. }
  614. })]);
  615. };
  616. }
  617. var ariaProps = pickAttrs(attrs, {
  618. aria: true,
  619. data: true
  620. });
  621. var fullTable = function fullTable() {
  622. var _classNames;
  623. return _createVNode("div", _objectSpread(_objectSpread({}, ariaProps), {}, {
  624. "class": classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, "".concat(prefixCls, "-ping-left"), pingedLeft.value), _defineProperty(_classNames, "".concat(prefixCls, "-ping-right"), pingedRight.value), _defineProperty(_classNames, "".concat(prefixCls, "-layout-fixed"), tableLayout === 'fixed'), _defineProperty(_classNames, "".concat(prefixCls, "-fixed-header"), fixHeader.value), _defineProperty(_classNames, "".concat(prefixCls, "-fixed-column"), fixColumn.value), _defineProperty(_classNames, "".concat(prefixCls, "-scroll-horizontal"), horizonScroll.value), _defineProperty(_classNames, "".concat(prefixCls, "-has-fix-left"), flattenColumns.value[0] && flattenColumns.value[0].fixed), _defineProperty(_classNames, "".concat(prefixCls, "-has-fix-right"), flattenColumns.value[columnCount.value - 1] && flattenColumns.value[columnCount.value - 1].fixed === 'right'), _defineProperty(_classNames, attrs.class, attrs.class), _classNames)),
  625. "style": attrs.style,
  626. "id": id,
  627. "ref": fullTableRef
  628. }), [title && _createVNode(Panel, {
  629. "class": "".concat(prefixCls, "-title")
  630. }, {
  631. default: function _default() {
  632. return [title(mergedData.value)];
  633. }
  634. }), _createVNode("div", {
  635. "class": "".concat(prefixCls, "-container")
  636. }, [groupTableNode()]), footer && _createVNode(Panel, {
  637. "class": "".concat(prefixCls, "-footer")
  638. }, {
  639. default: function _default() {
  640. return [footer(mergedData.value)];
  641. }
  642. })]);
  643. };
  644. if (horizonScroll.value) {
  645. return _createVNode(VCResizeObserver, {
  646. "onResize": onFullTableResize
  647. }, {
  648. default: fullTable
  649. });
  650. }
  651. return fullTable();
  652. };
  653. }
  654. });