@jetbrains/ring-ui-built 7.0.115 → 8.0.0-beta.3

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

@@ -0,0 +1,32 @@
+import { type RefObject } from 'react';
+export type VirtualItem = RenderedItem | Spacer;
+interface RenderedItem {
+    type: 'rendered';
+    index: number;
+}
+interface Spacer {
+    type: 'spacer';
+    from: number;
+    to: number;
+    height: number;
+    key: string;
+}
+export declare function useTableVirtualize<T>({ enabled, data, data: { length }, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }: {
+    enabled: boolean;
+    data: T[];
+    scrollerRef: RefObject<HTMLElement | null> | undefined;
+    tableRef: RefObject<HTMLTableElement | null>;
+    estimateHeight: (item: T, index: number, items: T[]) => number;
+    lookaheadPx: number;
+    retentionMarginPx: number;
+    minScrollAndResizeDeltaPx: number;
+}): {
+    virtualItems: VirtualItem[];
+    intersectionObserverHandle: import("../global/intersection-observer-context").IntersectionObserverHandle | null;
+    collapseItemIntoSpacer: (index: number, height: number) => void;
+};
+export declare function SpacerRow({ spacer: { from, to, height }, colSpan }: {
+    spacer: Spacer;
+    colSpan: number;
+}): import("react").JSX.Element;
+export {};

package/components/table/table-virtualize.js

@@ -0,0 +1,329 @@
+import { c } from 'react/compiler-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { useIntersectionObserverHandle } from '../global/intersection-observer-context.js';
+import { s as styles } from '../_helpers/table.js';
+import { jsx } from 'react/jsx-runtime';
+
+const virtualizationThrottleDelay = 50;
+function useTableVirtualize(t0) {
+  const $ = c(34);
+  if ($[0] !== "4b7f7b12eb2c9ae3487ce5d00c7be96dc9b8807a6bbfe2c9b314700f443d7188") {
+    for (let $i = 0; $i < 34; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "4b7f7b12eb2c9ae3487ce5d00c7be96dc9b8807a6bbfe2c9b314700f443d7188";
+  }
+  const {
+    enabled,
+    data,
+    data: t1,
+    scrollerRef,
+    tableRef,
+    estimateHeight,
+    lookaheadPx,
+    retentionMarginPx,
+    minScrollAndResizeDeltaPx
+  } = t0;
+  const {
+    length
+  } = t1;
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = [];
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const itemsMaterialization = useRef(t2);
+  let t3;
+  if ($[2] !== data || $[3] !== estimateHeight || $[4] !== length) {
+    t3 = () => [{
+      type: "spacer",
+      from: 0,
+      to: length,
+      height: data.reduce((acc, item, index, items) => acc + estimateHeight(item, index, items), 0),
+      key: `${styles.spacerRow}-0`
+    }];
+    $[2] = data;
+    $[3] = estimateHeight;
+    $[4] = length;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const [virtualItems, setVirtualItems] = useState(t3);
+  let t4;
+  if ($[6] !== data || $[7] !== estimateHeight || $[8] !== lookaheadPx || $[9] !== scrollerRef || $[10] !== tableRef) {
+    t4 = () => {
+      var _scrollerRef$current$;
+      if (!tableRef.current) {
+        return;
+      }
+      const containerHeight = (_scrollerRef$current$ = scrollerRef?.current?.clientHeight) !== null && _scrollerRef$current$ !== void 0 ? _scrollerRef$current$ : window.innerHeight;
+      for (const spacerRow of tableRef.current.querySelectorAll(`.${styles.spacerRow}`)) {
+        const rect = spacerRow.getBoundingClientRect();
+        const spacerIntersectsLookaheadArea = rect.top < containerHeight + lookaheadPx && rect.bottom > -lookaheadPx;
+        if (!spacerIntersectsLookaheadArea) {
+          continue;
+        }
+        const visibleOffsetStart = Math.max(0, -rect.top);
+        const visibleOffsetEnd = Math.min(rect.height, containerHeight - rect.top);
+        const materializeOffsetStart = visibleOffsetStart - lookaheadPx;
+        const materializeOffsetEnd = visibleOffsetEnd + lookaheadPx;
+        let offsetInSpacer = 0;
+        const from = Number(spacerRow.dataset.from);
+        const to = Number(spacerRow.dataset.to);
+        for (let i = from; i < to; i++) {
+          const itemMaterialization = itemsMaterialization.current[i];
+          const itemHeight = typeof itemMaterialization === "number" ? itemMaterialization : estimateHeight(data[i], i, data);
+          const itemOffsetStart = offsetInSpacer;
+          const itemOffsetEnd = offsetInSpacer + itemHeight;
+          if (itemOffsetStart < materializeOffsetEnd && itemOffsetEnd > materializeOffsetStart) {
+            itemsMaterialization.current[i] = true;
+          } else {
+            if (itemOffsetStart > materializeOffsetEnd) {
+              break;
+            }
+          }
+          offsetInSpacer = offsetInSpacer + itemHeight;
+        }
+      }
+    };
+    $[6] = data;
+    $[7] = estimateHeight;
+    $[8] = lookaheadPx;
+    $[9] = scrollerRef;
+    $[10] = tableRef;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  const materializeVisibleSpacerItems = t4;
+  let t5;
+  if ($[12] !== data || $[13] !== estimateHeight || $[14] !== length) {
+    t5 = () => {
+      const newVirtualItems = [];
+      let spacerCounter = 0;
+      for (let i_0 = 0; i_0 < length; i_0++) {
+        const itemMaterialization_0 = itemsMaterialization.current[i_0];
+        if (itemMaterialization_0 === true) {
+          newVirtualItems.push({
+            type: "rendered",
+            index: i_0
+          });
+        } else {
+          const lastItemOrSpacer = newVirtualItems[newVirtualItems.length - 1];
+          const lastSpacer = lastItemOrSpacer?.type === "spacer" ? lastItemOrSpacer : undefined;
+          const height = typeof itemMaterialization_0 === "number" ? itemMaterialization_0 : estimateHeight(data[i_0], i_0, data);
+          if (lastSpacer) {
+            lastSpacer.to = i_0 + 1;
+            lastSpacer.height = lastSpacer.height + height;
+          } else {
+            newVirtualItems.push({
+              type: "spacer",
+              from: i_0,
+              to: i_0 + 1,
+              height,
+              key: `${styles.spacerRow}-${spacerCounter++}`
+            });
+          }
+        }
+      }
+      setVirtualItems(newVirtualItems);
+    };
+    $[12] = data;
+    $[13] = estimateHeight;
+    $[14] = length;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  const recomputeVirtualItems = t5;
+  const timerIdRef = useRef(null);
+  const callbacksRef = useRef(null);
+  let t6;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = (...t7) => {
+      const callbacks = t7;
+      if (timerIdRef.current != null) {
+        callbacks.forEach(cb => {
+          callbacksRef.current.delete(cb);
+          callbacksRef.current.add(cb);
+        });
+        return;
+      }
+      callbacksRef.current = new Set(callbacks);
+      timerIdRef.current = window.setTimeout(() => {
+        callbacksRef.current.forEach(_temp);
+        timerIdRef.current = null;
+        callbacksRef.current = null;
+      }, virtualizationThrottleDelay);
+    };
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  const throttle = t6;
+  let t7;
+  let t8;
+  if ($[17] !== enabled || $[18] !== materializeVisibleSpacerItems || $[19] !== minScrollAndResizeDeltaPx || $[20] !== recomputeVirtualItems || $[21] !== scrollerRef) {
+    t7 = () => {
+      if (!enabled) {
+        return;
+      }
+      const scroller = scrollerRef?.current;
+      let lastHandledScrollTop = -Infinity;
+      let lastHandledHeight = -Infinity;
+      let lastHandledWidth = -Infinity;
+      const handleViewportChange = function handleViewportChange() {
+        const scrollTop = scroller ? scroller.scrollTop : window.scrollY;
+        const height_0 = scroller ? scroller.clientHeight : window.innerHeight;
+        const width = scroller ? scroller.clientWidth : window.innerWidth;
+        if (Math.abs(scrollTop - lastHandledScrollTop) >= minScrollAndResizeDeltaPx || Math.abs(height_0 - lastHandledHeight) >= minScrollAndResizeDeltaPx || Math.abs(width - lastHandledWidth) >= minScrollAndResizeDeltaPx) {
+          lastHandledScrollTop = scrollTop;
+          lastHandledHeight = height_0;
+          lastHandledWidth = width;
+          throttle(materializeVisibleSpacerItems, recomputeVirtualItems);
+        }
+      };
+      const scrollTarget = scroller !== null && scroller !== void 0 ? scroller : window;
+      scrollTarget.addEventListener("scroll", handleViewportChange, {
+        passive: true
+      });
+      const resizeObserver = new ResizeObserver(handleViewportChange);
+      const resizeTarget = scroller !== null && scroller !== void 0 ? scroller : document.documentElement;
+      resizeObserver.observe(resizeTarget);
+      handleViewportChange();
+      return () => {
+        scrollTarget.removeEventListener("scroll", handleViewportChange);
+        resizeObserver.unobserve(resizeTarget);
+        resizeObserver.disconnect();
+      };
+    };
+    t8 = [enabled, materializeVisibleSpacerItems, minScrollAndResizeDeltaPx, recomputeVirtualItems, scrollerRef, throttle];
+    $[17] = enabled;
+    $[18] = materializeVisibleSpacerItems;
+    $[19] = minScrollAndResizeDeltaPx;
+    $[20] = recomputeVirtualItems;
+    $[21] = scrollerRef;
+    $[22] = t7;
+    $[23] = t8;
+  } else {
+    t7 = $[22];
+    t8 = $[23];
+  }
+  useEffect(t7, t8);
+  const intersectionObserverHandle = useIntersectionObserverHandle(scrollerRef, scrollerRef ? retentionMarginPx : undefined, !scrollerRef ? retentionMarginPx : undefined);
+  let t9;
+  if ($[24] !== enabled || $[25] !== recomputeVirtualItems) {
+    t9 = (index_0, height_1) => {
+      if (!enabled) {
+        return;
+      }
+      itemsMaterialization.current[index_0] = height_1;
+      throttle(recomputeVirtualItems);
+    };
+    $[24] = enabled;
+    $[25] = recomputeVirtualItems;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+  const collapseItemIntoSpacer = t9;
+  let t10;
+  if ($[27] !== enabled || $[28] !== length) {
+    t10 = Array.from({
+      length: enabled ? 0 : length
+    }, _temp2);
+    $[27] = enabled;
+    $[28] = length;
+    $[29] = t10;
+  } else {
+    t10 = $[29];
+  }
+  const allVisibleVirtualItems = t10;
+  const t11 = enabled ? virtualItems : allVisibleVirtualItems;
+  let t12;
+  if ($[30] !== collapseItemIntoSpacer || $[31] !== intersectionObserverHandle || $[32] !== t11) {
+    t12 = {
+      virtualItems: t11,
+      intersectionObserverHandle,
+      collapseItemIntoSpacer
+    };
+    $[30] = collapseItemIntoSpacer;
+    $[31] = intersectionObserverHandle;
+    $[32] = t11;
+    $[33] = t12;
+  } else {
+    t12 = $[33];
+  }
+  return t12;
+}
+function _temp2(_, index_1) {
+  return {
+    type: "rendered",
+    index: index_1
+  };
+}
+function _temp(cb_0) {
+  return cb_0();
+}
+function SpacerRow(t0) {
+  const $ = c(10);
+  if ($[0] !== "4b7f7b12eb2c9ae3487ce5d00c7be96dc9b8807a6bbfe2c9b314700f443d7188") {
+    for (let $i = 0; $i < 10; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "4b7f7b12eb2c9ae3487ce5d00c7be96dc9b8807a6bbfe2c9b314700f443d7188";
+  }
+  const {
+    spacer: t1,
+    colSpan
+  } = t0;
+  const {
+    from,
+    to,
+    height
+  } = t1;
+  let t2;
+  if ($[1] !== height) {
+    t2 = {
+      height
+    };
+    $[1] = height;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== colSpan || $[4] !== t2) {
+    t3 = /*#__PURE__*/jsx("td", {
+      className: styles.spacerCell,
+      colSpan: colSpan,
+      style: t2
+    });
+    $[3] = colSpan;
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== from || $[7] !== t3 || $[8] !== to) {
+    t4 = /*#__PURE__*/jsx("tr", {
+      className: styles.spacerRow,
+      "data-from": from,
+      "data-to": to,
+      children: t3
+    });
+    $[6] = from;
+    $[7] = t3;
+    $[8] = to;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+}
+
+export { SpacerRow, useTableVirtualize };

package/components/table/table.d.ts

@@ -1,109 +1,211 @@
-/**
- * @name Table
- */
-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> {
+import Table from './table-component';
+import type { ReactNode, RefObject } from 'react';
+export default Table;
+export interface TableProps<T> {
+    /**
+     * The data items to render. `null` and `undefined` as an item is not supported.
+     * Referentially same items are not supported either.
+     */
     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;
+    /**
+     * Columns specification.
+     */
+    columns: Column<T>[];
+    /**
+     * Used to render a row key, e.g. `<tr key={getKey(item, index)}>`.
+     */
+    getKey: (item: T, index: number, items: T[]) => React.Key;
+    /**
+     * If true, the table header will not be rendered.
+     */
+    noHeader?: boolean;
+    /**
+     * Called when the client moves a row by dragging it.
+     */
+    onItemMove?: (item: T, fromIndex: number, toIndex: number, items: T[]) => void;
+    /**
+     * Called when the client clicks on SortButton in a column header.
+     */
+    onSort?: (columnIndex: number, newOrder: SortOrder, columns: Column<T>[]) => void;
+    /**
+     * Called when the client clicks on a column delete button in the header.
+     */
+    onColumnDelete?: (columnIndex: number, columns: Column<T>[]) => void;
+    /**
+     * Called when the client moves a column.
+     */
+    onColumnMove?: (fromIndex: number, toIndex: number, columns: Column<T>[]) => void;
+    /**
+     * Implement to specify props like `clickable`, handlers like `onClick`,
+     * a custom `className`, a `ref` etc., or to provide a custom renderer.
+     *
+     * ```tsx
+     * <Table
+     *   renderItem={(item, index) => (
+     *     <DefaultItemRenderer
+     *       index={index}
+     *       className='my-row'
+     *       clickable
+     *       onClick={() => setSelection(selection.focus(item))}
+     *     />
+     *   )}
+     * />
+     * ```
+     *
+     * In your custom implementation, use `TableRow` and `TableCell` base components to apply the
+     * standard classnames, but beware that `tdClassName` won't be applied.
+     *
+     * You can also use `DefaultItemRenderer` in combination with your custom rows.
+     */
+    renderItem?: (item: T, index: number, items: 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`.
+     */
+    virtualizeRows?: boolean;
+    /**
+     * Used with `virtualizeRows` as a source of scroll events, as a target for ResizeObserver,
+     * and as the root for IntersectionObserver. Required when the scrollable container is not
+     * the whole document.
+     *
+     * If not set:
+     * - scroll listener is attached to `window`
+     * - ResizeObserver observes `document.body`
+     * - IntersectionObserver has no root (i.e. the viewport is used)
+     */
+    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: 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;
+    /**
+     * Whether to show a small gear button at the top right corner.
+     */
+    columnEditButton?: 'everywhere' | 'mobileOnly';
+    /**
+     * 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 = 'none' | 'ascending' | 'descending';
 /**
- * Interactive table with selection and keyboard navigation support.
+ * The column specification.
  */
-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 interface Column<T> {
+    /**
+     * Used to render a row key, e.g. `<thead><tr><td key={getKey(item, index, items)}...</td></tr></thead>`.
+     */
+    key: React.Key;
+    /**
+     * Used in aria-labels of controls which do not contain text,
+     * e.g. `DeleteColumnButton`. If not set, the `String(key)` is used.
+     */
+    name?: string;
+    /**
+     * Default: name ?? String(key)
+     */
+    renderHeader?: () => ReactNode;
+    /**
+     * Renders a single cell value for a column.
+     * Default:
+     * - If item is an Array, renders `String(item[columnIndex])`
+     * - If item is an Object, renders `Object.values(item)[columnIndex]`
+     * - Otherwise:
+     *   - The first column renders `String(item)`
+     *   - Other columns render empty value
+     */
+    renderCell?: (item: T, index: number, items: T[]) => ReactNode;
+    /**
+     * If the column gets an indent when `TableProps.getItemLevel()` returns
+     * a positive number.
+     */
+    indent?: boolean;
+    /**
+     * The current sort order displayed by `SortButton` and indicated
+     * by `aria-sort` in `th`.
+     *
+     * - `undefined` or not set means that the column is not sortable,
+     * and it shouldn't have a `SortButton`.
+     * - `none` means that the column is sortable, but currently not sorted.
+     * It should include a `SortButton`.
+     * - `ascending` and `descending` mean that the column is sorted
+     * in the corresponding order, and it should include a `SortButton`.
+     */
+    sortOrder?: SortOrder;
+    /**
+     * The classname to apply to the `th` element inside `table / thead`.
+     */
+    thClassName?: string;
+    /**
+     * The classname 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 `DefaultItemRenderer`.
+     */
+    tdClassName?: (item: T, index: number, items: T[]) => string | undefined;
 }