adds network-modification-table

package.json

@@ -56,6 +56,8 @@
         "react-resizable-panels": "^3.0.6",
         "reconnecting-websocket": "^4.4.0",
         "type-fest": "^4.41.0",
+        "@tanstack/react-table": "^8.21.3",
+        "@tanstack/react-virtual": "^3.13.18",
         "uuid": "^13.0.0"
     },
     "peerDependencies": {

src/components/index.ts

@@ -30,3 +30,4 @@ export * from './menus';
 export * from './muiTable';
 export * from './resizablePanels';
 export * from './network-modifications';
+export * from './network-modification-table';

src/components/network-modification-table/columns-definition.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2026, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import {
+    NetworkModificationEditorNameHeaderProps,
+} from './renderers';
+
+const CHIP_PADDING_PX = 24;
+const CHAR_WIDTH_PX = 8;
+const COLUMN_PADDING_PX = 12;
+const MIN_COLUMN_SIZE = 40;
+
+export const computeTagMinSize = (tag: string): number => {
+    const chipContentWidth = tag.length * CHAR_WIDTH_PX + CHIP_PADDING_PX;
+    return Math.max(chipContentWidth + COLUMN_PADDING_PX, MIN_COLUMN_SIZE);
+};
+
+export const BASE_MODIFICATION_TABLE_COLUMNS = {
+    DRAG_HANDLE: {
+        id: 'dragHandle',
+        autoExtensible: false,
+    },
+    SELECT: {
+        id: 'select',
+        autoExtensible: false,
+    },
+    NAME: {
+        id: 'modificationName',
+        autoExtensible: true,
+    },
+    DESCRIPTION: {
+        id: 'modificationDescription',
+        autoExtensible: false,
+    },
+    SWITCH: {
+        id: 'switch',
+        autoExtensible: false,
+    },
+};
+
+export const AUTO_EXTENSIBLE_COLUMNS = Object.values(BASE_MODIFICATION_TABLE_COLUMNS)
+    .filter((column) => column.autoExtensible)
+    .map((column) => column.id);
+
+export type NameHeaderProps = Omit<NetworkModificationEditorNameHeaderProps, 'modificationCount'>;

src/components/network-modification-table/index.ts

@@ -0,0 +1,14 @@
+/**
+import NetworkModificationsTable from './network-modification-table/network-modifications-table';
+ * Copyright (c) 2026, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+export * from './network-table-styles';
+export * from './columns-definition';
+export * from './network-modifications-table';
+export * from './use-modifications-drag-and-drop';
+export * from './renderers';
+export * from './row';

src/components/network-modification-table/network-modifications-table.tsx

@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2026, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import React, { Dispatch, SetStateAction, useEffect, useMemo, useRef } from 'react';
+import { Box, Table, TableBody, TableCell, TableHead, TableRow, useTheme } from '@mui/material';
+import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { DragDropContext, DragStart, Droppable, DroppableProvided, DropResult } from '@hello-pangea/dnd';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { UUID } from 'node:crypto';
+import { NetworkModificationEditorNameHeaderProps } from './renderers';
+import { AUTO_EXTENSIBLE_COLUMNS, NameHeaderProps } from './columns-definition';
+import { useModificationsDragAndDrop } from './use-modifications-drag-and-drop';
+import { NetworkModificationMetadata } from '../../hooks';
+import { createHeaderCellStyle, MODIFICATION_ROW_HEIGHT, networkTableStyles } from './network-table-styles';
+import { ModificationRow } from './row';
+
+interface NetworkModificationsTableProps extends Omit<NetworkModificationEditorNameHeaderProps, 'modificationCount'> {
+    modifications: NetworkModificationMetadata[];
+    setModifications: Dispatch<SetStateAction<NetworkModificationMetadata[]>>;
+    handleCellClick: (modification: NetworkModificationMetadata) => void;
+    isRowDragDisabled?: boolean;
+    onRowDragStart: (event: DragStart) => void;
+    onRowDragEnd: (event: DropResult) => void;
+    onRowSelected: (selectedRows: NetworkModificationMetadata[]) => void;
+    createAllColumns: (isRowDragDisabled: boolean,
+                        modificationsCount: number,
+                        nameHeaderProps: NameHeaderProps,
+                        setModifications: React.Dispatch<SetStateAction<NetworkModificationMetadata[]>>
+    ) => ColumnDef<NetworkModificationMetadata, any>[];
+    highlightedModificationUuid: UUID | null;
+}
+
+export function NetworkModificationsTable({
+                                              modifications,
+                                              setModifications,
+                                              handleCellClick,
+                                              isRowDragDisabled = false,
+                                              onRowDragStart,
+                                              onRowDragEnd,
+                                              onRowSelected,
+                                              createAllColumns,
+                                              highlightedModificationUuid,
+                                              ...nameHeaderProps
+                                          }: Readonly<NetworkModificationsTableProps>) {
+    const theme = useTheme();
+
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const lastClickedIndex = useRef<number | null>(null);
+
+    const columns = useMemo<ColumnDef<NetworkModificationMetadata>[]>(() =>
+        createAllColumns(isRowDragDisabled ?? false,
+            modifications.length,
+            nameHeaderProps,
+            setModifications)
+    , [
+    isRowDragDisabled,
+    modifications,
+    nameHeaderProps,
+    setModifications,
+]);
+
+    const table = useReactTable({
+        data: modifications,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getRowId: (row:any) => row.uuid,
+        enableRowSelection: true,
+        meta: { lastClickedIndex, onRowSelected },
+    });
+
+    const { rows } = table.getRowModel();
+
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: () => containerRef.current,
+        overscan: 5,
+        estimateSize: () => MODIFICATION_ROW_HEIGHT,
+    });
+    const virtualItems = virtualizer.getVirtualItems();
+
+    const { handleDragUpdate, handleDragEnd, renderClone } = useModificationsDragAndDrop({
+        rows,
+        containerRef,
+        onRowDragEnd,
+    });
+
+    useEffect(() => {
+        table.resetRowSelection();
+        lastClickedIndex.current = null;
+    }, [table]);
+
+    useEffect(() => {
+        if (highlightedModificationUuid && containerRef.current) {
+            const rowIndex = rows.findIndex((row) => row.original.uuid === highlightedModificationUuid);
+            if (rowIndex !== -1) {
+                virtualizer.scrollToIndex(rowIndex, { align: 'start', behavior: 'auto' });
+            }
+        }
+    }, [highlightedModificationUuid, rows, virtualizer]);
+
+    return (
+        <DragDropContext onDragEnd={handleDragEnd} onDragStart={onRowDragStart} onDragUpdate={handleDragUpdate}>
+            <Box sx={networkTableStyles.tableWrapper}>
+                <Droppable droppableId="modifications-table" mode="virtual" renderClone={renderClone}>
+                    {(provided: DroppableProvided) => (
+                        <Box ref={containerRef} sx={networkTableStyles.container}>
+                            <Table sx={networkTableStyles.table}>
+                                <TableHead sx={networkTableStyles.thead}>
+                                    {table.getHeaderGroups().map((headerGroup) => (
+                                        <TableRow key={headerGroup.id} sx={networkTableStyles.tableRow}>
+                                            {headerGroup.headers.map((header) => (
+                                                <TableCell
+                                                    key={header.id}
+                                                    sx={createHeaderCellStyle(
+                                                        header,
+                                                        theme,
+                                                        header.index === 0,
+                                                        header.index === headerGroup.headers.length - 1,
+                                                        AUTO_EXTENSIBLE_COLUMNS.includes(header.column.id)
+                                                    )}
+                                                >
+                                                    {flexRender(header.column.columnDef.header, header.getContext())}
+                                                </TableCell>
+                                            ))}
+                                        </TableRow>
+                                    ))}
+                                </TableHead>
+                                <TableBody
+                                    ref={provided.innerRef}
+                                    {...provided.droppableProps}
+                                    sx={{ ...networkTableStyles.tableBody, height: `${virtualizer.getTotalSize()}px` }}
+                                >
+                                    {virtualItems.map((virtualRow) => {
+                                        const row = rows[virtualRow.index];
+                                        return (
+                                            <ModificationRow
+                                                key={row.id}
+                                                virtualRow={virtualRow}
+                                                row={row}
+                                                handleCellClick={handleCellClick}
+                                                isRowDragDisabled={isRowDragDisabled}
+                                                highlightedModificationUuid={highlightedModificationUuid}
+                                            />
+                                        );
+                                    })}
+                                </TableBody>
+                            </Table>
+                        </Box>
+                    )}
+                </Droppable>
+            </Box>
+        </DragDropContext>
+    );
+}