@douyinfe/semi-ui 2.1.0-beta.2 → 2.1.0-next.2

package/lib/cjs/table/TableCell.d.ts

@@ -0,0 +1,124 @@
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { TableCellAdapter } from '@douyinfe/semi-foundation/lib/cjs/table/cellFoundation';
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+import { ColumnProps } from './interface';
+export interface TableCellProps extends BaseProps {
+    record?: Record<string, any>;
+    prefixCls?: string;
+    index?: number;
+    fixedLeft?: boolean | number;
+    lastFixedLeft?: boolean;
+    fixedRight?: boolean | number;
+    firstFixedRight?: boolean;
+    indent?: number;
+    indentSize?: number;
+    column?: ColumnProps;
+    /**
+      * Does the first column include expandIcon
+      * When hideExpandedColumn is true or isSection is true
+      * expandIcon is a custom icon or true
+      */
+    expandIcon?: ReactNode | boolean;
+    renderExpandIcon?: (record: Record<string, any>) => ReactNode;
+    hideExpandedColumn?: boolean;
+    component?: any;
+    onClick?: (record: Record<string, any>, e: React.MouseEvent) => void;
+    onDidUpdate?: (ref: React.MutableRefObject<any>) => void;
+    isSection?: boolean;
+    width?: string | number;
+    height?: string | number;
+    selected?: boolean;
+    expanded?: boolean;
+    disabled?: boolean;
+}
+export default class TableCell extends BaseComponent<TableCellProps, Record<string, any>> {
+    static contextType: React.Context<import("./table-context").TableContextProps>;
+    static defaultProps: {
+        indent: number;
+        indentSize: 20;
+        onClick: (...args: any[]) => void;
+        prefixCls: "semi-table";
+        component: string;
+        onDidUpdate: (...args: any[]) => void;
+        column: {};
+    };
+    static propTypes: {
+        record: PropTypes.Requireable<object>;
+        prefixCls: PropTypes.Requireable<string>;
+        index: PropTypes.Requireable<number>;
+        fixedLeft: PropTypes.Requireable<number | boolean>;
+        lastFixedLeft: PropTypes.Requireable<boolean>;
+        fixedRight: PropTypes.Requireable<number | boolean>;
+        firstFixedRight: PropTypes.Requireable<boolean>;
+        indent: PropTypes.Requireable<number>;
+        indentSize: PropTypes.Requireable<number>;
+        column: PropTypes.Requireable<object>;
+        expandIcon: PropTypes.Requireable<any>;
+        renderExpandIcon: PropTypes.Requireable<(...args: any[]) => any>;
+        hideExpandedColumn: PropTypes.Requireable<boolean>;
+        component: PropTypes.Requireable<any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onDidUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        isSection: PropTypes.Requireable<boolean>;
+        width: PropTypes.Requireable<string | number>;
+        height: PropTypes.Requireable<string | number>;
+        selected: PropTypes.Requireable<boolean>;
+        expanded: PropTypes.Requireable<boolean>;
+    };
+    get adapter(): TableCellAdapter;
+    ref: React.MutableRefObject<any>;
+    constructor(props: TableCellProps);
+    /**
+     * Control whether to execute the render function of the cell
+     * 1. Scenes that return true
+     *  - The cell contains the selection state, you need to calculate whether its selection state has changed during selection
+     *  - The cell contains the folding state, it needs to be calculated when the folding state has changed
+     * 2. Scenarios that return false
+     *  - Cells without table operation operation status, only need to judge that their props have changed
+     *    At this time, the update of the table cell is controlled by the user. At this time, its update will not affect other cells
+     *
+     * 控制是否执行cell的render函数
+     * 1. 返回true的场景
+     *  - cell内包含选择状态，需要在选择时计算它的选择态是否发生变化
+     *  - cell内包含折叠状态，需要在折叠时计算它的折叠态是否发生了变化
+     * 2. 返回false的场景
+     *  - 没有table操作操作状态的cell，只需判断自己的props发生了变化
+     *    此时table cell的更新由用户自己控制，此时它的更新不会影响其他cell
+     *
+     * @param {*} nextProps
+     * @returns
+     */
+    shouldComponentUpdate(nextProps: TableCellProps): boolean;
+    componentDidUpdate(): void;
+    setRef: (ref: React.MutableRefObject<any>) => React.MutableRefObject<any>;
+    handleClick: (e: React.MouseEvent) => void;
+    getTdProps(): {
+        tdProps: {
+            style?: Partial<React.CSSProperties>;
+        };
+        customCellProps: {};
+    };
+    /**
+     * We should return undefined if no dataIndex is specified, but in order to
+     * be compatible with object-path's behavior, we return the record object instead.
+     */
+    renderText(tdProps: {
+        style?: React.CSSProperties;
+        colSpan?: number;
+        rowSpan?: number;
+    }): {
+        text: any;
+        indentText: JSX.Element;
+        rowSpan: number;
+        colSpan: number;
+        realExpandIcon: React.ReactNode;
+        tdProps: {
+            style?: React.CSSProperties;
+            colSpan?: number;
+            rowSpan?: number;
+        };
+    };
+    renderInner(text: ReactNode, indentText: ReactNode, realExpandIcon: ReactNode): any;
+    render(): JSX.Element;
+}

package/lib/cjs/table/TableCell.js

@@ -0,0 +1,404 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _merge2 = _interopRequireDefault(require("lodash/merge"));
+
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
+
+var _omit2 = _interopRequireDefault(require("lodash/omit"));
+
+var _set2 = _interopRequireDefault(require("lodash/set"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
+
+var _cellFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/table/cellFoundation"));
+
+var _utils = require("@douyinfe/semi-foundation/lib/cjs/table/utils");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _tableContext = _interopRequireDefault(require("./table-context"));
+
+var _utils2 = require("./utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable prefer-destructuring */
+
+/* eslint-disable eqeqeq */
+function isInvalidRenderCellText(text) {
+  return text && ! /*#__PURE__*/_react.default.isValidElement(text) && Object.prototype.toString.call(text) === '[object Object]';
+}
+
+class TableCell extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.setRef = ref => this.ref = ref;
+
+    this.handleClick = e => {
+      this.foundation.handleClick(e);
+      const customCellProps = this.adapter.getCache('customCellProps');
+
+      if (customCellProps && typeof customCellProps.onClick === 'function') {
+        customCellProps.onClick(e);
+      }
+    };
+
+    this.ref = /*#__PURE__*/(0, _react.createRef)();
+    this.foundation = new _cellFoundation.default(this.adapter);
+  }
+
+  get adapter() {
+    var _this = this;
+
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      notifyClick: function () {
+        const {
+          onClick
+        } = _this.props;
+
+        if (typeof onClick === 'function') {
+          onClick(...arguments);
+        }
+      }
+    });
+  }
+  /**
+   * Control whether to execute the render function of the cell
+   * 1. Scenes that return true
+   *  - The cell contains the selection state, you need to calculate whether its selection state has changed during selection
+   *  - The cell contains the folding state, it needs to be calculated when the folding state has changed
+   * 2. Scenarios that return false
+   *  - Cells without table operation operation status, only need to judge that their props have changed
+   *    At this time, the update of the table cell is controlled by the user. At this time, its update will not affect other cells
+   *
+   * 控制是否执行cell的render函数
+   * 1. 返回true的场景
+   *  - cell内包含选择状态，需要在选择时计算它的选择态是否发生变化
+   *  - cell内包含折叠状态，需要在折叠时计算它的折叠态是否发生了变化
+   * 2. 返回false的场景
+   *  - 没有table操作操作状态的cell，只需判断自己的props发生了变化
+   *    此时table cell的更新由用户自己控制，此时它的更新不会影响其他cell
+   *
+   * @param {*} nextProps
+   * @returns
+   */
+
+
+  shouldComponentUpdate(nextProps) {
+    const props = this.props;
+    const {
+      column,
+      expandIcon
+    } = props;
+    const cellInSelectionColumn = (0, _utils.isSelectionColumn)(column); // The expand button may be in a separate column or in the first data column
+
+    const columnHasExpandIcon = (0, _utils.isExpandedColumn)(column) || expandIcon;
+
+    if ((cellInSelectionColumn || columnHasExpandIcon) && !(0, _isEqual2.default)(nextProps, this.props)) {
+      return true;
+    } else {
+      const omitProps = ['selected', 'expanded', 'expandIcon', 'disabled'];
+      const propsOmitSelected = (0, _omit2.default)(props, omitProps);
+      const nextPropsOmitSelected = (0, _omit2.default)(nextProps, omitProps);
+
+      if (!(0, _isEqual2.default)(nextPropsOmitSelected, propsOmitSelected)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  componentDidUpdate() {
+    this.props.onDidUpdate(this.ref);
+  }
+
+  getTdProps() {
+    const {
+      record,
+      index,
+      column = {},
+      fixedLeft,
+      fixedRight,
+      width,
+      height
+    } = this.props;
+    let tdProps = {};
+    let customCellProps = {};
+    const fixedLeftFlag = fixedLeft || typeof fixedLeft === 'number';
+    const fixedRightFlag = fixedRight || typeof fixedRight === 'number';
+
+    if (fixedLeftFlag) {
+      (0, _set2.default)(tdProps, 'style.left', typeof fixedLeft === 'number' ? fixedLeft : 0);
+    } else if (fixedRightFlag) {
+      (0, _set2.default)(tdProps, 'style.right', typeof fixedRight === 'number' ? fixedRight : 0);
+    }
+
+    if (width != null) {
+      (0, _set2.default)(tdProps, 'style.width', width);
+    }
+
+    if (height != null) {
+      (0, _set2.default)(tdProps, 'style.height', height);
+    }
+
+    if (column.onCell) {
+      customCellProps = column.onCell(record, index);
+      this.adapter.setCache('customCellProps', (0, _assign.default)({}, customCellProps));
+      tdProps = (0, _assign.default)((0, _assign.default)({}, tdProps), (0, _omit2.default)(customCellProps, ['style', 'className', 'onClick']));
+      const customCellStyle = (0, _get2.default)(customCellProps, 'style') || {};
+      tdProps.style = (0, _assign.default)((0, _assign.default)({}, tdProps.style), customCellStyle);
+    }
+
+    if (column.align) {
+      tdProps.style = (0, _assign.default)((0, _assign.default)({}, tdProps.style), {
+        textAlign: column.align
+      });
+    }
+
+    return {
+      tdProps,
+      customCellProps
+    };
+  }
+  /**
+   * We should return undefined if no dataIndex is specified, but in order to
+   * be compatible with object-path's behavior, we return the record object instead.
+   */
+
+
+  renderText(tdProps) {
+    var _context;
+
+    const {
+      record,
+      indentSize,
+      prefixCls,
+      indent,
+      index,
+      expandIcon,
+      renderExpandIcon,
+      column = {}
+    } = this.props;
+    const {
+      dataIndex,
+      render,
+      useFullRender
+    } = column;
+    let text, colSpan, rowSpan;
+
+    if (typeof dataIndex === 'number') {
+      text = (0, _get2.default)(record, dataIndex);
+    } else if (!dataIndex || dataIndex.length === 0) {
+      text = record;
+    } else {
+      text = (0, _get2.default)(record, dataIndex);
+    }
+
+    const indentText = indent && indentSize ? /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        paddingLeft: "".concat(indentSize * indent, "px")
+      },
+      className: (0, _concat.default)(_context = "".concat(prefixCls, "-row-indent indent-level-")).call(_context, indent)
+    }) : null; // column.render
+
+    const realExpandIcon = typeof renderExpandIcon === 'function' ? renderExpandIcon(record) : expandIcon;
+
+    if (render) {
+      const renderOptions = {
+        expandIcon: realExpandIcon
+      }; // column.useFullRender
+
+      if (useFullRender) {
+        const {
+          renderSelection
+        } = this.context;
+        const realSelection = typeof renderSelection === 'function' ? renderSelection(record) : null;
+        (0, _assign.default)(renderOptions, {
+          selection: realSelection,
+          indentText
+        });
+      }
+
+      text = render(text, record, index, renderOptions);
+
+      if (isInvalidRenderCellText(text)) {
+        // eslint-disable-next-line no-param-reassign
+        tdProps = text.props ? (0, _merge2.default)(tdProps, text.props) : tdProps;
+        colSpan = tdProps.colSpan;
+        rowSpan = tdProps.rowSpan;
+        text = text.children;
+      }
+    }
+
+    return {
+      text,
+      indentText,
+      rowSpan,
+      colSpan,
+      realExpandIcon,
+      tdProps
+    };
+  }
+
+  renderInner(text, indentText, realExpandIcon) {
+    const {
+      prefixCls,
+      isSection,
+      expandIcon,
+      column = {}
+    } = this.props;
+    const {
+      tableWidth,
+      anyColumnFixed
+    } = this.context;
+    const {
+      useFullRender
+    } = column;
+    let inner = null;
+
+    if (useFullRender) {
+      inner = text;
+    } else {
+      inner = [/*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: 'indentText'
+      }, indentText), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: 'expandIcon'
+      }, expandIcon ? realExpandIcon : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: 'text'
+      }, text)];
+    }
+
+    if (isSection) {
+      inner = /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(prefixCls, "-section-inner")),
+        style: {
+          width: anyColumnFixed ? (0, _utils2.amendTableWidth)(tableWidth) : undefined
+        }
+      }, inner);
+    }
+
+    return inner;
+  }
+
+  render() {
+    const {
+      prefixCls,
+      column = {},
+      component: BodyCell,
+      fixedLeft,
+      fixedRight,
+      lastFixedLeft,
+      firstFixedRight
+    } = this.props;
+    const {
+      className
+    } = column;
+    const fixedLeftFlag = fixedLeft || typeof fixedLeft === 'number';
+    const fixedRightFlag = fixedRight || typeof fixedRight === 'number';
+    const {
+      tdProps,
+      customCellProps
+    } = this.getTdProps();
+    const renderTextResult = this.renderText(tdProps);
+    let {
+      text
+    } = renderTextResult;
+    const {
+      indentText,
+      rowSpan,
+      colSpan,
+      realExpandIcon,
+      tdProps: newTdProps
+    } = renderTextResult;
+
+    if (rowSpan === 0 || colSpan === 0) {
+      return null;
+    }
+
+    if (isInvalidRenderCellText(text)) {
+      text = null;
+    }
+
+    const inner = this.renderInner(text, indentText, realExpandIcon);
+    const columnCls = (0, _classnames.default)(className, "".concat(prefixCls, "-row-cell"), (0, _get2.default)(customCellProps, 'className'), {
+      ["".concat(prefixCls, "-cell-fixed-left")]: fixedLeftFlag,
+      ["".concat(prefixCls, "-cell-fixed-left-last")]: lastFixedLeft,
+      ["".concat(prefixCls, "-cell-fixed-right")]: fixedRightFlag,
+      ["".concat(prefixCls, "-cell-fixed-right-first")]: firstFixedRight
+    });
+    return /*#__PURE__*/_react.default.createElement(BodyCell, (0, _assign.default)({
+      className: columnCls,
+      onClick: this.handleClick
+    }, newTdProps, {
+      ref: this.setRef
+    }), inner);
+  }
+
+}
+
+exports.default = TableCell;
+TableCell.contextType = _tableContext.default;
+TableCell.defaultProps = {
+  indent: 0,
+  indentSize: _constants.numbers.DEFAULT_INDENT_WIDTH,
+  onClick: _noop2.default,
+  prefixCls: _constants.cssClasses.PREFIX,
+  component: 'td',
+  onDidUpdate: _noop2.default,
+  column: {}
+};
+TableCell.propTypes = {
+  record: _propTypes.default.object,
+  prefixCls: _propTypes.default.string,
+  index: _propTypes.default.number,
+  fixedLeft: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.number]),
+  lastFixedLeft: _propTypes.default.bool,
+  fixedRight: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.number]),
+  firstFixedRight: _propTypes.default.bool,
+  indent: _propTypes.default.number,
+  indentSize: _propTypes.default.number,
+  column: _propTypes.default.object,
+  expandIcon: _propTypes.default.any,
+  renderExpandIcon: _propTypes.default.func,
+  hideExpandedColumn: _propTypes.default.bool,
+  component: _propTypes.default.any,
+  onClick: _propTypes.default.func,
+  onDidUpdate: _propTypes.default.func,
+  isSection: _propTypes.default.bool,
+  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  selected: _propTypes.default.bool,
+  expanded: _propTypes.default.bool
+};

package/lib/cjs/table/TableContextProvider.d.ts

@@ -0,0 +1,3 @@
+import { TableContextProps } from './table-context';
+declare const TableContextProvider: ({ children, anyColumnFixed, flattenedColumns, tableWidth, headWidths, setHeadWidths, getHeadWidths, getCellWidths, handleRowExpanded, renderExpandIcon, renderSelection, getVirtualizedListRef, setBodyHasScrollbar, }: TableContextProps) => JSX.Element;
+export default TableContextProvider;

package/lib/cjs/table/TableContextProvider.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _tableContext = _interopRequireDefault(require("./table-context"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const TableContextProvider = _ref => {
+  let {
+    children,
+    anyColumnFixed,
+    flattenedColumns,
+    tableWidth,
+    headWidths,
+    setHeadWidths,
+    getHeadWidths,
+    getCellWidths,
+    handleRowExpanded,
+    renderExpandIcon,
+    renderSelection,
+    getVirtualizedListRef,
+    setBodyHasScrollbar
+  } = _ref;
+  const tableContextValue = (0, _react.useMemo)(() => ({
+    anyColumnFixed,
+    flattenedColumns,
+    renderExpandIcon,
+    renderSelection,
+    setHeadWidths,
+    getHeadWidths,
+    getCellWidths,
+    headWidths,
+    tableWidth,
+    handleRowExpanded,
+    getVirtualizedListRef,
+    setBodyHasScrollbar
+  }), [anyColumnFixed, flattenedColumns, renderExpandIcon, renderSelection, setHeadWidths, getHeadWidths, getCellWidths, headWidths, tableWidth, handleRowExpanded, getVirtualizedListRef, setBodyHasScrollbar]);
+  return /*#__PURE__*/_react.default.createElement(_tableContext.default.Provider, {
+    value: tableContextValue
+  }, children);
+};
+
+var _default = TableContextProvider;
+exports.default = _default;

package/lib/cjs/table/TableHeader.d.ts

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react';
+import { BaseProps } from '../_base/baseComponent';
+import { Fixed, TableComponents, OnHeaderRow } from './interface';
+export interface TableHeaderProps extends BaseProps {
+    columns?: any[];
+    components?: TableComponents;
+    fixed?: Fixed;
+    forwardedRef?: React.MutableRefObject<HTMLDivElement> | ((instance: HTMLDivElement) => void);
+    onDidUpdate?: (ref: React.MutableRefObject<any>) => void;
+    onHeaderRow?: OnHeaderRow<any>;
+    prefixCls?: string;
+    selectedRowKeysSet: Set<any>;
+}
+export interface TableHeaderCell {
+    key: string | number;
+    className: string;
+    children: ReactNode;
+    column: any[];
+    colStart: number;
+    level: number;
+    parents: any[];
+    hasSubColumns?: boolean;
+    rowSpan?: number;
+    colSpan?: number;
+    colEnd?: number;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<TableHeaderProps, "forwardedRef"> & React.RefAttributes<HTMLDivElement>>;
+export default _default;