es-grid-template 1.8.64 → 1.8.65

package/es/table-virtuoso/ColumnsGroup/ColumnsGroup.js

@@ -0,0 +1,232 @@
+import { Group } from "becoxy-icons";
+import React, { useRef, useState } from "react";
+// import {
+//   // groupArrayByColumns,
+//   // ungroupArray,
+//   // useOnClickOutside
+// } from "../../hooks"
+
+import { Button, Popover, Tooltip } from "antd";
+// import {SettingOutlined} from "@ant-design/icons";
+import { Select } from "rc-master-ui";
+import styled from "styled-components";
+import { customFilterOption } from "../../grid-component/hooks";
+const BoxAction = styled.div.withConfig({
+  displayName: "BoxAction",
+  componentId: "es-grid-template__sc-z2q149-0"
+})(["padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
+export const ColumnsGroup = props => {
+  const {
+    columns,
+    columnsGrouped,
+    onSubmit,
+    unClearableLevel,
+    defaultGroupColumns,
+    t
+  } = props;
+  const menuRef = useRef();
+  const [tempGroup, setTempGroup] = useState([]);
+  const [clicked, setClicked] = useState(false);
+  console.log('columns', columns);
+  console.log('columnsGrouped', columnsGrouped);
+  const rsCol = React.useMemo(() => {
+    return columns.filter(it => it.visible !== false && !tempGroup.includes(it.field) && it.field !== '#' && it.field !== 'selection_column' && it.field !== 'command');
+  }, [columns, tempGroup]);
+  console.log('rsCol', rsCol);
+  const options = React.useMemo(() => {
+    return rsCol.map(it => ({
+      ...it,
+      value: it.field,
+      label: t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText
+    }));
+  }, [rsCol, t]);
+
+  // React.useEffect(() => {
+  //   if(columnsGrouped) {
+  //     setTempGroup([...columnsGrouped])
+  //   }
+  //
+  // }, [!!columnsGrouped])
+
+  const onChangeGroupColumns = (option, index) => {
+    // if (option) {
+    //   tempGroup[index] = option
+    // } else {
+    //   tempGroup.splice(index, 1)
+    // }
+    // setTempGroup([...tempGroup])
+
+    const cloneTemp = [...tempGroup];
+    if (option) {
+      cloneTemp[index] = option;
+    } else {
+      cloneTemp.splice(index, 1);
+    }
+    setTempGroup([...cloneTemp]);
+  };
+  const handleGroup = () => {
+    // setColumnsGrouped([...tempGroup])
+    setClicked(false);
+    // const dt = ungroupArray(dataSource)
+
+    // const rs = groupArrayByColumns(dt, [...tempGroup])
+
+    // setResource([...rs])
+    onSubmit([...tempGroup]);
+  };
+  const handleClear = () => {
+    // setColumnsGrouped([])
+    setTempGroup(defaultGroupColumns ? defaultGroupColumns : []);
+    // setIsOpen(false)
+    setClicked(false);
+    // const dt = ungroupArray(dataSource)
+
+    // const rs = groupArrayByColumns(dt, [])
+
+    // setResource([...rs])
+    onSubmit(defaultGroupColumns ? defaultGroupColumns : []);
+  };
+  const handleClickChange = open => {
+    setClicked(open);
+    if (open) {
+      if (columnsGrouped) {
+        setTempGroup([...columnsGrouped]);
+      }
+    }
+    if (!open) {
+      setTempGroup([]);
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover, {
+    placement: 'bottomLeft',
+    content: /*#__PURE__*/React.createElement("div", {
+      style: {
+        minWidth: 250
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: menuRef,
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      className: 'fw-bold'
+    }, "Nh\xF3m d\u1EEF li\u1EC7u theo c\u1ED9t"), /*#__PURE__*/React.createElement("div", {
+      className: 'mb-1',
+      style: {
+        marginBottom: '1rem'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      className: 'm-0',
+      style: {
+        margin: 0
+      }
+    }, "M\u1EE9c 1"), /*#__PURE__*/React.createElement(Select, {
+      style: {
+        width: '100%'
+      },
+      showSearch: true
+      // labelInValue={true}
+      // options={columns.filter((it: any) => !tempGroup.includes(it.field))}
+      // options={columns && columns.length > 0 ? options : []}
+      ,
+      options: options,
+      value: tempGroup?.[0],
+      onChange: val => onChangeGroupColumns(val, 0),
+      allowClear: !tempGroup?.[1] && !(unClearableLevel && unClearableLevel - 1 >= 0)
+      // fieldNames={{
+      //   value: 'field',
+      //   label: 'headerText'
+      // }}
+      ,
+      labelRender: labelProps => {
+        const it = columns.find(col => col.field === labelProps.value);
+        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
+      },
+      filterOption: customFilterOption
+      // hideSelectedOptions
+    })), /*#__PURE__*/React.createElement("div", {
+      className: 'mb-1',
+      style: {
+        marginBottom: '1rem'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      className: 'm-0',
+      style: {
+        margin: 0
+      }
+    }, "M\u1EE9c 2"), /*#__PURE__*/React.createElement(Select, {
+      showSearch: true,
+      style: {
+        width: '100%'
+      },
+      options: options,
+      value: tempGroup?.[1],
+      onChange: val => onChangeGroupColumns(val, 1),
+      allowClear: !tempGroup?.[2] && !(unClearableLevel && unClearableLevel - 2 >= 0)
+      // hideSelectedOptions
+      // fieldNames={{
+      //   value: 'field',
+      //   label: 'headerText'
+      // }}
+      ,
+      labelRender: labelProps => {
+        const it = columns.find(col => col.field === labelProps.value);
+        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
+      },
+      filterOption: customFilterOption
+    })), /*#__PURE__*/React.createElement("div", {
+      className: 'mb-1',
+      style: {
+        marginBottom: '1rem'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      className: 'm-0',
+      style: {
+        margin: 0
+      }
+    }, "M\u1EE9c 3"), /*#__PURE__*/React.createElement(Select, {
+      style: {
+        width: '100%'
+      },
+      options: options,
+      showSearch: true,
+      value: tempGroup?.[2],
+      onChange: val => onChangeGroupColumns(val, 2),
+      allowClear: !!tempGroup?.[2] && !(unClearableLevel && unClearableLevel - 3 >= 0)
+      // fieldNames={{
+      //   value: 'field',
+      //   label: 'headerText'
+      // }}
+      ,
+      labelRender: labelProps => {
+        const it = columns.find(col => col.field === labelProps.value);
+        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
+      },
+      filterOption: customFilterOption
+    }))), /*#__PURE__*/React.createElement(BoxAction, {
+      className: 'px-1'
+    }, /*#__PURE__*/React.createElement(Button
+    // className={classnames('btn-action btn-action-submit', {
+    //   // disable: !columns.find((item) => item.visible !== false || item.visible)
+    // })}
+    , {
+      onClick: handleGroup
+      // disabled={!columns.find((item) => item.visible !== false || item.visible)}
+    }, t ? t('Thực hiện') : 'Thực hiện'), /*#__PURE__*/React.createElement(Button, {
+      className: 'btn-action btn-action-cancel',
+      onClick: handleClear
+    }, t ? t('Clear') : 'Clear'))),
+    trigger: "click",
+    open: clicked,
+    onOpenChange: handleClickChange,
+    arrow: false
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    arrow: false,
+    title: 'Nhóm dữ liệu'
+  }, /*#__PURE__*/React.createElement(Group, {
+    fontSize: 18,
+    style: {
+      cursor: 'pointer'
+    }
+  }))));
+};

package/es/table-virtuoso/ColumnsGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './ColumnsGroup';

package/es/table-virtuoso/ColumnsGroup/index.js

@@ -0,0 +1 @@
+export * from "./ColumnsGroup";

package/es/{grid-component → table-virtuoso}/InternalTable.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import 'react-resizable/css/styles.css';
-import type { GridTableProps } from "./type";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
-import './styles.scss';
+import type { TableProps } from '../table-component/type';
 export declare const SELECTION_COLUMN: {};
-declare const InternalTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
+declare const InternalTable: <RecordType extends object>(props: TableProps<RecordType>) => React.JSX.Element;
 export default InternalTable;

package/es/table-virtuoso/InternalTable.js

@@ -0,0 +1,413 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import React, { Fragment, useState } from 'react';
+import 'react-resizable/css/styles.css';
+import dayjs from 'dayjs';
+import 'dayjs/locale/es';
+import 'dayjs/locale/vi';
+
+// import './style.scss'
+
+import { faker } from '@faker-js/faker';
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import { getCoreRowModel, getExpandedRowModel, getGroupedRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
+import { addRowIdArray, convertFlatColumn1, convertToObj, convertToObjTrue, filterDataByColumns, findAllChildrenKeys2, flatColumns2, getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns, isTreeArray, removeKeys } from "./hook/utils";
+import { convertToTanStackColumns } from "./hook/useColumns";
+// import { convertColumns } from './hook/convert'
+import { removeInvisibleColumns } from "../grid-component/hooks";
+import Grid from "./table/Grid";
+import { removeColumns } from "../table-component/hook/utils";
+import { OperatorFeature } from "../table-component/features/operator";
+// import { ColumnsGroup } from '../grid-component/ColumnsGroup'
+
+dayjs.extend(customParseFormat);
+export const SELECTION_COLUMN = {};
+const InternalTable = props => {
+  const {
+    t,
+    columns: propsColumns,
+    // columns,
+    lang,
+    locale,
+    dataSource,
+    editAble,
+    format,
+    groupAble,
+    groupSetting,
+    groupColumns,
+    selectionSettings,
+    expandable,
+    onChooseColumns,
+    height,
+    pagination,
+    allowResizing,
+    infiniteScroll,
+    sortMultiple,
+    allowSortering,
+    allowFiltering,
+    ...rest
+  } = props;
+  const id = React.useMemo(() => {
+    return faker.string.alpha(20);
+  }, []);
+  const {
+    defaultExpandedRowKeys,
+    defaultExpandAllRows
+  } = expandable || {};
+  const rowKey = 'rowId';
+  const prefix = 'ui-rc';
+  const getWindowSize = () => {
+    const {
+      innerWidth,
+      innerHeight
+    } = window;
+    return {
+      innerWidth,
+      innerHeight
+    };
+  };
+  const [windowSize, setWindowSize] = useState(getWindowSize());
+  React.useEffect(() => {
+    const handleWindowResize = () => {
+      setWindowSize(getWindowSize());
+    };
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, []);
+  const [columnResizeMode] = React.useState('onChange');
+  const [columnResizeDirection] = React.useState('ltr');
+  const [rowSelection, setRowSelection] = React.useState({});
+
+  // const [grouping, setGrouping] = React.useState<GroupingState>([])
+
+  const [paginationState, setPagination] = React.useState({
+    pageIndex: pagination && pagination.currentPage ? pagination.currentPage - 1 : 0,
+    pageSize: pagination && pagination.pageSize ? pagination.pageSize : 20
+  });
+  const [columnSizing, setColumnSizing] = React.useState({});
+  const [columnSizingInfo, setColumnSizingInfo] = React.useState({});
+
+  // const [columnOrder, setColumnOrder] = React.useState<string[]>(() => columns.map(c => c.id!))
+
+  const [columnFilters, setColumnFilters] = React.useState([]);
+  const [operator, setOperator] = React.useState([]);
+  const [sorting, setSorting] = React.useState([]);
+  const [filterStates, setFilterState] = React.useState(null);
+  const [sorterStates, setSorterStates] = React.useState([]);
+  const [isFullScreen, setIsFullScreen] = React.useState(false);
+  const [columns, setColumns] = React.useState([]);
+  const [tableData, setTableData] = React.useState([]);
+  const [expanded, setExpanded] = React.useState({});
+
+  // const [visible, setVisible] = React.useState({visible: false, column: ''})
+
+  const [columnVisibility, setColumnVisibility] = React.useState({});
+  const originData = React.useMemo(() => {
+    return addRowIdArray(dataSource);
+  }, [dataSource]);
+  const isDataOriginTree = React.useMemo(() => {
+    return isTreeArray(originData);
+  }, [originData]);
+  React.useEffect(() => {
+    if (groupColumns && groupColumns.length > 0 && groupSetting?.client !== false && isDataOriginTree === false) {
+      const abc = groupArrayByColumns(originData, groupColumns);
+      const rs = filterDataByColumns(abc, filterStates, sorterStates, []);
+      setTableData(rs);
+    } else {
+      const rs = filterDataByColumns(originData, filterStates, sorterStates, []);
+      setTableData(rs);
+    }
+  }, [groupColumns, originData, filterStates, sorterStates, groupSetting?.client, isDataOriginTree]);
+  // }, [groupColumns, originData, filterStates, sorterStates, groupSetting?.client])
+
+  React.useEffect(() => {
+    // setColumns(updateWidthsByOther(propsColumns, columns))
+    setColumns(propsColumns);
+  }, [propsColumns]);
+
+  // const convertData = React.useMemo(() => {
+
+  //   if (groupAble && groupSetting && groupSetting.client !== false) {
+
+  //     const bbc = addRowIdArray(dataSource)
+
+  //     const abc = groupArrayByColumns(bbc, groupColumns)
+
+  //     return abc
+  //   } else {
+
+  //     return addRowIdArray(dataSource)
+
+  //   }
+
+  // }, [dataSource, groupAble, groupColumns, groupSetting])
+
+  const mergedColumns = React.useMemo(() => {
+    return convertToTanStackColumns({
+      t,
+      columns,
+      format,
+      editAble
+    });
+
+    // return convertToTanStackColumns<RecordType>(columns)
+  }, [t, columns, format, editAble]);
+  const isDataTree = React.useMemo(() => {
+    return isTreeArray(tableData);
+  }, [tableData]);
+  const columnPinning = React.useMemo(() => {
+    return {
+      left: getFixedFields(columns, 'left'),
+      right: getFixedFields(columns, 'right')
+    };
+  }, [columns]);
+
+  // ========================= Keys =========================
+  const [mergedFilterKeys, setMergedFilterKeys] = useMergedState(getAllRowKey(originData), {
+    value: undefined
+  });
+
+  // ========================= Keys =========================
+
+  const {
+    selectedRowKeys,
+    defaultSelectedRowKeys
+  } = selectionSettings ?? {};
+  const [mergedSelectedKeys] = useMergedState(selectedRowKeys || defaultSelectedRowKeys || [], {
+    value: selectedRowKeys
+  });
+
+  // const mergedData = React.useMemo(() => {
+
+  //   return filterDataByColumns(tableData, filterStates, sorterStates, mergedFilterKeys)
+
+  // }, [tableData, filterStates, mergedFilterKeys, sorterStates])
+
+  // const columnVisibility = React.useMemo(() => {
+  //   return getInvisibleColumns(columns)
+  // }, [columns])
+
+  React.useEffect(() => {
+    const a = getInvisibleColumns(columns);
+    setColumnVisibility(a);
+  }, [columns]);
+  const [columnsHiddenKeys, setColumnsHiddenKeys] = useMergedState(undefined, {
+    value: undefined
+  });
+  const triggerChangeColumns = (cols, keys, type) => {
+    if (type === 'cellClick') {
+      setColumns(cols);
+    } else {
+      const aa = flatColumns2(columns).map(it => it.field);
+      const rsss = getDiffent2Array(aa, keys);
+      setColumnsHiddenKeys(rsss);
+      onChooseColumns?.({
+        showColumns: removeInvisibleColumns([...cols]),
+        columns: [...cols],
+        flattenColumns: convertFlatColumn1([...cols])
+      });
+    }
+  };
+  const table = useReactTable({
+    _features: [OperatorFeature],
+    data: tableData,
+    // data: mergedData,
+    columns: mergedColumns,
+    state: {
+      rowSelection,
+      expanded,
+      columnPinning,
+      columnVisibility: columnsHiddenKeys ? convertToObj(columnsHiddenKeys) : columnVisibility,
+      pagination: pagination && !infiniteScroll ? paginationState : undefined,
+      // grouping,
+      columnSizing,
+      // columnOrder,
+      columnFilters,
+      operator,
+      sorting,
+      columnSizingInfo
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getRowId(originalRow) {
+      return originalRow.rowId;
+    },
+    getSubRows: row => row.children,
+    // --------------RowSelection -----------------
+    enableSubRowSelection: selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single',
+    enableMultiRowSelection: selectionSettings && (selectionSettings.mode === 'checkbox' || selectionSettings.type !== 'single'),
+    enableRowSelection: row => {
+      if (selectionSettings?.getCheckboxProps) {
+        return !selectionSettings?.getCheckboxProps(row.original)?.disabled;
+      }
+      return true;
+    },
+    onRowSelectionChange: setRowSelection,
+    // --------------RowSelection END-----------------
+
+    // ColumnSizing
+    enableColumnResizing: allowResizing !== false,
+    columnResizeMode,
+    columnResizeDirection,
+    onColumnSizingChange: setColumnSizing,
+    onColumnSizingInfoChange: setColumnSizingInfo,
+    // ColumnSizing
+
+    // ColumnSorting
+    // getSortedRowModel: getSortedRowModel(),
+    onSortingChange: setSorting,
+    enableMultiSort: sortMultiple !== false,
+    isMultiSortEvent: () => sortMultiple === false ? false : true,
+    enableSorting: allowSortering !== false,
+    // ColumnSorting
+
+    enableFilters: allowFiltering !== false,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnOperatorChange: setOperator,
+    // getFilteredRowModel: getFilteredRowModel(),
+
+    // onColumnOrderChange: setColumnOrder,
+
+    // onGroupingChange: setGrouping,
+    getGroupedRowModel: getGroupedRowModel(),
+    // onExpandedChange: setExpanded,
+    getExpandedRowModel: getExpandedRowModel(),
+    getPaginationRowModel: pagination && !infiniteScroll ? getPaginationRowModel() : undefined,
+    onPaginationChange: setPagination,
+    onColumnVisibilityChange: setColumnVisibility
+    // onColumnPinningChange,
+
+    // debugTable: true
+  });
+  React.useEffect(() => {
+    if (defaultExpandAllRows) {
+      const allKeys = findAllChildrenKeys2(tableData, rowKey, 'children');
+      setExpanded(convertToObjTrue(allKeys));
+    } else {
+      if (defaultExpandedRowKeys) {
+        setExpanded(convertToObjTrue(defaultExpandedRowKeys ?? []));
+      }
+    }
+  }, [defaultExpandAllRows, defaultExpandedRowKeys, tableData, table]);
+  const triggerGroupColumns = groupedColumns => {
+    // const abc = updateColumnsByGroup(columns, groupedColumns)
+
+    const bcd = convertToObj(groupedColumns);
+
+    // const a = getInvisibleColumns(columns)
+
+    const prev = groupColumns ?? [];
+    const bbb = prev.filter(item => !groupedColumns.includes(item));
+    const ccc = removeKeys(columnVisibility, bbb);
+    const rs = {
+      ...ccc,
+      ...bcd
+    };
+    setColumnVisibility(rs);
+
+    // table.setColumnVisibility(rs)
+
+    if (groupSetting) {
+      if (groupSetting.onGroup) {
+        groupSetting.onGroup({
+          columnGrouped: groupedColumns,
+          columns: removeColumns(columns, groupedColumns),
+          flattenColumns: flatColumns2(removeColumns(columns, groupedColumns))
+        });
+      }
+      if (groupSetting.client === false) {
+
+        // group server => không xử lý gì
+      } else {
+        // group client
+
+        table.resetRowSelection();
+        table.resetExpanded();
+        setRowSelection({});
+        setExpanded({});
+      }
+    }
+  };
+
+  // useEffect(() => {
+
+  //   table.toggleAllRowsExpanded(true)
+
+  // }, [tableData ])
+
+  const triggerFilter = args => {
+    // table.resetRowSelection()
+    // table.resetExpanded()
+
+    // setRowSelection({})
+    setExpanded({});
+    setFilterState(args);
+
+    // const rs = filterDataByColumns(originData, args, sorterStates, [])
+
+    // const allKeys = findAllChildrenKeys2<RecordType>(rs, rowKey, 'children')
+
+    // setExpanded(convertToObjTrue(allKeys))
+
+    // setTableData(rs)
+  };
+  const triggerSorter = args => {
+    // table.resetRowSelection()
+    // table.resetExpanded()
+
+    // setRowSelection({})
+    // setExpanded({})
+
+    setSorterStates(args);
+
+    // const rs = filterDataByColumns(originData, filterStates, args, [])
+    // setTableData(rs)
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
+    t: t,
+    id: id,
+    table: table,
+    prefix: prefix,
+    originData: originData
+    // dataSource={mergedData}
+    ,
+    dataSource: tableData,
+    locale: locale,
+    format: format
+    // columns={convertColumns(mergedColumns)}
+    ,
+    columns: mergedColumns,
+    propsColumns: columns,
+    rowKey: rowKey,
+    groupSetting: groupSetting,
+    groupAble: groupAble,
+    groupColumns: groupColumns,
+    columnPinning: columnPinning,
+    columnHidden: columnsHiddenKeys ? convertToObj(columnsHiddenKeys) : columnVisibility,
+    triggerFilter: triggerFilter,
+    triggerSorter: triggerSorter,
+    setMergedFilterKeys: setMergedFilterKeys,
+    mergedFilterKeys: mergedFilterKeys,
+    editAble: isFullScreen ? false : editAble,
+    triggerChangeColumns: triggerChangeColumns,
+    triggerGroupColumns: triggerGroupColumns,
+    expanded: expanded,
+    setExpanded: setExpanded,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen,
+    windowSize: windowSize,
+    height: height,
+    isDataTree: isDataTree,
+    selectionSettings: selectionSettings,
+    mergedSelectedKeys: mergedSelectedKeys,
+    expandable: expandable,
+    setColumns: setColumns,
+    columnFilters: columnFilters,
+    columnSizing: columnSizing,
+    columnSizingInfo: columnSizingInfo,
+    setColumnSizing: setColumnSizing,
+    rowSelection: rowSelection
+  })));
+};
+export default InternalTable;

package/es/table-virtuoso/body/TableBody.d.ts

@@ -0,0 +1,14 @@
+import { type Table } from "@tanstack/react-table";
+import type { CommandClick } from "../../table-component/type";
+import React from "react";
+interface TableBodyProps<T> {
+    table: Table<T>;
+    tableContainerRef: React.RefObject<HTMLDivElement>;
+    commandClick?: (args: CommandClick<T>) => void;
+    editAble?: boolean;
+    tableId: string;
+    showEmptyText?: boolean;
+    [key: string]: any;
+}
+declare const TableBody: <RecordType extends object>({ columnVirtualizer, table, tableContainerRef, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns, tableId, showEmptyText, ...rest }: TableBodyProps<RecordType>) => React.JSX.Element;
+export default TableBody;