@jetbrains/ring-ui-built 7.0.124 → 8.0.0-beta.10

package/components/table/table-props.d.ts

@@ -0,0 +1,304 @@
+import type { AriaAttributes, ReactNode, RefObject } from 'react';
+export interface TableProps<T> {
+    /**
+     * The data items to render. `null` and `undefined` items are not supported.
+     * Referentially identical items are not supported either.
+     */
+    data: readonly T[];
+    /**
+     * Column definitions.
+     */
+    columns: readonly Column<T>[];
+    /**
+     * Used as a key in the items list.
+     */
+    getKey: (item: T, index: number, items: readonly T[]) => React.Key;
+    /**
+     * If `true`, the table header will not be rendered.
+     *
+     * Note that this may impact accessibility. If necessary, provide additional
+     * information via `aria-label` or `aria-description` on the `Table` element.
+     */
+    noHeader?: boolean;
+    /**
+     * If true, renders a sticky header.
+     */
+    stickyHeader?: boolean;
+    /**
+     * Called when the user clicks the sort button in a column header.
+     * The client is expected to update the `columns` prop with the new
+     * sort order for the corresponding column, and update the data accordingly.
+     */
+    onSort?: (columnIndex: number, newOrder: SortOrder, columns: readonly Column<T>[]) => void;
+    /**
+     * Called when the user clicks on a column delete button in the header.
+     * The client is expected to update the `columns` prop with the column removed.
+     */
+    onColumnDelete?: (column: Column<T>, columnIndex: number, columns: readonly Column<T>[]) => void;
+    /**
+     * Called when the user reorders columns by dragging a column.
+     * The `insertionIndex` parameter represents an insertion position in the original,
+     * unchanged `columns` array before the column is removed.
+     *
+     * One possible implementation is:
+     *
+     * ```ts
+     * columns.splice(fromIndex, 1);
+     * columns.splice(fromIndex < insertionIndex ? insertionIndex - 1 : insertionIndex, 0, columnBeingReordered);
+     * ```
+     *
+     * The callback is not called when the reorder operation would not change the
+     * column order, i.e. when
+     * `insertionIndex === fromIndex || insertionIndex === fromIndex + 1`.
+     */
+    onColumnReorder?: (columnBeingReordered: Column<T>, fromIndex: number, insertionIndex: number, columns: readonly Column<T>[]) => void;
+    /**
+     * By default, when a column is reordered, the moved column is highlighted
+     * with a temporary background color. Set `true` to disable this animation.
+     */
+    noColumnReorderAnimation?: boolean;
+    /**
+     * If defined, determines whether an item may be reordered to a specific insertion position.
+     * If not defined, any item may be reordered to any position.
+     */
+    canReorderItem?: (itemBeingReordered: T, fromIndex: number, insertionIndex: number, items: readonly T[]) => boolean;
+    /**
+     * Called when the user reorders items by dragging a handle.
+     * The `insertionIndex` parameter represents an insertion position in the original,
+     * unchanged `data` array before the item is removed. See {@link TableProps.onColumnReorder}
+     * for an example implementation.
+     *
+     * To make reorder possible, render `ItemReorderHandle` (from `table-primitives`)
+     * anywhere in a row.
+     *
+     * The callback is not called when the reorder operation would not change the
+     * item order, i.e. when
+     * `insertionIndex === fromIndex || insertionIndex === fromIndex + 1`.
+     */
+    onItemReorder?: (itemBeingReordered: T, fromIndex: number, insertionIndex: number, items: readonly T[]) => void;
+    /**
+     * By default, when an item is reordered, the moved item is highlighted
+     * with a temporary background color. Set `true` to disable this animation.
+     */
+    noItemReorderAnimation?: boolean;
+    /**
+     * Customizes how an item is rendered.
+     *
+     * Return `DefaultItemRenderer` to configure row-specific behavior such as
+     * `clickable`, `keyboardFocusable`, event handlers, `className`, or `ref`.
+     *
+     * You can also return custom row(s) instead. See the `Table` documentation
+     * for details.
+     */
+    renderItem?: (item: T, index: number, items: readonly T[]) => ReactNode;
+    /**
+     * Only renders rows near the viewport.
+     *
+     * Rows may transition between two states:
+     * - materialized: rendered as actual table rows. This happens when
+     *   the corresponding spacer approaches the viewport, as specified by
+     *   `lookaheadPx`.
+     * - virtualized: replaced with spacer rows of the same height. This happens
+     *   when the row moves sufficiently far from the viewport, as specified by
+     *   `retentionMarginPx`.
+     *
+     * Toggling this prop should normally work as expected, but a seamless
+     * transition is not guaranteed: the scroll position may reset to the top.
+     * However, if row height estimates are accurate and the data has not
+     * changed, the browser may apply scroll anchoring, resulting in a smoother
+     * transition, possibly with brief flickering but without scroll jumps.
+     */
+    virtualizeRows?: boolean;
+    /**
+     * Used with `virtualizeRows` as the source of scroll events, the target of
+     * `ResizeObserver`, and the root of `IntersectionObserver`. Required when
+     * the scrollable container is not the whole document.
+     *
+     * If not set:
+     * - the scroll listener is attached to `window`
+     * - `ResizeObserver` observes `document.body`
+     * - `IntersectionObserver` has no root (i.e. the viewport is used)
+     *
+     * Note that if this scroller is nested inside another scrollable container,
+     * the outer container is not tracked. As a result, items may not materialize
+     * until the inner scroller is scrolled.
+     *
+     * Support for nested scroll containers may be added in the future.
+     */
+    scrollerRef?: RefObject<HTMLElement | null>;
+    /**
+     * Used with `virtualizeRows` to estimate the height of items that have not
+     * been rendered yet. The function should be fast and side-effect free.
+     * Do not measure the DOM here. Once a row is rendered, its actual height
+     * will be measured and used instead of this estimate.
+     *
+     * Note the effects of imprecise estimates:
+     * - When the height is underestimated, the table may materialize more rows
+     *   than specified by `lookaheadPx`. If the resulting rows extend beyond
+     *   `retentionMarginPx`, they will be virtualized again. If this causes
+     *   relayout flickering, increase `retentionMarginPx`.
+     * - When the height is overestimated, the table may materialize fewer rows
+     *   than specified by `lookaheadPx`, which may leave a spacer partially
+     *   visible. To avoid this, increase `lookaheadPx` (and `retentionMarginPx`
+     *   accordingly, since it should be greater than `lookaheadPx`).
+     *
+     * Default: 37px = 16px padding + 20px line height + 1px border.
+     */
+    estimateHeight?: (item: T, index: number, items: readonly T[]) => number;
+    /**
+     * When using `virtualizeRows`, the number of pixels above and below
+     * the viewport to materialize in advance.
+     *
+     * Increase this value if blank space becomes visible during fast scrolling.
+     *
+     * Default: 400px.
+     */
+    lookaheadPx?: number;
+    /**
+     * Used with `virtualizeRows`. Additional margin around the viewport before
+     * materialized rows become eligible for virtualization.
+     *
+     * Increasing this value reduces row churn when heights are underestimated.
+     * In that case, the table may materialize more rows than needed and then
+     * immediately virtualize them again. A larger margin keeps such rows
+     * rendered for longer, at the cost of rendering more rows overall.
+     *
+     * This value should be greater than `lookaheadPx`. Increase it if you notice
+     * table relayouts during initial render or scrolling.
+     *
+     * Default: 450px.
+     */
+    retentionMarginPx?: number;
+    /**
+     * When using `virtualizeRows`, ignore scroll and resize position changes
+     * smaller than this value.
+     *
+     * Measurement inaccuracies and rounding artifacts may slightly change the
+     * table layout during materialization and virtualization. With scroll
+     * anchoring enabled (the default browser behavior), the browser may then
+     * adjust the scroll position, triggering additional scroll or resize events.
+     * Small deltas are ignored to prevent such feedback loops from causing
+     * oscillations at virtualization boundaries.
+     *
+     * Increase if you expect high inaccuracy in height measurements, or if you
+     * notice oscillations at virtualization boundaries.
+     *
+     * Default: 50px.
+     */
+    minScrollAndResizeDeltaPx?: number;
+    /**
+     * "Column editing mode" is a mode in which controls that are normally hidden
+     * become visible, such as column reorder and delete buttons.
+     *
+     * When this prop is `undefined`, the component manages the mode internally.
+     * Users can toggle it by tapping the table header on mobile or by clicking
+     * the column edit button, if enabled. Since tapping the table header is not
+     * discoverable by assistive technologies, it's recommended to enable
+     * `columnEditButton` when using the internal mode.
+     *
+     * Alternatively, pass `true` or `false` to control the mode externally.
+     */
+    columnEditing?: boolean;
+    /**
+     * Called when the user requests to enter or leave column editing mode.
+     *
+     * The `source` parameter indicates what triggered the request.
+     *
+     * When `columnEditing` is not controlled, the component automatically
+     * applies the requested change internally.
+     *
+     * When `columnEditing` is controlled externally and you still want to
+     * respond to user requests, use this callback to decide whether to
+     * update the mode.
+     */
+    onColumnEditingRequest?: (editing: boolean, source: 'header' | 'edit-button') => void;
+    /**
+     * Whether to show a small gear button in the top-right corner that
+     * toggles column editing mode.
+     *
+     * For accessibility, it's recommended to enable this button unless you
+     * provide an external control for toggling column editing mode.
+     */
+    columnEditButton?: boolean;
+    /**
+     * Applied to the `<thead>` element.
+     */
+    theadClassName?: string;
+    /**
+     * Applied to the only `<tr>` element within the `<thead>`.
+     */
+    theadTrClassName?: string;
+    /**
+     * Applied to the `<tbody>` element.
+     */
+    tbodyClassName?: string;
+}
+export type SortOrder = Extract<AriaAttributes['aria-sort'], 'none' | 'ascending' | 'descending'>;
+/**
+ * The column specification.
+ */
+export interface Column<T> {
+    /**
+     * Used as a key in the columns list.
+     */
+    key: React.Key;
+    /**
+     * Used in `aria-label`s of column controls which do not contain text,
+     * such as the delete column button. If not set, the `String(key)` is used.
+     */
+    name?: string;
+    /**
+     * Renders the content of the column header, excluding controls such as
+     * the sort and delete buttons. If not specified, the default behavior is
+     * `name ?? String(key)`.
+     */
+    renderHeader?: () => ReactNode;
+    /**
+     * Renders the value of a single cell. If not specified, the default
+     * behavior is:
+     *
+     * - If `item` is an `Array`, renders `String(item[columnIndex])`
+     * - If `item` is an `Object`, renders `String(item[String(columnKey)])`
+     * - Otherwise:
+     *   - The first column renders `String(item)`
+     *   - Other columns render an empty string
+     */
+    renderCell?: (item: T, index: number, items: readonly T[]) => ReactNode;
+    /**
+     * If the column gets an indent when `DefaultItemRendererProps.level` returns
+     * a positive number.
+     */
+    indent?: boolean;
+    /**
+     * If set, displays sort button and includes `aria-sort` in the column header.
+     * Handle clicks with {@link TableProps.onSort}.
+     */
+    sortOrder?: AriaAttributes['aria-sort'];
+    /**
+     * Whether to display a delete button in the column header.
+     * Handle delete requests with {@link TableProps.onColumnDelete}.
+     * Make sure {@link Column.name} or {@link Column.key} is meaningful,
+     * as it will be included in the `aria-label` of the delete button.
+     */
+    deletable?: boolean;
+    /**
+     * Displays a reorder handle in the column header.
+     * Handle reorder requests with {@link TableProps.onColumnReorder}.
+     * If a function is provided, it determines whether the column may be moved
+     * to the specified insertion position.
+     *
+     * Make sure {@link Column.name} or {@link Column.key} is meaningful,
+     * as it will be included in the `aria-label` of the reorder button.
+     */
+    canReorder?: boolean | ((columnBeingReordered: Column<T>, fromIndex: number, insertionIndex: number, columns: readonly Column<T>[]) => boolean);
+    /**
+     * The class name to apply to the `th` element inside `table > thead`.
+     */
+    thClassName?: string;
+    /**
+     * The class name to apply to the `td` element inside `table > tbody`.
+     * If a custom `TableProps.renderItem` is provided, this prop is not used,
+     * unless the custom renderer falls back to the `DefaultItemRenderer`.
+     */
+    tdClassName?: string | ((item: T, index: number, items: readonly T[]) => string | undefined);
+}

package/components/table/table-props.js

@@ -0,0 +1 @@
+

package/components/table/table.d.ts

@@ -1,109 +1,233 @@
+import React, { type ComponentPropsWithRef } from 'react';
+import type { TableProps } from './table-props';
 /**
- * @name Table
+ * Table component replacing the tables in the `legacy-table` folder.
+ *
+ * This documentation provides an overview of the most common usage patterns.
+ * See individual props and exported components for detailed behavior.
+ *
+ * ## Minimal usage
+ *
+ * You need the following props:
+ * - `data`
+ * - `getKey`
+ * - `columns`
+ *   - `key`
+ *   - `name` (optional but needed in most cases)
+ *   - `renderCell` (optional but needed in most cases)
+ *
+ * ## Item rendering
+ *
+ * If `renderItem` is not specified, each item is rendered using
+ * `DefaultItemRenderer` (from `table/default-item-renderer`)
+ * as if the following code were used:
+ *
+ * ```tsx
+ * <Table
+ *   renderItem={(_item, index, _items) => (
+ *     <DefaultItemRenderer index={index} />
+ *   )}
+ * />
+ * ```
+ *
+ * `DefaultItemRenderer` renders a table row using the column definitions
+ * (`Column.renderCell`) and provides built-in support for features such as
+ * selection, keyboard navigation, and virtualization. It also accepts all
+ * standard `tr` attributes, including `ref`.
+ *
+ * Use `renderItem` to configure `DefaultItemRenderer` for each item:
+ *
+ * ```tsx
+ * <Table
+ *   renderItem={(item, index, items) => (
+ *     <DefaultItemRenderer
+ *       index={index}
+ *       keyboardFocusable
+ *       className='my-item'
+ *       onClick={e => handleClick(e, item, items)}
+ *     />
+ *   )}
+ * />
+ * ```
+ *
+ * If you need complete control over rendering, `renderItem` can instead
+ * return your own table rows. See "Custom item rendering" below.
+ *
+ * ## Selection
+ *
+ * Selection is typically implemented using the following props
+ * of the `DefaultItemRenderer`:
+ *
+ * - `clickable`
+ * - `selected`
+ * - `onClick` or `onPointerUp`, etc.
+ *
+ * The following utilities (from `global`) may come in handy:
+ *
+ * - `TableSelection` class to manage selection state
+ *   - An alternative approach is to keep a `selected` field on each item
+ * - `isWithinInteractiveElement()` to check if a click was made on a control
+ *   or on "empty space"
+ *
+ * ```tsx
+ * <Table
+ *   renderItem={(item, index) => (
+ *     <DefaultItemRenderer
+ *       index={index}
+ *       clickable
+ *       selected={selection.isSelected(item)}
+ *       onClick={e => {
+ *         if (!isWithinInteractiveElement(e)) {
+ *           setSelection(selection.toggleSelection(item));
+ *         }
+ *       }}
+ *     />
+ *   )}
+ * />
+ * ```
+ *
+ * Note that for accessibility reasons, you should have a cell with a checkbox
+ * to display and toggle item selection.
+ *
+ * ## Row focus
+ *
+ * The table implements the ["roving tabindex"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets#technique_1_roving_tabindex)
+ * technique to focus rows with the up/down arrow keys.
+ * Rows can also be focused on click or other pointer events.
+ * To support it, use the following props of the `DefaultItemRenderer`:
+ *
+ * - `keyboardFocusable`
+ * - `clickable`, if you want to react to hover
+ * - `onClick`, if you want to focus on click
+ *
+ * Useful utils:
+ * - `focusWithTemporaryTabIndex()` from `global` to focus a row temporarily
+ *   patching its `tabindex`.
+ *
+ * ```tsx
+ * <Table
+ *   renderItem={(item, index) => (
+ *     <DefaultItemRenderer
+ *       index={index}
+ *       clickable
+ *       keyboardFocusable
+ *       onClick={e => {
+ *         if (!isWithinInteractiveElement(e)) {
+ *           focusWithTemporaryTabIndex(e.currentTarget);
+ *         }
+ *       }}
+ *     />
+ *   )}
+ * />
+ * ```
+ *
+ * Note that the table does not implement standard accessibility patterns such
+ * as `grid` or `treegrid`, so row focus is not announced by screen readers.
+ * Make sure all essential actions remain available without row focus, for
+ * example via standard Tab navigation.
+ *
+ * ## Sorting
+ *
+ * You need the following to support sorting:
+ *
+ * - Set `Column.sortOrder` to `'none'`, `'ascending'` or `'descending'`
+ *   to render the sort button, `aria-sort`, and indicate the current
+ *   sort order.
+ * - Handle `TableProps.onSort` callback in the client code.
+ *
+ * ## Deleting columns
+ *
+ * You need the following to support deleting columns:
+ *
+ * - Set `Column.deletable` to `true`. This will render a delete button in the
+ *   column header.
+ * - Make sure the `column` has a proper `name` or `key` prop, which will be
+ *   automatically included in the aria-label of the column delete button.
+ * - Handle `TableProps.onColumnDelete` callback in the client code. It is
+ *   expected to update `columns` by removing the corresponding column.
+ *
+ * ## Moving columns
+ *
+ * - Set `Column.canReorder` to `true` or to predicate specifying possible
+ *   insertion targets.
+ *   This will render a reorder button in the column header.
+ * - Make sure the `column` has a proper `name` or `key` prop, which will be
+ *   automatically included in the aria-label of the column reorder button.
+ * - Handle `TableProps.onColumnReorder` callback in the client code. It is
+ *   expected to update `columns` by moving the corresponding column to the
+ *   new position.
+ *
+ * ## Item reorder
+ *
+ * To allow the user to reorder rows by dragging:
+ *
+ * - Place `ItemReorderHandle` (from `table/table-primitives`) anywhere inside
+ *   a cell. It renders a drag icon button the user can grab to reorder the row.
+ * - Handle `TableProps.onItemReorder`. It is expected to update `data` by
+ *   moving the item to the new position.
+ * - Optionally, set `TableProps.canReorderItem` to restrict which positions
+ *   an item may be dropped into.
+ *
+ * By default, dragging shows a drag frame (a border around the dragged row)
+ * and an insertion indicator (a line between rows showing where the item will
+ * land). To implement fully custom drag visuals, set `noDragFrame` and
+ * `noHandleTranslate` on `ItemReorderHandle` and use its `onUserDrag` callback
+ * to track the drag lifecycle.
+ *
+ * ## Row virtualization
+ *
+ * To render only rows near the viewport while replacing off-screen rows with
+ * spacers, use:
+ *
+ * - `virtualizeRows` prop set to `true`
+ * - `scrollerRef` — required when the scrollable container is not the whole
+ *    document
+ * - `estimateHeight` — recommended when rows are expected to be taller than
+ *   the default height (e.g. multiline or custom content)
+ * - Fine-tuning props: `lookaheadPx`, `retentionMarginPx`,
+ *   `minScrollAndResizeDeltaPx`
+ *
+ * ## Custom item rendering
+ *
+ * Use the `renderItem` prop to render an item in a completely custom way.
+ * The prop is expected to return one or more table rows for the item.
+ * Use `TableRow` and `TableCell` from `table/table-primitives` to apply
+ * the default row and cell styles.
+ *
+ * ### Focus
+ *
+ * Just like `DefaultItemRenderer`, `TableRow` accepts the
+ * `keyboardFocusable` prop.
+ *
+ * Focusable rows rendered by either component form a single keyboard
+ * navigation sequence.
+ *
+ * ### Virtualization
+ *
+ * If `Table.virtualizeRows` is set to `true`, you need to handle visibility
+ * for your custom-rendered component yourself with the
+ * `useItemVirtualization()` hook (from `table/item-virtualization`). The hook
+ * allows observing the intersection of one or multiple elements rendered for
+ * the item, and, based on their intersection status, reporting the item as
+ * eligible for virtualization.
+ *
+ * If you use `DefaultItemRenderer` as part of your custom row renderer,
+ * set the `noItemVirtualization` prop to `true`, otherwise it will also try
+ * to control the virtualization, possibly reporting incorrect item height.
+ *
+ * ### Item reorder
+ *
+ * If `TableProps.onItemReorder` is set and your item spans multiple rows, call
+ * `useReorderItemLayout()` (from `table/reorder-item-layout`) to register the
+ * item's boundaries so the insertion indicator and insertion point calculation
+ * are correct. If `DefaultItemRenderer` is included inside your custom renderer,
+ * set its `noReorderLayout` prop to `true` to prevent double registration.
+ *
+ * ### Reorder animation
+ *
+ * After a column or item is reordered, the table briefly highlights the moved
+ * element. To apply the same animation in your custom-rendered rows, use
+ * `useReorderAnimation()` (from `table/reorder-animation`) to get information
+ * about the currently animated column or item.
  */
-import { Component, PureComponent, type ReactNode, type SyntheticEvent } from 'react';
-import * as React from 'react';
-import { type OnChangeMeta } from 'react-movable/lib/types';
-import { type FocusSensorAddProps, type FocusSensorProps } from '../global/focus-sensor-hoc';
-import { type SelectionShortcutsAddProps, type SelectionShortcutsProps } from './selection-shortcuts-hoc';
-import { type DisableHoverAddProps, type DisableHoverProps } from './disable-hover-hoc';
-import Row from './row-with-focus-sensor';
-import { type Column, type SortParams } from './header-cell';
-export interface ReorderParams<T> {
-    data: T[];
-    oldIndex: number;
-    newIndex: number;
-}
-export interface TableProps<T extends object> extends FocusSensorAddProps<HTMLTableRowElement>, SelectionShortcutsAddProps<T>, DisableHoverAddProps {
-    data: readonly T[];
-    columns: readonly Column<T>[] | ((item: T | null) => readonly Column<T>[]);
-    isItemSelectable: (item: T) => boolean;
-    loading: boolean;
-    onSort: (params: SortParams) => void;
-    onReorder: (params: ReorderParams<T>) => void;
-    getItemKey: (item: T) => string | number;
-    sortKey: string;
-    sortOrder: boolean;
-    draggable: boolean;
-    alwaysShowDragHandle: boolean;
-    dragHandleTitle?: string;
-    stickyHeader: boolean;
-    wideFirstColumn: boolean;
-    getItemLevel: (item: T) => number;
-    getItemClassName: (item: T) => string | null | undefined;
-    getMetaColumnClassName: (item: T) => string | null | undefined;
-    getItemDataTest: (item: T) => string | null | undefined;
-    isItemCollapsible: (item: T) => boolean;
-    isParentCollapsible: (item: T) => boolean;
-    isItemCollapsed: (item: T) => boolean;
-    onItemCollapse: (item: T) => void;
-    onItemExpand: (item: T) => void;
-    onItemDoubleClick: (item: T) => void;
-    onItemClick: (item: T, e: React.MouseEvent<HTMLTableRowElement>) => void;
-    remoteSelection: boolean;
-    isDisabledSelectionVisible: (item: T) => boolean;
-    getCheckboxTooltip: (item: T) => string | undefined;
-    className?: string | null | undefined;
-    wrapperClassName?: string | null | undefined;
-    headerClassName?: string | null | undefined;
-    cellClassName?: string | null | undefined;
-    loaderClassName?: string | undefined;
-    caption?: string | null | undefined;
-    stickyHeaderOffset?: string | undefined;
-    renderEmpty?: (() => ReactNode) | null | undefined;
-    RowComponent: typeof Row;
-    renderLoader?: ((loaderClassName?: string) => ReactNode) | null | undefined;
-}
-/**
- * Interactive table with selection and keyboard navigation support.
- */
-export declare class Table<T extends object> extends PureComponent<TableProps<T>> {
-    static defaultProps: {
-        isItemSelectable: () => boolean;
-        loading: boolean;
-        onSort: () => void;
-        onReorder: () => void;
-        getItemKey: (item: object) => string | number;
-        sortKey: string;
-        sortOrder: boolean;
-        draggable: boolean;
-        alwaysShowDragHandle: boolean;
-        stickyHeader: boolean;
-        getItemLevel: () => number;
-        getItemClassName: () => null;
-        getMetaColumnClassName: () => null;
-        getItemDataTest: () => null;
-        isItemCollapsible: () => boolean;
-        isParentCollapsible: () => boolean;
-        isItemCollapsed: () => boolean;
-        onItemCollapse: () => void;
-        onItemExpand: () => void;
-        onItemDoubleClick: () => void;
-        onItemClick: () => void;
-        remoteSelection: boolean;
-        isDisabledSelectionVisible: () => boolean;
-        getCheckboxTooltip: () => undefined;
-        RowComponent: typeof Row;
-        wideFirstColumn: boolean;
-    };
-    state: {
-        shortcutsScope: string;
-        userSelectNone: boolean;
-    };
-    componentDidMount(): void;
-    componentDidUpdate({ data, selection, onSelect, selectable, remoteSelection }: TableProps<T>): void;
-    componentWillUnmount(): void;
-    onMouseDown: (e: React.MouseEvent) => void;
-    onMouseUp: () => void;
-    onRowFocus: (row: T) => void;
-    onRowSelect: (row: T, selected: boolean) => void;
-    onSortEnd: ({ oldIndex, newIndex }: OnChangeMeta) => void;
-    onCheckboxChange: (e: SyntheticEvent<HTMLInputElement>) => void;
-    restoreFocusWithoutScroll: () => void;
-    render(): React.JSX.Element;
-}
-export type TableAttrs<T extends object> = DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>;
-export default class TableContainer<T extends object> extends Component<TableAttrs<T>> {
-    Table: React.ComponentClass<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>, any>;
-    render(): React.JSX.Element;
-}
+export default function Table<T>(props: TableProps<T> & ComponentPropsWithRef<'table'>): React.JSX.Element;