@datarobot/design-system 28.2.2

package/esm/table-react/components/table-settings/table-settings.js

@@ -0,0 +1,270 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
+import classnames from 'classnames';
+import { faGear } from '@fortawesome/free-solid-svg-icons/faGear';
+import { faRotateLeft } from '@fortawesome/free-solid-svg-icons/faRotateLeft';
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass';
+import { Dropdown, DROPDOWN_PLACEMENT_TYPES } from '../../../dropdown';
+import { ACCENT_TYPES, Button } from '../../../button';
+import { Input } from '../../../input';
+import { useTranslation } from '../../../hooks/use-translation';
+import { TableSettingsGroup } from './table-settings-group';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const minSearchCount = 10;
+export function TableSettings({
+  tableModel,
+  baseColumns,
+  defaultState,
+  tableContainerWidth,
+  enableSorting,
+  enablePinning,
+  localizationText
+}) {
+  const {
+    t
+  } = useTranslation();
+  const defaultTranslations = {
+    cancelText: t('Cancel'),
+    applyText: t('Apply'),
+    restToDefaultText: t('Reset to default'),
+    searchText: t('Search'),
+    titleText: t('Columns management'),
+    settingsText: t('Settings'),
+    noResultText: t('No search results found.'),
+    disabledPinText: t('Pinned columns will take too much space with current column pinned'),
+    settingsPinnedGroupName: t('Pinned columns'),
+    settingsUnPinnedGroupName: t('Unpinned columns'),
+    settingsItemPinnedAriaLabel: t('Pin column'),
+    settingsItemSortAriaLabel: t('Sort column'),
+    settingsColumnItemAriaLabel: t('Use arrow keys to reorder columns. Use Tab key to navigate to inner controls'),
+    searchFieldAriaLabel: t('Settings search')
+  };
+  const localizationTextWithDefault = localizationText ?? defaultTranslations;
+  // these refs are used for accessibility improvements, and do not alter components logic. Feel free to ignore when reading =)
+  const shouldFocusOnFirstElementRef = useRef(false);
+  const [columnOrder, setColumnOrder] = useState(tableModel.getState()?.columnOrder?.length ? tableModel.getState()?.columnOrder : baseColumns.map(column => column.id || column.accessorKey));
+  const settings = useReactTable({
+    state: {
+      columnOrder
+    },
+    getCoreRowModel: getCoreRowModel(),
+    onColumnOrderChange: setColumnOrder,
+    columns: baseColumns,
+    enableSorting,
+    enablePinning,
+    sortDescFirst: true,
+    data: []
+  });
+  const [search, setSearch] = useState('');
+  const columns = [...settings.getLeftLeafColumns(), ...settings.getCenterLeafColumns()];
+  const activeColumns = columns.filter(({
+    columnDef
+  }) => !columnDef.meta?.hideFromSettings);
+  const searchedColumns = activeColumns.filter(({
+    columnDef
+  }) => {
+    const searchableValue = typeof columnDef.header === 'string' ? columnDef.header.toLowerCase() : '';
+    return searchableValue.includes(search.toLowerCase());
+  });
+  const columnGroups = {
+    pinned: [],
+    unpinned: []
+  };
+  searchedColumns.forEach(column => {
+    if (column.getIsPinned()) {
+      columnGroups.pinned.push(column);
+    } else {
+      columnGroups.unpinned.push(column);
+    }
+  });
+  const setCurrentState = () => {
+    setSearch('');
+    settings.setState(tableModel.getState());
+  };
+  const apply = () => {
+    tableModel.setColumnVisibility(settings.getState().columnVisibility);
+    tableModel.setColumnPinning(settings.getState().columnPinning);
+    tableModel.setSorting(settings.getState().sorting);
+    tableModel.setColumnOrder(settings.getState().columnOrder);
+  };
+  const resetToDefault = () => {
+    tableModel.setColumnVisibility(defaultState.visible || {});
+    tableModel.setColumnPinning(defaultState.pinned || {});
+    tableModel.setSorting(defaultState.sorting || []);
+    tableModel.setColumnSizing(defaultState.columnSizing || {});
+    tableModel.setRowSelection(defaultState.selected || {});
+    tableModel.setExpanded(defaultState.expandedRows || {});
+    const defaultColumnOrder = baseColumns.map(column => column.id || column.accessorKey);
+    tableModel.setColumnOrder(defaultColumnOrder);
+    setColumnOrder(defaultColumnOrder);
+  };
+  const handleColumnsReorder = (newItems, previousIndex, currentIndex) => {
+    const draggedItem = newItems[currentIndex];
+    const hoveredItem = newItems[previousIndex];
+
+    // if we are reordering pinned items - just rewrite the whole array with the right order
+    if (draggedItem.getIsPinned()) {
+      settings.setColumnPinning(prevState => {
+        return {
+          ...prevState,
+          left: newItems.map(item => item.id)
+        };
+      });
+    } else {
+      // now we need to find respective indexes in the columnsOrder array as it may differ from this one due to pinned and reserved columns
+      const dragIndex = columnOrder.findIndex(columnItem => columnItem === draggedItem.id);
+      const hoverIndex = columnOrder.findIndex(columnItem => columnItem === hoveredItem.id);
+      settings.setColumnOrder(prevState => {
+        const newState = [...prevState];
+        newState.splice(dragIndex, 1);
+        newState.splice(hoverIndex, 0, draggedItem.id);
+        return newState;
+      });
+    }
+  };
+  const handleKeyboardColumnsReorder = (currentIndex, nextIndex, movedColumn) => {
+    if (movedColumn.getIsPinned() && nextIndex >= 0 && nextIndex < columnGroups.pinned.length) {
+      settings.setColumnPinning(prevState => {
+        const pinnedGroup = [...columnGroups.pinned];
+        pinnedGroup.splice(currentIndex, 1);
+        pinnedGroup.splice(nextIndex, 0, movedColumn);
+        return {
+          ...prevState,
+          left: pinnedGroup.map(i => i.id)
+        };
+      });
+    } else if (nextIndex < columnGroups.unpinned.length && nextIndex >= 0) {
+      const hoveredItem = columnGroups.unpinned[nextIndex];
+      // now we need to find respective indexes in the columnsOrder array as it may differ from this one due to pinned and reserved columns
+      const dragIndex = columnOrder.findIndex(columnItem => columnItem === movedColumn.id);
+      const hoverIndex = columnOrder.findIndex(columnItem => columnItem === hoveredItem.id);
+      settings.setColumnOrder(prevState => {
+        const newState = [...prevState];
+        newState.splice(dragIndex, 1);
+        newState.splice(hoverIndex, 0, movedColumn.id);
+        return newState;
+      });
+    }
+  };
+
+  // this is ref callback to focus on first input element when dropdown is opened via keyboard
+  const focusOnFirstInput = useCallback(element => {
+    if (element && shouldFocusOnFirstElementRef.current) {
+      // if search is shown - focus on it first
+      if (activeColumns.length >= minSearchCount) {
+        element.querySelector('.table-settings input').focus();
+      } else {
+        // if there is no search - focus on first column container
+        element.querySelector('[test-id="table-settings-column-container"]').focus();
+      }
+      shouldFocusOnFirstElementRef.current = false;
+    }
+  }, [activeColumns.length]);
+  return /*#__PURE__*/_jsx(Dropdown, {
+    placement: DROPDOWN_PLACEMENT_TYPES.BOTTOM_START,
+    hasCustomFocusHandling: true,
+    renderAnchor: ({
+      ref,
+      onClick,
+      isOpen
+    }) => /*#__PURE__*/_jsx(Button, {
+      ref: ref,
+      onClick: e => {
+        // e.detail stores number of clicks, so 0 means there was no clicks, hence - it's a keyboard initiated click
+        // more info: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+        const isOpenedWithKeyboard = e.detail === 0;
+        setCurrentState();
+        onClick(e, isOpenedWithKeyboard);
+      },
+      className: classnames(isOpen && 'active'),
+      onKeyDown: e => {
+        if (e.key === ' ' || e.key === 'Enter') {
+          // if we opened dropdown via keyboard click - we need to focus on the first element
+          shouldFocusOnFirstElementRef.current = true;
+        }
+      },
+      testId: "table-settings",
+      leftIcon: faGear,
+      accentType: ACCENT_TYPES.GHOST,
+      children: localizationTextWithDefault.settingsText
+    }),
+    shouldCloseDropdownOnEsc: true,
+    contentClassName: "table-react-settings-container",
+    children: ({
+      closeDropdown
+    }) => /*#__PURE__*/_jsxs("div", {
+      className: "table-settings",
+      "test-id": "table-settings-container",
+      ref: focusOnFirstInput,
+      children: [/*#__PURE__*/_jsx("p", {
+        className: "table-settings-title",
+        children: localizationTextWithDefault.titleText
+      }), activeColumns.length >= minSearchCount ? /*#__PURE__*/_jsx(Input, {
+        leftIcon: faMagnifyingGlass,
+        placeholder: localizationTextWithDefault.searchText,
+        className: "table-settings-search",
+        value: search,
+        onChange: e => setSearch(e.target.value),
+        "aria-label": localizationTextWithDefault.searchFieldAriaLabel
+      }) : null, /*#__PURE__*/_jsxs("div", {
+        className: "table-settings-columns",
+        children: [columnGroups.pinned.length > 0 ? /*#__PURE__*/_jsx(TableSettingsGroup, {
+          groupId: "pinned",
+          groupName: localizationTextWithDefault.settingsPinnedGroupName,
+          settings: settings,
+          columns: columnGroups.pinned,
+          tableContainerWidth: tableContainerWidth,
+          onItemMove: handleColumnsReorder,
+          handleKeyboardColumnsReorder: handleKeyboardColumnsReorder,
+          isReorderEnabled: search === '',
+          localizationText: localizationTextWithDefault
+        }) : null, columnGroups.unpinned.length > 0 ? /*#__PURE__*/_jsx(TableSettingsGroup, {
+          groupId: "unpinned",
+          groupName: localizationTextWithDefault.settingsUnPinnedGroupName,
+          settings: settings,
+          columns: columnGroups.unpinned,
+          tableContainerWidth: tableContainerWidth,
+          onItemMove: handleColumnsReorder,
+          handleKeyboardColumnsReorder: handleKeyboardColumnsReorder,
+          isReorderEnabled: search === '',
+          localizationText: localizationTextWithDefault
+        }) : null, !searchedColumns.length && search && /*#__PURE__*/_jsx("p", {
+          className: "table-settings-no-result",
+          children: localizationTextWithDefault.noResultText
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: "table-settings-reset",
+        children: /*#__PURE__*/_jsx(Button, {
+          className: "table-settings-actions-button",
+          accentType: ACCENT_TYPES.GHOST,
+          leftIcon: faRotateLeft,
+          testId: "reset-settings",
+          fullWidth: true,
+          onClick: () => {
+            resetToDefault();
+            closeDropdown();
+          },
+          children: localizationTextWithDefault.restToDefaultText
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "table-settings-actions",
+        children: [/*#__PURE__*/_jsx(Button, {
+          className: "table-settings-actions-button",
+          accentType: ACCENT_TYPES.SECONDARY,
+          onClick: closeDropdown,
+          testId: "cancel-settings",
+          children: localizationTextWithDefault.cancelText
+        }), /*#__PURE__*/_jsx(Button, {
+          className: "table-settings-actions-button",
+          accentType: ACCENT_TYPES.PRIMARY,
+          testId: "apply-settings",
+          onClick: () => {
+            apply();
+            closeDropdown();
+          },
+          children: localizationTextWithDefault.applyText
+        })]
+      })]
+    })
+  });
+}

package/esm/table-react/components/table-toolbar-actions.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../../button';
+import { ActionBarSearchProps } from '../../action-bar-search';
+import { HeaderToolbarActionsLocalizationType } from '../types';
+export type TableToolbarActionsProps = {
+    isFilterActive?: boolean;
+    children?: ReactNode;
+    onFilterClick?: () => void;
+    searchQuery?: string;
+    onSearchChange?: (value: string) => void;
+    localizationText?: HeaderToolbarActionsLocalizationType;
+    filterButtonProps?: Partial<ButtonProps>;
+    searchProps?: Partial<ActionBarSearchProps>;
+    filters?: unknown[];
+    itemsFoundCount?: number;
+    isExceededTotalLimit?: boolean;
+};
+export declare function TableToolbarActions({ isFilterActive, onFilterClick, children, onSearchChange, searchQuery, filters, itemsFoundCount, isExceededTotalLimit, localizationText: localizationTextParams, filterButtonProps, searchProps, }: TableToolbarActionsProps): import("react/jsx-runtime").JSX.Element;

package/esm/table-react/components/table-toolbar-actions.js

@@ -0,0 +1,79 @@
+import React, { useRef, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter';
+import { Button, ACCENT_TYPES } from '../../button';
+import { ActionBarSearch } from '../../action-bar-search';
+import { useDebounce } from '../../hooks/use-debounce';
+import { useTranslation } from '../../hooks/use-translation';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TableToolbarActions({
+  isFilterActive,
+  onFilterClick,
+  children,
+  onSearchChange,
+  searchQuery,
+  filters,
+  itemsFoundCount,
+  isExceededTotalLimit,
+  localizationText: localizationTextParams,
+  filterButtonProps = {},
+  searchProps = {}
+}) {
+  const itemsFoundRef = useRef(null);
+  const {
+    t
+  } = useTranslation();
+  const localizationText = localizationTextParams ?? {
+    filter: t('Filters'),
+    itemsFoundText: (count, isExceeded) => isExceeded ? t('{{count}}+ item found', {
+      count,
+      plural: '{{count}}+ items found'
+    }) : t('{{count}} item found', {
+      count,
+      plural: '{{count}} items found'
+    }),
+    searchText: t('Search'),
+    searchPlaceholder: t('Search')
+  };
+  const shouldShowItemsFoundCount = !!((searchQuery || filters?.length) && itemsFoundCount);
+  const updateItemsFound = useCallback(itemCount => {
+    if (itemsFoundRef.current) {
+      itemsFoundRef.current.innerHTML = `${localizationText.itemsFoundText(itemCount, isExceededTotalLimit)}`;
+    }
+  }, [localizationText.itemsFoundText, isExceededTotalLimit]);
+  const debouncedFunc = useDebounce(updateItemsFound, 1200);
+  useEffect(() => {
+    if (shouldShowItemsFoundCount && itemsFoundCount > 0) {
+      debouncedFunc(itemsFoundCount);
+    }
+  }, [itemsFoundCount, shouldShowItemsFoundCount]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "table-toolbar-actions",
+    children: [children, onFilterClick && /*#__PURE__*/_jsx(Button, {
+      accentType: ACCENT_TYPES.GHOST,
+      onClick: onFilterClick,
+      leftIcon: faFilter,
+      ...filterButtonProps,
+      className: classNames(isFilterActive && 'active', filterButtonProps.className),
+      "aria-pressed": isFilterActive,
+      children: localizationText.filter
+    }), onSearchChange && /*#__PURE__*/_jsx(ActionBarSearch, {
+      searchQuery: searchQuery,
+      onChange: onSearchChange,
+      searchText: localizationText.searchText,
+      focusPlaceholder: localizationText.searchPlaceholder,
+      ...searchProps
+    }), shouldShowItemsFoundCount && /*#__PURE__*/_jsxs("div", {
+      className: "table-toolbar-actions-items-found",
+      "test-id": "table-toolbar-actions-items-found",
+      children: [/*#__PURE__*/_jsx("span", {
+        children: localizationText.itemsFoundText(itemsFoundCount, isExceededTotalLimit)
+      }), /*#__PURE__*/_jsx("span", {
+        className: "sr-only",
+        "aria-live": "polite",
+        "test-id": "table-toolbar-actions-items-found-hidden",
+        ref: itemsFoundRef
+      })]
+    })]
+  });
+}

package/esm/table-react/components/table-toolbar.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+import { Table, AccessorKeyColumnDef } from '@tanstack/react-table';
+import { HeaderToolbarLocalizationType, TableDefaultState } from '../types';
+export type TableToolbarProps<TData> = {
+    tableModel: Table<TData>;
+    enableSorting: boolean;
+    baseColumns: AccessorKeyColumnDef<TData>[];
+    hideSettings: boolean;
+    enablePinning: boolean;
+    getToolBarActions?: () => ReactElement;
+    getToolbarRightActions?: () => ReactElement;
+    defaultState: TableDefaultState;
+    tableContainerWidth: number;
+    localizationText?: HeaderToolbarLocalizationType;
+};
+export declare function TableToolbar<TData>({ tableModel, baseColumns, enableSorting, enablePinning, hideSettings, defaultState, getToolBarActions, getToolbarRightActions, tableContainerWidth, localizationText, }: TableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element;

package/esm/table-react/components/table-toolbar.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { TableSettings } from './table-settings/table-settings';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TableToolbar({
+  tableModel,
+  baseColumns,
+  enableSorting,
+  enablePinning,
+  hideSettings,
+  defaultState,
+  getToolBarActions,
+  getToolbarRightActions,
+  tableContainerWidth,
+  localizationText
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: "table-toolbar",
+    children: [getToolBarActions && getToolBarActions(), /*#__PURE__*/_jsx("div", {
+      className: "table-toolbar-separator"
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "table-toolbar-right",
+      children: [!hideSettings && /*#__PURE__*/_jsx(TableSettings, {
+        tableModel: tableModel,
+        baseColumns: baseColumns,
+        defaultState: defaultState,
+        tableContainerWidth: tableContainerWidth,
+        enableSorting: enableSorting,
+        enablePinning: enablePinning,
+        localizationText: localizationText
+      }), getToolbarRightActions && getToolbarRightActions()]
+    })]
+  });
+}

package/esm/table-react/components/table-wrapper.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+export interface TableWrapperProps {
+    className?: string;
+    testId?: string;
+    defaultWidth?: number;
+    children: (data: {
+        width: number;
+    }) => ReactNode;
+}
+export declare const TableWrapper: FC<TableWrapperProps>;

package/esm/table-react/components/table-wrapper.js

@@ -0,0 +1,33 @@
+import React, { useEffect, useRef, useState } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+import classnames from 'classnames';
+import { COLUMN_SIZE } from '../types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_TABLE_WIDTH = process.env.NODE_ENV === 'test' ? 600 : undefined;
+export const TableWrapper = ({
+  className,
+  testId,
+  children,
+  defaultWidth = DEFAULT_TABLE_WIDTH
+}) => {
+  const [width, setWidth] = useState(defaultWidth);
+  const wrapper = useRef(null);
+  useEffect(() => {
+    const outputWidth = () => {
+      setWidth((wrapper.current?.offsetWidth || 0) - COLUMN_SIZE.BORDER_OFFSET);
+    };
+    if (wrapper.current) {
+      const observer = new ResizeObserver(() => window.requestAnimationFrame(outputWidth));
+      observer.observe(wrapper.current);
+      return () => observer.disconnect();
+    }
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    className: classnames('react-table-wrapper', className),
+    "test-id": testId,
+    ref: wrapper,
+    children: width ? children({
+      width
+    }) : null
+  });
+};

package/esm/table-react/components/table.d.ts

@@ -0,0 +1,88 @@
+import { MouseEvent, UIEvent, ReactElement } from 'react';
+import { AccessorKeyColumnDef, Header, Cell, Row, RowSelectionState, SortingState, OnChangeFn, ColumnSizingState, ColumnPinningState, PaginationState, VisibilityState, ExpandedState, ColumnOrderState } from '@tanstack/react-table';
+import { TableHeaderProps } from './table-header';
+import { TableBodyProps } from './table-body';
+import { TableHeaderCellProps } from './table-header-cell';
+import { TableBodyCellProps } from './table-body-cell';
+import type { DropdownMenuOption } from '../../dropdown-menu';
+import { TableReactLocalizationPropType, TABLE_SIZE, TableDefaultState, Touched } from '../types';
+export type TableReactPropsType<TData, TMeta> = {
+    columns: AccessorKeyColumnDef<TData>[];
+    data: TData[];
+    defaultState?: TableDefaultState;
+    TableBodyComponent?: (props: TableBodyProps<TData>) => ReactElement | null;
+    TableHeaderComponent?: (props: TableHeaderProps<TData>) => ReactElement;
+    ThComponent?: (props: TableHeaderCellProps<TData>) => ReactElement;
+    TdComponent?: (props: TableBodyCellProps<TData>) => ReactElement;
+    getFilterBody?: () => ReactElement;
+    getToolBarActions?: () => ReactElement;
+    getToolbarRightActions?: () => ReactElement;
+    getEmptyState?: () => ReactElement;
+    ExpandedRowComponent?: ({ rowData }: {
+        rowData: TData;
+    }) => ReactElement;
+    tableClassName?: string;
+    trClassName?: string | ((row: Row<TData>) => string);
+    thClassName?: string;
+    tdClassName?: string;
+    expandedContentClassName?: string;
+    tableTestId?: string;
+    tableHeaderRowTestId?: string;
+    tableRowTestId?: string | ((row: Row<TData>) => string);
+    tableHeaderCellTestId?: string;
+    tableBodyCellTestId?: string;
+    tableMeta?: TMeta;
+    pageSizeOptions?: number[];
+    enableRowSelection?: boolean;
+    enablePagination?: boolean;
+    enableSorting?: boolean;
+    enableSortingRemoval?: boolean;
+    enableCheckBoxes?: boolean;
+    enableToolbar?: boolean;
+    enableSettings?: boolean;
+    enablePinning?: boolean;
+    enableColumnResizing?: boolean;
+    enableMultiRowSelection?: boolean;
+    sorting?: SortingState;
+    visible?: VisibilityState;
+    touched?: Touched;
+    onTouchedChange?: (data?: Touched) => void;
+    onSortingChange?: OnChangeFn<SortingState>;
+    selected?: RowSelectionState;
+    pinned?: ColumnPinningState;
+    onPinningChange?: (data: ColumnPinningState) => void;
+    expandedRows?: ExpandedState;
+    onExpandedChange?: (data: ExpandedState) => void;
+    columnOrder?: ColumnOrderState;
+    onColumnOrderChange?: OnChangeFn<ColumnOrderState>;
+    pagination?: PaginationState;
+    onPaginationChange?: OnChangeFn<PaginationState>;
+    totalCount?: number;
+    totalLimit?: number;
+    isExceededTotalLimit?: boolean;
+    nextPage?: boolean;
+    onRowSelectionChange?: (data: RowSelectionState) => void;
+    onVisibilityChange?: (data: VisibilityState) => void;
+    defaultColumnSizing?: ColumnSizingState;
+    onColumnSizingChange?: (data: ColumnSizingState) => void;
+    onCellClick?: (cell: Partial<Cell<TData, unknown>>, event: MouseEvent<unknown>) => void;
+    onColumnHeaderClick?: (header: Partial<Header<TData, unknown>>, event: MouseEvent<unknown>) => void;
+    width: number;
+    isLoading?: boolean;
+    errorMessage?: string | null;
+    loadingRowCount?: number;
+    getRowId: (originalRow: TData) => string;
+    getRowActions?: (row: Row<TData>) => DropdownMenuOption[];
+    getRowFooterAction?: (row: Row<TData>) => DropdownMenuOption;
+    getCustomRowContent?: (row: Row<TData>, tableContainerWidth: number, centerScrolled: boolean, scrollableRight: boolean) => ReactElement | undefined;
+    localizationProps?: TableReactLocalizationPropType;
+    bottomEndScrollOffset?: number;
+    onScrollEnd?: () => void;
+    onScroll?: (e: UIEvent<HTMLElement>) => void;
+    afterLoading?: boolean;
+    size?: TABLE_SIZE;
+    onRowClick?: (e: MouseEvent<HTMLTableRowElement>, row: TData) => void;
+    isRowClickDisabled?: (row: TData) => boolean | string;
+    isRowSelectionDisabled?: (row: TData) => boolean | string;
+};
+export declare function Table<TData, TMeta>({ columns, data, getFilterBody, getToolBarActions, getToolbarRightActions, getEmptyState, TableBodyComponent, TableHeaderComponent, ThComponent, TdComponent, trClassName, thClassName, tdClassName, expandedContentClassName, tableMeta, onCellClick, onColumnHeaderClick, selected, sorting, onSortingChange, pinned, expandedRows, ExpandedRowComponent, columnOrder, onColumnOrderChange, pagination, onPaginationChange, totalCount, totalLimit, isExceededTotalLimit, nextPage, width, errorMessage, loadingRowCount, getRowId, visible, onRowClick, isRowClickDisabled, isRowSelectionDisabled, pageSizeOptions, enableRowSelection, enableCheckBoxes, enableMultiRowSelection, isLoading, defaultColumnSizing, touched, onTouchedChange, onColumnSizingChange, onPinningChange, onExpandedChange, onRowSelectionChange, getRowActions, getRowFooterAction, getCustomRowContent, localizationProps, defaultState, onVisibilityChange, enableToolbar, enableSettings, bottomEndScrollOffset, onScroll, onScrollEnd, afterLoading, enablePagination, enableSorting, enableSortingRemoval, enableColumnResizing, tableTestId, tableRowTestId, tableHeaderRowTestId, tableHeaderCellTestId, tableBodyCellTestId, size, enablePinning, }: TableReactPropsType<TData, TMeta>): import("react/jsx-runtime").JSX.Element;