es-grid-template 1.9.52 → 1.9.55

package/es/table-component/hook/utils.js

@@ -620,7 +620,9 @@ export function getColIdsBetween(table, a, b) {
 }
 export function getRowIdsBetween(table, a, b) {
   // const ids = table.getRowModel().rows.map(r => r.id);
-  const ids = table.getRowModel().flatRows.map(r => r.id);
+  const flatRows = table.getRowModel().flatRows;
+  const allRows = flatRows.filter((item, index, self) => index === self.findIndex(x => x.id === item.id));
+  const ids = allRows.map(r => r.id);
   const [start, end] = [ids.indexOf(a), ids.indexOf(b)].sort((x, y) => x - y);
   return ids.slice(start, end + 1);
 }
@@ -1366,7 +1368,10 @@ export const getSelectedCellMatrix = (table, startCell, endCell) => {
   };
 
   // const rowIds = table.getRowModel().rows.map(r => r.id);
-  const rowIds = table.getRowModel().flatRows.map(r => r.id);
+
+  const flatRows = table.getRowModel().flatRows;
+  const allRows = flatRows.filter((item, index, self) => index === self.findIndex(x => x.id === item.id));
+  const rowIds = allRows.map(r => r.id);
   const colIds = table.getVisibleLeafColumns().map(c => c.id);
 
   // const colIds = table.getAllLeafColumns().map(c => c.id);
@@ -2238,9 +2243,21 @@ export function isObjEqual(obj1, obj2) {
 }
 
 // Sorting function
-export const sortByType = arr => {
-  if (arr) {
-    return arr.sort((a, b) => {
+export const sortByType = (arr, rowDnd) => {
+  const colDnd = {
+    field: 'drag-handle',
+    width: 50,
+    fixed: 'left',
+    headerText: '',
+    allowFiltering: false,
+    allowResizing: false,
+    allowSortering: false
+  };
+  const cols = rowDnd?.enabled ? [{
+    ...colDnd
+  }, ...arr] : [...arr];
+  if (cols) {
+    return cols.sort((a, b) => {
       if ((a.fixed ?? a.fixedType) === 'left' && (b.fixed ?? b.fixedType) !== 'left') {
         return -1;
       } else if ((a.fixed ?? a.fixedType) !== 'left' && (b.fixed ?? b.fixedType) === 'left') {
@@ -2392,7 +2409,19 @@ export function updateColumnWidthsRecursive(columns, sizing) {
     return updated;
   });
 }
-export function updateWidthsByOther(source, target) {
+export function updateWidthsByOther(source, target
+// rowDnd?: RowDnd
+) {
+  // const columnDnd  = {
+  //   field: 'drag-handle',
+  //   headerText: '',
+  //   fixed: 'left',
+  //   width: 50
+  // }
+
+  // const tg = rowDnd?.enabled ? [{...columnDnd}, ...target] : [...target]
+  // const sour = rowDnd?.enabled ? [{...columnDnd}, ...source] : [...source]
+
   const targetMap = new Map();
 
   // tạo map {field -> width} từ target

package/es/table-component/style.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 // const prefix = "ui-rc";
-// const antdPrefix = "ant";
+// const rcUiPrefix = "ant";
 const fontFamily = 'Montserrat, Helvetica, Arial, serif ';
 // const borderRadius = "6px";
 

package/es/table-component/table/Grid.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { Modal } from 'antd';
+import { Modal } from 'rc-master-ui';
 import { faker } from '@faker-js/faker';
 import { getCoreRowModel, getExpandedRowModel,
 // getFilteredRowModel,
@@ -277,6 +277,7 @@ const Grid = props => {
       active,
       over
     } = event;
+    //  column dnd
     if (active && over && active.id !== over.id) {
       setColumnOrder(cols => {
         const oldIndex = cols.indexOf(active.id);

package/es/table-virtuoso/InternalTable.js

@@ -197,6 +197,8 @@ const InternalTable = props => {
       });
     }
   };
+  console.log('tableData', tableData);
+  console.log('isDataTree', isDataTree);
   const table = useReactTable({
     _features: [OperatorFeature],
     data: tableData,

package/es/table-virtuoso/body/TableBodyCell.js

@@ -1,5 +1,5 @@
 import Space from "rc-master-ui/es/space";
-import { getCommonPinningStyles } from "../hook/utils";
+import { getCommonPinningStyles, getFormat } from "../hook/utils";
 import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
 import classNames from "classnames";
 import React from "react";
@@ -9,9 +9,10 @@ import { renderValueCell, toggleRowSelection } from "../../table-component/hook/
 const renderCellIndex = props => {
   const {
     cell,
-    pagination
+    pagination,
+    isDataTree
   } = props;
-  const parrents = cell.row.getParentRows();
+  const parrents = cell.row.parentId && isDataTree ? cell.row.getParentRows?.() : undefined;
   if (parrents && parrents.length > 0) {
     return /*#__PURE__*/React.createElement("span", {
       className: "ui-rc_cell-content"
@@ -250,10 +251,12 @@ const TableBodyCell = props => {
       className: "ui-rc_cell-content"
     }, renderCellIndex({
       cell,
-      pagination
+      pagination,
+      isDataTree
     })) : renderCellIndex({
       cell,
-      pagination
+      pagination,
+      isDataTree
     }));
   }
   if (cell.column.id === "command") {
@@ -313,8 +316,10 @@ const TableBodyCell = props => {
     })));
   }
   const cellValue = cell.getValue();
+  const colFormat = typeof columnMeta.format === 'function' ? columnMeta.format(record) : columnMeta.format;
+  const cellFormat = getFormat(colFormat, format);
   const rowIndex = cell.row.index;
-  const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, format, false);
+  const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, false);
   const cellContent = columnMeta.template ? typeof columnMeta.template === 'function' ? columnMeta.template({
     field: columnMeta.field,
     index: cell.row.index,

package/lib/ali-table/Grid.d.ts

@@ -17,5 +17,6 @@ declare const Grid: React.ForwardRefExoticComponent<Omit<TableProps, "useVirtual
         vertical?: VirtualEnum;
         header?: VirtualEnum;
     };
+    dataRowIds: any[];
 } & React.RefAttributes<BaseTable>>;
 export default Grid;

package/lib/ali-table/Grid.js

@@ -66,7 +66,8 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     useVirtual,
     useOuterBorder = true,
     showHeader = true,
-    gridLines
+    gridLines,
+    dataRowIds
   } = props;
   const {
     cssVariables
@@ -173,16 +174,20 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       [`${prefix}-grid-line-horizontal`]: gridLines === 'Horizontal',
       [`${prefix}-grid-line-vertical`]: gridLines === 'Vertical',
       [`${prefix}-grid-line-none`]: gridLines === 'None',
-      [`use-outer-border`]: useOuterBorder
+      [`use-outer-border`]: useOuterBorder,
+      [`auto-height`]: !minHeight
+      // [`has-title`]: showToolbar !== false && ( fullScreen !== false || title || topToolbaritems.length > 0)
     }),
     style: {
-      maxHeight: height ?? 700,
+      // maxHeight: height ?? 700,
+      maxHeight: height ?? minHeight,
+      // height: height ?? minHeight,
       minHeight,
       display: 'flex',
       flexDirection: 'column',
       ...artTableWrapperProps.style
     }
-  }, (showToolbar !== false || fullScreen !== false || title || topToolbaritems.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
+  }, showToolbar !== false && (fullScreen !== false || title || topToolbaritems.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(`${prefix}-grid-top`, {})
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -252,6 +257,8 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     isStickyHeader: true,
     stickyBottom: 0,
     stickyTop: 0,
+    isBottom: !!(bottom || pagination && !infiniteScroll),
+    isTitle: !!(showToolbar !== false && (fullScreen !== false || title || topToolbaritems.length > 0)),
     defaultColumnWidth: 100,
     originData: originData,
     format: format
@@ -306,6 +313,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       };
     },
     theme: theme,
+    dataRowIds: dataRowIds,
     footerDataSource: footerDataSource
   })), (bottom || pagination && !infiniteScroll) && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(`${prefix}-grid-bottom`, {})

package/lib/ali-table/InternalTable.js

@@ -14,11 +14,13 @@ var _react = _interopRequireDefault(require("react"));
 require("./base-table/styles.scss");
 var _utils = require("../table-component/hook/utils");
 var _rcMasterUi = require("rc-master-ui");
-var _antd = require("antd");
 var _useLocale = require("../locale/useLocale");
 var _useContext = require("./useContext");
 var _Grid = _interopRequireDefault(require("./Grid"));
 var _selected = require("./utils/selected");
+var _core = require("@dnd-kit/core");
+var _modifiers = require("@dnd-kit/modifiers");
+var _sortable = require("@dnd-kit/sortable");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const InternalTable = props => {
@@ -49,6 +51,7 @@ const InternalTable = props => {
     footerDataSource,
     summary,
     useVirtual,
+    rowDnd,
     ...rest
   } = props;
   const prefix = 'ui-rc';
@@ -88,8 +91,8 @@ const InternalTable = props => {
   const [filterState, setFilterState] = _react.default.useState(undefined);
   const [sortState, setSortState] = _react.default.useState(undefined);
   const columns = _react.default.useMemo(() => {
-    return (0, _utils.sortByType)(propColumns);
-  }, [propColumns]);
+    return (0, _utils.sortByType)(propColumns, rowDnd);
+  }, [propColumns, rowDnd]);
   const convertData = _react.default.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
       return (0, _utils.groupArrayByColumns)(dataSource, groupColumns);
@@ -135,6 +138,7 @@ const InternalTable = props => {
   //   return getInvisibleColumns(columns)
   // }, [columns])
 
+  const dataIds = _react.default.useMemo(() => mergedData.map(it => it.rowId), [mergedData]);
   const columnVisibility = _react.default.useMemo(() => {
     return (0, _utils.getVisibleFields)(columns);
   }, [columns]);
@@ -235,6 +239,27 @@ const InternalTable = props => {
 
   // }
 
+  // reorder rows after drag & drop
+  function handleDragEnd(event) {
+    const {
+      active,
+      over
+    } = event;
+    if (over && active.id !== over.id) {
+      //  data dạng phẳng
+
+      const oldIndex = dataIds.indexOf(active.id);
+      const newIndex = dataIds.indexOf(over.id);
+      const rs = (0, _sortable.arrayMove)(mergedData, oldIndex, newIndex); // this is just a splice util
+
+      if (rowDnd?.onChange) {
+        rowDnd?.onChange({
+          rows: rs
+        });
+      }
+    }
+  }
+  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor, {}), (0, _core.useSensor)(_core.TouchSensor, {}), (0, _core.useSensor)(_core.KeyboardSensor, {}));
   return /*#__PURE__*/_react.default.createElement(_rcMasterUi.ConfigProvider, {
     locale: language,
     theme: {
@@ -293,6 +318,11 @@ const InternalTable = props => {
       lang,
       locale
     }
+  }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    collisionDetection: _core.closestCenter,
+    modifiers: [_modifiers.restrictToVerticalAxis],
+    onDragEnd: handleDragEnd,
+    sensors: sensors
   }, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
     id: id,
     useVirtual: {
@@ -313,8 +343,9 @@ const InternalTable = props => {
     onFilter: onFilter,
     onSorter: onSorter,
     defaultFilter: defaultFilter,
-    defaultSorter: defaultSorter
-  })), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    defaultSorter: defaultSorter,
+    dataRowIds: dataIds
+  })), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Modal, {
     open: isFullScreen,
     footer: null,
     centered: true,
@@ -363,7 +394,8 @@ const InternalTable = props => {
     onFilter: onFilter,
     onSorter: onSorter,
     defaultFilter: defaultFilter,
-    defaultSorter: defaultSorter
-  })))))));
+    defaultSorter: defaultSorter,
+    dataRowIds: dataIds
+  }))))))));
 };
 var _default = exports.default = InternalTable;

package/lib/ali-table/base-table/html-table-default.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { RenderInfo } from './interfaces';
+import type { BaseTableProps } from './table';
+import type { CommandClick, IFormat } from '../../grid-component/type';
+export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowProps' | 'primaryKey' | 'components'>> {
+    tbodyHtmlTag: 'tbody' | 'tfoot';
+    data: any[];
+    originData: any[];
+    format?: IFormat;
+    id: string;
+    commandClick?: (args: CommandClick<any>) => void;
+    horizontalRenderInfo: Pick<RenderInfo, 'flat' | 'visible' | 'horizontalRenderRange' | 'stickyLeftMap' | 'stickyRightMap'>;
+    verticalRenderInfo: {
+        offset: number;
+        first: number;
+        last: number;
+        limit: number;
+    };
+}
+export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey, data, originData, format, commandClick, id, verticalRenderInfo: verInfo, horizontalRenderInfo: hozInfo, components: { Row, Cell, TableBody }, }: HtmlTableProps): JSX.Element;

package/lib/ali-table/base-table/html-table-default.js

@@ -0,0 +1,231 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HtmlTable = HtmlTable;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _internals = require("../internals");
+var _colgroup = require("./colgroup");
+var _SpanManager = _interopRequireDefault(require("./helpers/SpanManager"));
+var _styles = require("./styles");
+var _hooks = require("../../grid-component/hooks");
+var _rcMasterUi = require("rc-master-ui");
+var _Command = _interopRequireDefault(require("../../table-component/components/command/Command"));
+var _useColumns = require("../../table-component/hook/useColumns");
+function HtmlTable({
+  tbodyHtmlTag,
+  getRowProps,
+  primaryKey,
+  data,
+  originData,
+  format,
+  commandClick,
+  id,
+  verticalRenderInfo: verInfo,
+  horizontalRenderInfo: hozInfo,
+  components: {
+    Row,
+    Cell,
+    TableBody
+  }
+}) {
+  const {
+    flat,
+    horizontalRenderRange: hoz
+  } = hozInfo;
+  const spanManager = new _SpanManager.default();
+  const fullFlatCount = flat.full.length;
+  const leftFlatCount = flat.left.length;
+  const rightFlatCount = flat.right.length;
+  const tbody = TableBody != null && tbodyHtmlTag === 'tbody' ? /*#__PURE__*/_react.default.createElement(TableBody, {
+    tbodyProps: {
+      children: data.map(renderRow)
+    }
+  }) : ( /*#__PURE__*/_react.default.createElement(tbodyHtmlTag, null, data.map(renderRow)));
+  return /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement(_colgroup.Colgroup, {
+    descriptors: hozInfo.visible
+  }), tbody);
+  function renderRow(row, i) {
+    const rowIndex = verInfo.offset + i;
+    spanManager.stripUpwards(rowIndex);
+    const rowProps = getRowProps(row, rowIndex);
+    const rowClass = (0, _classnames.default)(_styles.Classes.tableRow, {
+      first: rowIndex === verInfo.first,
+      last: rowIndex === verInfo.last,
+      even: rowIndex % 2 === 0,
+      odd: rowIndex % 2 === 1
+    }, rowProps?.className);
+    const onContextMenu = rowProps?.onContextMenu;
+    const trProps = {
+      ...rowProps,
+      className: rowClass,
+      onContextMenu: tbodyHtmlTag === 'tbody' ? onContextMenu : undefined,
+      'data-rowindex': rowIndex,
+      children: hozInfo.visible.map(descriptor => {
+        if (descriptor.type === 'blank') {
+          return /*#__PURE__*/_react.default.createElement("td", {
+            key: descriptor.blankSide
+          });
+        }
+        return renderBodyCell(row, rowIndex, descriptor.col, descriptor.colIndex);
+      })
+    };
+    const key = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
+    if (Row != null && tbodyHtmlTag === 'tbody') {
+      return /*#__PURE__*/_react.default.createElement(Row, {
+        key,
+        row,
+        rowIndex,
+        trProps
+      });
+    } else {
+      return /*#__PURE__*/_react.default.createElement("tr", (0, _extends2.default)({
+        key: key
+      }, trProps));
+    }
+  }
+  function renderBodyCell(row, rowIndex, column, colIndex) {
+    if (spanManager.testSkip(rowIndex, colIndex)) {
+      return null;
+    }
+    const value = _internals.internals.safeGetValue(column, row, rowIndex);
+    const cellProps = column.getCellProps?.(value, row, rowIndex) ?? {};
+    const a = (0, _useColumns.renderValueCell)(column, value, row, rowIndex, colIndex, format, false);
+
+    // let cellContent: ReactNode = value
+    let cellContent = a;
+
+    // if (column.render) {
+    //   cellContent = column.render(value, row, rowIndex)
+    // }
+    // if (column.field === '#') {
+
+    //   cellContent = findItemPath(originData, row, primaryKey)
+    // }
+
+    if (column.field === 'command') {
+      const commands = column.commandItems ? column.commandItems.map(it => {
+        return {
+          ...it,
+          visible: typeof it.visible === 'function' ? it.visible?.(row) : it.visible
+        };
+      }) : [];
+      cellContent = /*#__PURE__*/_react.default.createElement("div", {
+        className: "ui-rc_cell-content"
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Space, null, commands.filter(it => it.visible !== false).map(item => {
+        return /*#__PURE__*/_react.default.createElement(_Command.default, {
+          id: id,
+          key: item.id,
+          item: item,
+          record: row,
+          onClick: () => {
+            commandClick?.({
+              id: item.id,
+              // rowId: getRowKey(record, index) as any,
+              rowId: row.rowId,
+              rowData: row,
+              index: rowIndex,
+              rows: [...originData]
+            });
+          }
+        });
+      })));
+    }
+    if (column.template) {
+      cellContent = column.template({
+        value,
+        rowData: row,
+        index: rowIndex,
+        field: column.field ?? ''
+      });
+    }
+
+    // 
+
+    let colSpan = 1;
+    let rowSpan = 1;
+    if (column.getSpanRect) {
+      const spanRect = column.getSpanRect(value, row, rowIndex);
+      colSpan = spanRect == null ? 1 : spanRect.right - colIndex;
+      rowSpan = spanRect == null ? 1 : spanRect.bottom - rowIndex;
+    } else {
+      if (cellProps.colSpan != null) {
+        colSpan = cellProps.colSpan;
+      }
+      if (cellProps.rowSpan != null) {
+        rowSpan = cellProps.rowSpan;
+      }
+    }
+
+    // rowSpan/colSpan should not be too large to avoid affecting cells that are not rendered due to virtual scrolling
+    rowSpan = Math.min(rowSpan, verInfo.limit - rowIndex);
+    colSpan = Math.min(colSpan, leftFlatCount + hoz.rightIndex - colIndex);
+    const hasSpan = colSpan > 1 || rowSpan > 1;
+    if (hasSpan) {
+      spanManager.add(rowIndex, colIndex, colSpan, rowSpan);
+    }
+    const positionStyle = {};
+    if (colIndex < leftFlatCount) {
+      positionStyle.position = 'sticky';
+      positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
+    } else if (colIndex >= fullFlatCount - rightFlatCount) {
+      positionStyle.position = 'sticky';
+      positionStyle.right = hozInfo.stickyRightMap.get(colIndex);
+    }
+    const tdProps = {
+      ...cellProps,
+      className: (0, _classnames.default)(_styles.Classes.tableCell, cellProps.className, {
+        first: colIndex === 0,
+        last: colIndex + colSpan === fullFlatCount,
+        'lock-left': colIndex < leftFlatCount,
+        'lock-right': colIndex >= fullFlatCount - rightFlatCount
+      }),
+      ...(hasSpan ? {
+        colSpan,
+        rowSpan
+      } : null),
+      style: {
+        textAlign: column.textAlign,
+        ...cellProps.style,
+        ...positionStyle
+      },
+      // children: <div className='ui-rc_cell-content'>{cellContent}</div>
+
+      children: cellContent
+      // children: () => {
+      //   return (
+      //     <span className='abcccc'>{cellContent}</span>
+      //   )
+      // },
+    };
+    if (tbodyHtmlTag === 'tfoot') {
+      if (!_hooks.nonActionColumn.includes(column.field) && column.isSummary !== false) {
+        return /*#__PURE__*/_react.default.createElement("td", (0, _extends2.default)({
+          key: colIndex
+        }, tdProps));
+      } else {
+        return /*#__PURE__*/_react.default.createElement("td", (0, _extends2.default)({
+          key: colIndex
+        }, tdProps), '');
+      }
+    }
+    if (Cell != null && tbodyHtmlTag === 'tbody') {
+      return /*#__PURE__*/_react.default.createElement(Cell, {
+        key: colIndex,
+        tdProps: tdProps,
+        row: row,
+        rowIndex: rowIndex,
+        column: column,
+        colIndex: colIndex
+      });
+    } else {
+      return /*#__PURE__*/_react.default.createElement("td", (0, _extends2.default)({
+        key: colIndex
+      }, tdProps));
+    }
+  }
+}

package/lib/ali-table/base-table/html-table-new.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { RenderInfo } from './interfaces';
+import type { BaseTableProps } from './table';
+import type { CommandClick, IFormat } from '../../grid-component/type';
+export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowProps' | 'primaryKey' | 'components'>> {
+    tbodyHtmlTag: 'tbody' | 'tfoot';
+    data: any[];
+    originData: any[];
+    format?: IFormat;
+    id: string;
+    commandClick?: (args: CommandClick<any>) => void;
+    horizontalRenderInfo: Pick<RenderInfo, 'flat' | 'visible' | 'horizontalRenderRange' | 'stickyLeftMap' | 'stickyRightMap'>;
+    verticalRenderInfo: {
+        offset: number;
+        first: number;
+        last: number;
+        limit: number;
+    };
+}
+export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey, data, originData, format, commandClick, id, verticalRenderInfo: verInfo, horizontalRenderInfo: hozInfo, components: { Row, Cell, TableBody }, }: HtmlTableProps): JSX.Element;