@gravity-ui/react-data-table 2.2.1 → 3.0.0

package/README.md

@@ -7,6 +7,14 @@ Cell grouping is supported: rows are first sorted by grouped columns. Grouping i
 Multi-column sorting is also supported. Ctrl+Click on a column adds a column at the end
 of the sort list. A simple Click sorts the table by this column only. Sorting order is switched in the sequence: `none -> default -> reversed default -> none`.
 
+## Virtualization and React StrictMode
+
+Virtualization (`settings.dynamicRender: true`) relies on `react-list`, which has a compatibility limitation with React 18+ StrictMode in development. During StrictMode's mount/unmount/remount check, the scroll listener is removed and not restored. Scrolling can then show empty areas in `uniform` and `variable` modes or stop rendering additional rows in `simple` mode.
+
+This StrictMode remount check does not run in production builds.
+
+`@gravity-ui/react-data-table` is in maintenance mode and will not receive new features. We recommend migrating to [@gravity-ui/table](https://github.com/gravity-ui/table).
+
 ## Properties
 
 | Property          | Type       | Required | Default        | Description                                                                                                                                                                                                                                                             |

package/build/esm/lib/DataTable.d.ts

@@ -41,12 +41,12 @@ declare class TableHead<T> extends React.Component<TableHeadProps<T>> {
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     _calculateColumnsWidth(): void;
     onSort(column?: SlimColumn, multisort?: boolean): void;
     _getOnSortClick(column: HeadCellColumn<T>): ((event: React.MouseEvent<HTMLTableHeaderCellElement>) => void) | undefined;
-    renderHeadCell: (headCell: HeadCellsType<T>) => JSX.Element;
-    renderHeadLevel: (row: HeadColumnsItem<T>, rowIndex: number) => JSX.Element;
+    renderHeadCell: (headCell: HeadCellsType<T>) => React.JSX.Element;
+    renderHeadLevel: (row: HeadColumnsItem<T>, rowIndex: number) => React.JSX.Element;
     dataRowsRef: (ref: HTMLTableSectionElement) => void;
     _getColumnRef: (index: number) => (node: HTMLTableHeaderCellElement) => void;
     _getRenderedColumn: (index?: number) => HTMLTableCellElement | undefined;
@@ -79,10 +79,10 @@ declare class StickyHead<T> extends React.Component<StickyHeadProps<T>, StickyHe
     state: StickyHeadState;
     heightObserver?: HeightObserver;
     _node?: HTMLElement;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     setScrollLeft(scrollLeft: number): void;
     setRightPosition(value: number): void;
-    renderHeader(props: Omit<StickyHeadProps<T>, 'mode' | 'top'>): JSX.Element;
+    renderHeader(props: Omit<StickyHeadProps<T>, 'mode' | 'top'>): React.JSX.Element;
     onDataRowsHeightChange: (height: number) => void;
     updateWidths(newWidths?: number[]): void;
     _nodeRef: (node: HTMLDivElement) => void;
@@ -111,12 +111,12 @@ declare class StickyFooter<T> extends React.PureComponent<StickyFooterProps<T>,
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
-    render(): JSX.Element | null;
+    render(): React.JSX.Element | null;
     _nodeFixedRef: (node: HTMLDivElement) => void;
     _nodeMovingRef: (node: HTMLDivElement) => void;
     setScrollLeft(scrollLeft: number): void;
     setRightPosition(value: number): void;
-    renderFooter(renderedRows: React.ReactNode): JSX.Element;
+    renderFooter(renderedRows: React.ReactNode): React.JSX.Element;
     updateWidths(newWidths?: number[]): void;
 }
 interface TableProps<T> {
@@ -158,7 +158,7 @@ declare class Table<T> extends React.PureComponent<TableProps<T>, TableState> {
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     _refBody: (node: HTMLDivElement) => void;
     _refBox: (node: HTMLDivElement) => void;
     _refHead: (node: TableHead<T>) => void;
@@ -169,20 +169,20 @@ declare class Table<T> extends React.PureComponent<TableProps<T>, TableState> {
     _onColumnsUpdated: (widths: number[]) => void;
     syncHeadWidths(): void;
     _getEmptyRow(): any;
-    renderHead(): JSX.Element;
-    renderStickyHead(): JSX.Element;
-    renderStickyFooter(): JSX.Element;
+    renderHead(): React.JSX.Element;
+    renderStickyHead(): React.JSX.Element;
+    renderStickyFooter(): React.JSX.Element;
     onMovingHeaderDataRowsHeightChange: (height: number) => void;
     onMovingFooterHeightChange: (height: number) => void;
-    renderRow: (vIndex: number) => JSX.Element;
-    renderFooterRow: (rowData: T, index: number) => JSX.Element;
-    renderHeaderRow: (rowData: T, index: number) => JSX.Element;
-    renderRowImpl: (row: T, index: number, { onRowClick, odd, span, footer, headerData }?: RenderRowImplOptions<T>) => JSX.Element;
-    renderTable: (items: React.ReactNode[], ref?: any) => JSX.Element;
-    renderTableDynamic(): JSX.Element;
-    renderTableSimple(): JSX.Element;
-    renderHeaderRows(): JSX.Element[] | undefined;
-    renderFooterRows(): JSX.Element[] | undefined;
+    renderRow: (vIndex: number) => React.JSX.Element;
+    renderFooterRow: (rowData: T, index: number) => React.JSX.Element;
+    renderHeaderRow: (rowData: T, index: number) => React.JSX.Element;
+    renderRowImpl: (row: T, index: number, { onRowClick, odd, span, footer, headerData }?: RenderRowImplOptions<T>) => React.JSX.Element;
+    renderTable: (items: React.ReactNode[], ref?: any) => React.JSX.Element;
+    renderTableDynamic(): React.JSX.Element;
+    renderTableSimple(): React.JSX.Element;
+    renderHeaderRows(): React.JSX.Element[] | undefined;
+    renderFooterRows(): React.JSX.Element[] | undefined;
     getStickyFooterMode(): HeadPositionInner;
 }
 interface RenderRowImplOptions<T> {
@@ -345,9 +345,9 @@ declare class DataTableView<T> extends React.Component<DataTableProps<T>, DataTa
     };
     state: DataTableViewState<T>;
     table?: Table<T>;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     _tableRef: (node: Table<T>) => void;
-    renderMemoizedCell: ({ column, value, row, index, footer, headerData }: CellProps<T>) => JSX.Element;
+    renderMemoizedCell: ({ column, value, row, index, footer, headerData }: CellProps<T>) => React.JSX.Element;
     getColumn: (column: Column<T>, columnIndex: number) => {
         resizeable: boolean;
         sortable: boolean;
@@ -355,7 +355,7 @@ declare class DataTableView<T> extends React.Component<DataTableProps<T>, DataTa
         _getValue: (row: T) => any;
         _getTitle: (row: T) => any;
         _getSortValue: (row: T) => any;
-        _renderValue: (({ value, row, index, footer, headerData }: Omit<CellProps<T>, 'column'>) => JSX.Element) | (({ value }: Partial<CellProps<T>>) => any);
+        _renderValue: (({ value, row, index, footer, headerData }: Omit<CellProps<T>, 'column'>) => React.JSX.Element) | (({ value }: Partial<CellProps<T>>) => any);
         _getOnClick: ((data: {
             row: T;
             index: number;
@@ -457,7 +457,7 @@ export default class DataTable<T> extends React.PureComponent<DataTableProps<T>,
     componentDidMount(): void;
     componentDidUpdate(prevProps: Readonly<DataTableProps<T>>): void;
     componentDidCatch(error: unknown): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     _tableRef: (node: DataTableView<T>) => void;
     resize(): void;
 }

package/build/esm/lib/ResizeHandler.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface ResizeHandlerProps {
     getColumn: (index?: number) => HTMLTableCellElement | undefined;
     columnIndex?: number;
@@ -7,5 +7,5 @@ interface ResizeHandlerProps {
     minWidth?: number;
     onResize?: (columnId: string, width: number) => void;
 }
-export declare function ResizeHandler({ getColumn, columnIndex, columnId, minWidth, maxWidth, onResize, }: ResizeHandlerProps): JSX.Element;
+export declare function ResizeHandler({ getColumn, columnIndex, columnId, minWidth, maxWidth, onResize, }: ResizeHandlerProps): React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/react-data-table",
-  "version": "2.2.1",
+  "version": "3.0.0",
   "description": "DataTable component",
   "keywords": [
     "table"
@@ -62,7 +62,7 @@
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^2.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^7.0.0 || >=7.0.0-beta.6",
+    "@gravity-ui/uikit": "^8.0.0",
     "@storybook/addon-actions": "^7.3.1",
     "@storybook/addon-essentials": "^7.3.1",
     "@storybook/addon-interactions": "^7.3.1",
@@ -70,8 +70,8 @@
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^7.3.1",
     "@storybook/react-webpack5": "^7.3.1",
-    "@types/react": "16.14.21",
-    "@types/react-dom": "16.9.14",
+    "@types/react": "18.3.31",
+    "@types/react-dom": "18.3.7",
     "@types/react-list": "0.8.7",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "copyfiles": "2.4.1",
@@ -94,7 +94,7 @@
     "typescript": "^5.1.6"
   },
   "peerDependencies": {
-    "react": ">=16.14.0"
+    "react": ">=18.0.0"
   },
   "publishConfig": {
     "access": "public"