fix: rename VirtualTable to PaginatedTable, remove old hooks (#995)

Author: artemmufazalov

src/components/NodeHostWrapper/NodeHostWrapper.scss

@@ -8,7 +8,7 @@
 }
 
 .data-table__row:hover,
-.ydb-virtual-table__row:hover {
+.ydb-paginated-table__row:hover {
     .ydb-node-host-wrapper__external-button {
         display: inline-flex;
     }

…omponents/VirtualTable/VirtualTable.scss …nents/PaginatedTable/PaginatedTable.scsssrc/components/VirtualTable/VirtualTable.scss renamed to src/components/PaginatedTable/PaginatedTable.scss src/components/VirtualTable/VirtualTable.scss renamed to src/components/PaginatedTable/PaginatedTable.scss

@@ -1,13 +1,13 @@
 @import '../../styles/mixins.scss';
 
-.ydb-virtual-table {
+.ydb-paginated-table {
     $block: &;
-    $cell-border: 1px solid var(--virtual-table-border-color);
-    --virtual-table-cell-vertical-padding: 5px;
-    --virtual-table-cell-horizontal-padding: 10px;
+    $cell-border: 1px solid var(--paginated-table-border-color);
+    --paginated-table-cell-vertical-padding: 5px;
+    --paginated-table-cell-horizontal-padding: 10px;
 
-    --virtual-table-border-color: var(--g-color-base-generic-hover);
-    --virtual-table-hover-color: var(--g-color-base-float-hover);
+    --paginated-table-border-color: var(--g-color-base-generic-hover);
+    --paginated-table-hover-color: var(--g-color-base-float-hover);
 
     width: 100%;
     @include body-2-typography();
@@ -27,7 +27,7 @@
 
     &__row {
         &:hover {
-            background: var(--virtual-table-hover-color);
+            background: var(--paginated-table-hover-color);
         }
 
         &_empty {
@@ -75,8 +75,8 @@
 
         width: 100%;
         max-width: 100%;
-        padding: var(--virtual-table-cell-vertical-padding)
-            var(--virtual-table-cell-horizontal-padding);
+        padding: var(--paginated-table-cell-vertical-padding)
+            var(--paginated-table-cell-horizontal-padding);
 
         &_align {
             &_left {
@@ -122,8 +122,8 @@
 
         width: 100%;
         max-width: 100%;
-        padding: var(--virtual-table-cell-vertical-padding)
-            var(--virtual-table-cell-horizontal-padding);
+        padding: var(--paginated-table-cell-vertical-padding)
+            var(--paginated-table-cell-horizontal-padding);
 
         vertical-align: middle;
         white-space: nowrap;

…components/VirtualTable/VirtualTable.tsx …onents/PaginatedTable/PaginatedTable.tsxsrc/components/VirtualTable/VirtualTable.tsx renamed to src/components/PaginatedTable/PaginatedTable.tsx src/components/VirtualTable/VirtualTable.tsx renamed to src/components/PaginatedTable/PaginatedTable.tsx

@@ -11,7 +11,7 @@ import {EmptyTableRow} from './TableRow';
 import {DEFAULT_REQUEST_TIMEOUT, DEFAULT_TABLE_ROW_HEIGHT} from './constants';
 import i18n from './i18n';
 import {
-    createVirtualTableReducer,
+    createPaginatedTableReducer,
     initChunk,
     removeChunk,
     resetChunks,
@@ -35,9 +35,9 @@ import type {
 } from './types';
 import {useIntersectionObserver} from './useIntersectionObserver';
 
-import './VirtualTable.scss';
+import './PaginatedTable.scss';
 
-export interface VirtualTableProps<T> {
+export interface PaginatedTableProps<T> {
     limit: number;
     fetchData: FetchData<T>;
     columns: Column<T>[];
@@ -54,7 +54,7 @@ export interface VirtualTableProps<T> {
     dependencyArray?: unknown[]; // Fully reload table on params change
 }
 
-export const VirtualTable = <T,>({
+export const PaginatedTable = <T,>({
     limit,
     fetchData,
     columns,
@@ -67,11 +67,11 @@ export const VirtualTable = <T,>({
     renderEmptyDataMessage,
     renderErrorMessage,
     dependencyArray,
-}: VirtualTableProps<T>) => {
+}: PaginatedTableProps<T>) => {
     const inited = React.useRef(false);
     const tableContainer = React.useRef<HTMLDivElement>(null);
 
-    const [state, dispatch] = React.useReducer(createVirtualTableReducer<T>(), {});
+    const [state, dispatch] = React.useReducer(createPaginatedTableReducer<T>(), {});
 
     const [sortParams, setSortParams] = React.useState<SortParams | undefined>(initialSortParams);
 

…omponents/VirtualTable/ResizeHandler.tsx …ponents/PaginatedTable/ResizeHandler.tsxsrc/components/VirtualTable/ResizeHandler.tsx renamed to src/components/PaginatedTable/ResizeHandler.tsx src/components/VirtualTable/ResizeHandler.tsx renamed to src/components/PaginatedTable/ResizeHandler.tsx

@@ -2,8 +2,8 @@ import type {ColumnWidthByName} from '@gravity-ui/react-data-table';
 
 import {useTableResize} from '../../utils/hooks/useTableResize';
 
-import type {VirtualTableProps} from './VirtualTable';
-import {VirtualTable} from './VirtualTable';
+import type {PaginatedTableProps} from './PaginatedTable';
+import {PaginatedTable} from './PaginatedTable';
 import type {Column} from './types';
 
 function updateColumnsWidth<T>(columns: Column<T>[], columnsWidthSetup: ColumnWidthByName) {
@@ -12,20 +12,24 @@ function updateColumnsWidth<T>(columns: Column<T>[], columnsWidthSetup: ColumnWi
     });
 }
 
-interface ResizeableVirtualTableProps<T> extends Omit<VirtualTableProps<T>, 'onColumnsResize'> {
+interface ResizeablePaginatedTableProps<T> extends Omit<PaginatedTableProps<T>, 'onColumnsResize'> {
     columnsWidthLSKey: string;
 }
 
-export function ResizeableVirtualTable<T>({
+export function ResizeablePaginatedTable<T>({
     columnsWidthLSKey,
     columns,
     ...props
-}: ResizeableVirtualTableProps<T>) {
+}: ResizeablePaginatedTableProps<T>) {
     const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
 
     const updatedColumns = updateColumnsWidth(columns, tableColumnsWidth);
 
     return (
-        <VirtualTable columns={updatedColumns} onColumnsResize={setTableColumnsWidth} {...props} />
+        <PaginatedTable
+            columns={updatedColumns}
+            onColumnsResize={setTableColumnsWidth}
+            {...props}
+        />
     );
 }