@snack-uikit/table 0.33.4 → 0.34.0

package/dist/cjs/helperComponents/Cells/HeaderCell/HeaderCell.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.HeaderCell = HeaderCell;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const sortable_1 = require("@dnd-kit/sortable");
 const react_table_1 = require("@tanstack/react-table");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
@@ -25,7 +26,8 @@ function HeaderCell(_ref) {
     header,
     pinPosition,
     className,
-    rowAutoHeight
+    rowAutoHeight,
+    isDraggable
   } = _ref;
   const cellRef = (0, react_1.useRef)(null);
   const isSortable = header.column.getCanSort();
@@ -36,16 +38,30 @@ function HeaderCell(_ref) {
   const columnSizingInfo = header.getContext().table.getState().columnSizingInfo;
   const isSomeColumnResizing = columnSizingInfo.isResizingColumn;
   const columnDef = header.column.columnDef;
-  const style = (0, hooks_1.useCellSizes)(header);
+  const style = (0, hooks_1.useCellSizes)(header, {
+    isDraggable
+  });
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    isDragging
+  } = (0, sortable_1.useSortable)({
+    id: header.column.id
+  });
   const sortingHandler = e => {
     var _a;
     if (isSomeColumnResizing) return;
     return (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
   };
+  const isAvailableForDrag = !constants_1.DEFAULT_COLUMNS.includes(header.column.id);
+  const dragAttributes = isAvailableForDrag ? attributes : {};
+  const listenersAttributes = isAvailableForDrag ? listeners : {};
   return (0, jsx_runtime_1.jsxs)(Cell_1.Cell, {
     style: style,
     onClick: sortingHandler,
     "data-sortable": isSortable || undefined,
+    "data-draggable": isDraggable || undefined,
     "data-no-padding": columnDef.noHeaderCellPadding || undefined,
     "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined,
     "data-test-id": constants_1.TEST_IDS.headerCell,
@@ -56,21 +72,29 @@ function HeaderCell(_ref) {
     "data-row-auto-height": rowAutoHeight || undefined,
     role: 'columnheader',
     className: (0, classnames_1.default)(styles_module_scss_1.default.tableHeaderCell, className, columnDef.headerClassName),
-    ref: cellRef,
-    children: [(0, jsx_runtime_1.jsxs)("div", {
-      className: styles_module_scss_1.default.tableHeaderCellMain,
-      children: [columnDef.header && (0, jsx_runtime_1.jsx)("div", {
-        className: styles_module_scss_1.default.tableHeaderCellName,
-        children: rowAutoHeight ? (0, react_table_1.flexRender)(columnDef.header, header.getContext()) : (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
-          text: (0, react_table_1.flexRender)(columnDef.header, header.getContext())
-        })
-      }), Boolean(sortIcon) && (0, jsx_runtime_1.jsx)("div", {
-        className: styles_module_scss_1.default.tableHeaderIcon,
-        "data-sort-direction": sortDirection,
-        "data-test-id": constants_1.TEST_IDS.headerSortIndicator,
-        children: sortIcon
-      })]
-    }), Boolean(isResizable) && (0, jsx_runtime_1.jsx)(ResizeHandle_1.ResizeHandle, {
+    ref: element => {
+      setNodeRef(element);
+      return cellRef;
+    },
+    children: [(0, jsx_runtime_1.jsx)("div", Object.assign({
+      className: styles_module_scss_1.default.tableHeaderCellDragWrapper,
+      "data-dragging": isDragging || undefined
+    }, dragAttributes, listenersAttributes, {
+      children: (0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.tableHeaderCellMain,
+        children: [columnDef.header && (0, jsx_runtime_1.jsx)("div", {
+          className: styles_module_scss_1.default.tableHeaderCellName,
+          children: rowAutoHeight ? (0, react_table_1.flexRender)(columnDef.header, header.getContext()) : (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+            text: (0, react_table_1.flexRender)(columnDef.header, header.getContext())
+          })
+        }), Boolean(sortIcon) && (0, jsx_runtime_1.jsx)("div", {
+          className: styles_module_scss_1.default.tableHeaderIcon,
+          "data-sort-direction": sortDirection,
+          "data-test-id": constants_1.TEST_IDS.headerSortIndicator,
+          children: sortIcon
+        })]
+      })
+    })), Boolean(isResizable) && (0, jsx_runtime_1.jsx)(ResizeHandle_1.ResizeHandle, {
       header: header,
       cellRef: cellRef
     })]

package/dist/cjs/helperComponents/Cells/HeaderCell/styles.module.css

@@ -71,6 +71,9 @@
 .tableHeaderCell:hover .tableHeaderResizeHandle:not([data-resizing]){
   opacity:1;
 }
+.tableHeaderCell[data-draggable]{
+  cursor:grab;
+}
 .tableHeaderCell[data-sortable]{
   cursor:pointer;
 }
@@ -111,6 +114,13 @@
   padding-bottom:0;
 }
 
+.tableHeaderCellDragWrapper{
+  width:100%;
+}
+.tableHeaderCellDragWrapper[data-dragging]:active{
+  cursor:grabbing;
+}
+
 .tableHeaderCellMain{
   overflow:auto;
   display:flex;

package/dist/cjs/helperComponents/ColumnsSettings/ColumnsSettings.d.ts

@@ -0,0 +1,8 @@
+import { GroupSelectItemProps } from '@snack-uikit/list';
+type ColumnsSettingsProps = {
+    enabledColumns: string[];
+    setEnabledColumns(enabledColumns: string[]): void;
+    columnsSettings: [GroupSelectItemProps];
+};
+export declare function ColumnsSettings({ columnsSettings, enabledColumns, setEnabledColumns }: ColumnsSettingsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/ColumnsSettings/ColumnsSettings.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnsSettings = ColumnsSettings;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@snack-uikit/button");
+const icons_1 = require("@snack-uikit/icons");
+const list_1 = require("@snack-uikit/list");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ColumnsSettings(_ref) {
+  let {
+    columnsSettings,
+    enabledColumns,
+    setEnabledColumns
+  } = _ref;
+  return (0, jsx_runtime_1.jsx)(list_1.Droplist, {
+    className: styles_module_scss_1.default.columnsSettings,
+    items: columnsSettings,
+    selection: {
+      value: enabledColumns,
+      onChange: setEnabledColumns,
+      mode: 'multiple'
+    },
+    placement: 'bottom-end',
+    children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+      size: 'm',
+      "data-test-id": 'table__column-settings',
+      icon: (0, jsx_runtime_1.jsx)(icons_1.FunctionSettingsSVG, {})
+    })
+  });
+}

package/dist/cjs/helperComponents/ColumnsSettings/index.d.ts

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

package/dist/cjs/helperComponents/ColumnsSettings/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./ColumnsSettings"), exports);

package/dist/cjs/helperComponents/ColumnsSettings/styles.module.css

@@ -0,0 +1,3 @@
+.columnsSettings{
+  min-width:256px;
+}

package/dist/cjs/helperComponents/Rows/BodyRow.d.ts

@@ -1,5 +1,6 @@
 import { Row as TableRow } from '@tanstack/react-table';
 import { MouseEvent } from 'react';
+import { ColumnOrder } from '../../types';
 import { RowProps } from './Row';
 export type RowInfo<TData> = {
     id: string;
@@ -11,5 +12,7 @@ export type RowClickHandler<TData> = (e: MouseEvent<HTMLDivElement>, row: RowInf
 export type BodyRowProps<TData> = Pick<RowProps, 'rowAutoHeight'> & {
     row: TableRow<TData>;
     onRowClick?: RowClickHandler<TData>;
+    columnOrder: ColumnOrder;
+    enableColumnsOrderSortByDrag?: boolean;
 };
-export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/Rows/BodyRow.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BodyRow = BodyRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const sortable_1 = require("@dnd-kit/sortable");
 const react_1 = require("react");
 const constants_1 = require("../../constants");
 const Cells_1 = require("../Cells");
@@ -22,11 +23,13 @@ function BodyRow(_ref) {
   let {
     row,
     onRowClick,
-    rowAutoHeight
+    rowAutoHeight,
+    columnOrder,
+    enableColumnsOrderSortByDrag
   } = _ref;
   const {
-    pinnedLeft,
-    pinnedRight,
+    leftPinned,
+    rightPinned,
     unpinned
   } = (0, hooks_1.useRowCells)(row);
   const [dropListOpened, setDropListOpen] = (0, react_1.useState)(false);
@@ -55,20 +58,26 @@ function BodyRow(_ref) {
       "data-row-id": row.id,
       className: styles_module_scss_1.default.bodyRow,
       rowAutoHeight: rowAutoHeight,
-      children: [pinnedLeft && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
+      children: [leftPinned && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
         position: constants_1.COLUMN_PIN_POSITION.Left,
-        children: pinnedLeft.map(cell => (0, jsx_runtime_1.jsx)(Cells_1.BodyCell, {
+        children: leftPinned.map(cell => (0, jsx_runtime_1.jsx)(Cells_1.BodyCell, {
           cell: cell,
           rowAutoHeight: rowAutoHeight
         }, cell.id))
-      }), unpinned.map(cell => (0, jsx_runtime_1.jsx)(Cells_1.BodyCell, {
-        cell: cell,
-        rowAutoHeight: rowAutoHeight
-      }, cell.id)), pinnedRight && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
+      }), unpinned.map(cell => (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, {
+        items: columnOrder,
+        strategy: sortable_1.horizontalListSortingStrategy,
+        children: (0, jsx_runtime_1.jsx)(Cells_1.BodyCell, {
+          cell: cell,
+          rowAutoHeight: rowAutoHeight,
+          isDraggable: enableColumnsOrderSortByDrag
+        }, cell.id)
+      }, cell.id)), rightPinned && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
         position: constants_1.COLUMN_PIN_POSITION.Right,
-        children: pinnedRight.map(cell => (0, jsx_runtime_1.jsx)(Cells_1.BodyCell, {
+        children: rightPinned.map(cell => (0, jsx_runtime_1.jsx)(Cells_1.BodyCell, {
           cell: cell,
-          rowAutoHeight: rowAutoHeight
+          rowAutoHeight: rowAutoHeight,
+          isDraggable: enableColumnsOrderSortByDrag
         }, cell.id))
       })]
     })

package/dist/cjs/helperComponents/Rows/HeaderRow.d.ts

@@ -1,2 +1,8 @@
+import { ColumnOrder } from '../../types';
 import { RowProps } from './Row';
-export declare function HeaderRow({ rowAutoHeight }: Pick<RowProps, 'rowAutoHeight'>): import("react/jsx-runtime").JSX.Element;
+type Props = Pick<RowProps, 'rowAutoHeight'> & {
+    columnOrder: ColumnOrder;
+    enableColumnsOrderSortByDrag?: boolean;
+};
+export declare function HeaderRow({ rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/Rows/HeaderRow.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.HeaderRow = HeaderRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const sortable_1 = require("@dnd-kit/sortable");
 const constants_1 = require("../../constants");
 const Cells_1 = require("../Cells");
 const hooks_1 = require("../hooks");
@@ -18,7 +19,9 @@ const Row_1 = require("./Row");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function HeaderRow(_ref) {
   let {
-    rowAutoHeight
+    rowAutoHeight,
+    columnOrder,
+    enableColumnsOrderSortByDrag
   } = _ref;
   const {
     leftPinned,
@@ -35,10 +38,15 @@ function HeaderRow(_ref) {
         header: header,
         rowAutoHeight: rowAutoHeight
       }, header.id)))
-    }), unpinned.map(headerGroup => headerGroup.headers.map(header => (0, jsx_runtime_1.jsx)(Cells_1.HeaderCell, {
-      header: header,
-      rowAutoHeight: rowAutoHeight
-    }, header.id))), rightPinned && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
+    }), (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, {
+      items: columnOrder,
+      strategy: sortable_1.horizontalListSortingStrategy,
+      children: unpinned.map(headerGroup => headerGroup.headers.map(header => (0, jsx_runtime_1.jsx)(Cells_1.HeaderCell, {
+        header: header,
+        rowAutoHeight: rowAutoHeight,
+        isDraggable: enableColumnsOrderSortByDrag && columnOrder.length > 1
+      }, header.id)))
+    }), rightPinned && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
       position: constants_1.COLUMN_PIN_POSITION.Right,
       children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (0, jsx_runtime_1.jsx)(Cells_1.HeaderCell, {
         header: header,

package/dist/cjs/helperComponents/hooks.d.ts

@@ -1,4 +1,5 @@
 import { Cell, Header, HeaderGroup, Row } from '@tanstack/react-table';
+import { CSSProperties } from 'react';
 export declare function useHeaderGroups(): {
     unpinned: HeaderGroup<any>[];
     leftPinned?: undefined;
@@ -10,16 +11,15 @@ export declare function useHeaderGroups(): {
 };
 export declare function useRowCells<TData>(row: Row<TData>): {
     unpinned: Cell<TData, unknown>[];
-    pinnedLeft?: undefined;
-    pinnedRight?: undefined;
+    leftPinned?: undefined;
+    rightPinned?: undefined;
 } | {
-    pinnedLeft: Cell<TData, unknown>[] | undefined;
-    pinnedRight: Cell<TData, unknown>[] | undefined;
+    leftPinned: Cell<TData, unknown>[] | undefined;
+    rightPinned: Cell<TData, unknown>[] | undefined;
     unpinned: Cell<TData, unknown>[];
 };
-export declare function useCellSizes<TData>(element: Cell<TData, unknown> | Header<TData, unknown>): {
-    minWidth: number | undefined;
-    width: string;
-    maxWidth: number | undefined;
-    flexShrink: string;
+type CellSizesOptions = {
+    isDraggable?: boolean;
 };
+export declare function useCellSizes<TData>(element: Cell<TData, unknown> | Header<TData, unknown>, options?: CellSizesOptions): CSSProperties;
+export {};

package/dist/cjs/helperComponents/hooks.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useHeaderGroups = useHeaderGroups;
 exports.useRowCells = useRowCells;
 exports.useCellSizes = useCellSizes;
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
 const react_1 = require("react");
 const contexts_1 = require("./contexts");
 function hasHeaders(groups) {
@@ -17,6 +19,9 @@ function useHeaderGroups() {
   } = (0, contexts_1.useTableContext)();
   const columnDefs = table._getColumnDefs();
   const pinEnabled = table.getIsSomeColumnsPinned();
+  const {
+    columnOrder
+  } = table.getState();
   return (0, react_1.useMemo)(() => {
     if (!pinEnabled) {
       return {
@@ -32,7 +37,7 @@ function useHeaderGroups() {
     };
     // need to rebuild if columnDefinitions has changed
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [table, pinEnabled, columnDefs]);
+  }, [table, pinEnabled, columnDefs, columnOrder]);
 }
 function useRowCells(row) {
   const {
@@ -40,6 +45,9 @@ function useRowCells(row) {
   } = (0, contexts_1.useTableContext)();
   const pinEnabled = table.getIsSomeColumnsPinned();
   const columnDefs = table._getColumnDefs();
+  const {
+    columnOrder
+  } = table.getState();
   return (0, react_1.useMemo)(() => {
     if (!pinEnabled) {
       return {
@@ -49,24 +57,44 @@ function useRowCells(row) {
     const left = row.getLeftVisibleCells();
     const right = row.getRightVisibleCells();
     return {
-      pinnedLeft: left.length ? left : undefined,
-      pinnedRight: right.length ? right : undefined,
+      leftPinned: left.length ? left : undefined,
+      rightPinned: right.length ? right : undefined,
       unpinned: row.getCenterVisibleCells()
     };
     // need to rebuild if columnDefinitions has changed
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [row, pinEnabled, columnDefs]);
+  }, [row, pinEnabled, columnDefs, columnOrder]);
 }
-function useCellSizes(element) {
+function useCellSizes(element, options) {
   const column = element.column;
+  const {
+    isDragging,
+    transform
+  } = (0, sortable_1.useSortable)({
+    id: column.id
+  });
   const minWidth = column.columnDef.minSize;
   const maxWidth = column.columnDef.maxSize;
   const width = `var(--table-column-${column.id}-size)`;
   const flexShrink = `var(--table-column-${column.id}-flex)`;
-  return (0, react_1.useMemo)(() => ({
-    minWidth,
-    width,
-    maxWidth,
-    flexShrink
-  }), [flexShrink, maxWidth, minWidth, width]);
+  const isHeaderCell = 'headerGroup' in element;
+  return (0, react_1.useMemo)(() => {
+    const styles = {
+      minWidth,
+      width,
+      maxWidth,
+      flexShrink
+    };
+    if (options === null || options === void 0 ? void 0 : options.isDraggable) {
+      styles.opacity = isDragging ? 0.8 : 1;
+      styles.position = 'relative';
+      styles.transform = utilities_1.CSS.Translate.toString(transform);
+      styles.transition = 'width transform 0.2s ease-in-out';
+      styles.zIndex = isDragging ? 1 : undefined;
+      if (isHeaderCell) {
+        styles.whiteSpace = 'nowrap';
+      }
+    }
+    return styles;
+  }, [options === null || options === void 0 ? void 0 : options.isDraggable, flexShrink, isDragging, isHeaderCell, maxWidth, minWidth, transform, width]);
 }

package/dist/cjs/helperComponents/index.d.ts

@@ -7,3 +7,4 @@ export * from './hooks';
 export * from './types';
 export * from './TableEmptyState';
 export * from './TablePagination';
+export * from './ColumnsSettings';

package/dist/cjs/helperComponents/index.js

@@ -30,4 +30,5 @@ __exportStar(require("./helpers"), exports);
 __exportStar(require("./hooks"), exports);
 __exportStar(require("./types"), exports);
 __exportStar(require("./TableEmptyState"), exports);
-__exportStar(require("./TablePagination"), exports);
+__exportStar(require("./TablePagination"), exports);
+__exportStar(require("./ColumnsSettings"), exports);

package/dist/cjs/types.d.ts

@@ -3,8 +3,7 @@ import { ReactNode } from 'react';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { ValueOf } from '@snack-uikit/utils';
 import { COLUMN_ALIGN, COLUMN_PIN_POSITION } from './constants';
-import { Except } from './helperComponents';
-import { EmptyStateProps } from './helperComponents/TableEmptyState';
+import { EmptyStateProps, Except } from './helperComponents';
 type ColumnAlign = ValueOf<typeof COLUMN_ALIGN>;
 type ColumnPinPosition = ValueOf<typeof COLUMN_PIN_POSITION>;
 type BaseColumnDefinition<TData> = Except<ColumnDef<TData>, 'footer' | 'enablePinning' | 'enableGrouping' | 'enableColumnFilter' | 'filterFn' | 'enableGlobalFilter' | 'enableMultiSort' | 'enableHiding'> & {
@@ -39,6 +38,15 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
     /** Размер ячейки */
     size: number;
 };
-export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
+type FilterableProps = {
+    id: string;
+    /** Название колонки в настройках таблицы */
+    headerConfigLabel?: string;
+};
+type FilterableNormalColumnDefinition<TData> = NormalColumnDefinition<TData> & FilterableProps;
+type FilterablePinnedColumnDefinition<TData> = PinnedColumnDefinition<TData> & FilterableProps;
+export type FilterableColumnDefinition<TData> = FilterableNormalColumnDefinition<TData> | FilterablePinnedColumnDefinition<TData>;
+export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData> | FilterableColumnDefinition<TData>;
+export type ColumnOrder = string[];
 export type { RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, ActionsGenerator, CopyCellProps, MapStatusToAppearanceFnType, } from './helperComponents';
 export type { ColumnPinPosition, PaginationState, SortingState, RowSelectionState, RowSelectionOptions, EmptyStateProps, ToolbarProps, HeaderContext, CellContext, };

package/dist/esm/components/Table/Table.d.ts

@@ -1,7 +1,7 @@
 import { FiltersState } from '@snack-uikit/chips';
 import { TableProps } from '../types';
 /** Компонент таблицы */
-export declare function Table<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, infiniteLoading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination: manualPaginationProp, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, rowAutoHeight, ...rest }: TableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, infiniteLoading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination: manualPaginationProp, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, rowAutoHeight, columnsSettings: columnsSettingsProp, ...rest }: TableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
     var statusAppearances: Record<string, string>;