[Tech] refactor useTable and useVirtualizer hooks

frontend/src/components/TableWithSelectableRows/Header.tsx

@@ -0,0 +1,30 @@
+import { Icon, TableWithSelectableRows, THEME } from '@mtes-mct/monitor-ui'
+import { flexRender } from '@tanstack/react-table'
+
+export function TableWithSelectableRowsHeader({ headerGroup }) {
+  return (
+    <tr key={headerGroup.id}>
+      {headerGroup.headers.map(header => (
+        <TableWithSelectableRows.Th key={header.id} $width={header.column.getSize()}>
+          {header.id === 'select' && flexRender(header.column.columnDef.header, header.getContext())}
+          {header.id !== 'select' && !header.isPlaceholder && (
+            <TableWithSelectableRows.SortContainer
+              className={header.column.getCanSort() ? 'cursor-pointer select-none' : ''}
+              onClick={header.column.getToggleSortingHandler()}
+            >
+              {flexRender(header.column.columnDef.header, header.getContext())}
+
+              {header.column.getCanSort() &&
+                ({
+                  asc: <Icon.SortSelectedUp size={14} />,
+                  desc: <Icon.SortSelectedDown size={14} />
+                }[header.column.getIsSorted() as string] ?? (
+                  <Icon.SortingChevrons color={THEME.color.lightGray} size={14} />
+                ))}
+            </TableWithSelectableRows.SortContainer>
+          )}
+        </TableWithSelectableRows.Th>
+      ))}
+    </tr>
+  )
+}

frontend/src/components/TableWithSelectableRows/index.tsx

@@ -0,0 +1 @@
+export const TableWithSelectableRows = () => {}

frontend/src/features/Dashboard/components/DashboardsList/DashboardsTable.tsx

@@ -2,11 +2,12 @@ import { useGetControlUnitsQuery } from '@api/controlUnitsAPI'
 import { useGetRegulatoryLayersQuery } from '@api/regulatoryLayersAPI'
 import { Table } from '@components/Table'
 import { StyledSkeletonRow } from '@features/commonComponents/Skeleton'
-import { getCoreRowModel, getSortedRowModel, useReactTable, type SortingState } from '@tanstack/react-table'
-import { useVirtualizer } from '@tanstack/react-virtual'
+import { useTable } from '@hooks/useTable'
+import { useTableVirtualizer } from '@hooks/useTableVirtualizer'
+import { type SortingState } from '@tanstack/react-table'
 import { isLegacyFirefox } from '@utils/isLegacyFirefox'
 import { paths } from 'paths'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { useLocation } from 'react-router'
 
 import { Columns } from './Columns'
@@ -42,28 +43,16 @@ export function DashboardsTable({ dashboards, isLoading }: DashboardsTableProps)
 
   const tableData = useMemo(() => (isLoading ? Array(5).fill({}) : dashboards), [isLoading, dashboards])
 
-  const table = useReactTable({
+  const table = useTable({
     columns,
     data: tableData,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onSortingChange: setSorting,
-    state: {
-      sorting
-    }
+    setSorting,
+    sorting,
+    withRowSelection: false
   })
 
   const { rows } = table.getRowModel()
-  const rowVirtualizer = useVirtualizer({
-    count: rows.length,
-    estimateSize: () => 43,
-    getItemKey: useCallback((index: number) => `${rows[index]?.id}`, [rows]),
-    getScrollElement: () => tableContainerRef.current,
-    overscan: 10,
-    scrollPaddingEnd: 40,
-    scrollPaddingStart: 40
-  })
+  const rowVirtualizer = useTableVirtualizer({ estimateSize: 45, ref: tableContainerRef, rows })
 
   const virtualRows = rowVirtualizer.getVirtualItems()
 

frontend/src/features/Reportings/components/ReportingsList/ReportingsTable.tsx

@@ -1,12 +1,14 @@
+import { TableWithSelectableRowsHeader } from '@components/TableWithSelectableRows/Header'
 import { StyledSkeletonRow } from '@features/commonComponents/Skeleton'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { useGetControlPlans } from '@hooks/useGetControlPlans'
-import { Icon, THEME, TableWithSelectableRows } from '@mtes-mct/monitor-ui'
-import { flexRender, getCoreRowModel, getSortedRowModel, type SortingState, useReactTable } from '@tanstack/react-table'
-import { useVirtualizer } from '@tanstack/react-virtual'
+import { useTable } from '@hooks/useTable'
+import { useTableVirtualizer } from '@hooks/useTableVirtualizer'
+import { TableWithSelectableRows } from '@mtes-mct/monitor-ui'
+import { flexRender, type RowSelectionState, type SortingState } from '@tanstack/react-table'
 import { isLegacyFirefox } from '@utils/isLegacyFirefox'
 import { paths } from 'paths'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { useLocation } from 'react-router'
 import styled, { css } from 'styled-components'
 
@@ -28,7 +30,7 @@ export function ReportingsTable({
 
   const openReportings = useAppSelector(state => state.reporting.reportings)
   const { themes } = useGetControlPlans()
-  const [rowSelection, setRowSelection] = useState({})
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
   const [sorting, setSorting] = useState<SortingState>([{ desc: true, id: 'createdAt' }])
 
   const tableData = useMemo(() => (isLoading ? Array(5).fill({}) : reportings), [isLoading, reportings])
@@ -41,32 +43,20 @@ export function ReportingsTable({
     [isLoading, legacyFirefoxOffset, themes]
   )
 
-  const table = useReactTable({
+  const table = useTable({
     columns,
     data: tableData,
-    enableMultiRowSelection: true,
-    enableRowSelection: true,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    state: {
-      rowSelection,
-      sorting
-    }
+    rowSelection,
+    setRowSelection,
+    setSorting,
+    sorting,
+    withRowSelection: true
   })
 
   const tableContainerRef = useRef<HTMLDivElement>(null)
 
   const { rows } = table.getRowModel()
-  const rowVirtualizer = useVirtualizer({
-    count: rows.length,
-    estimateSize: () => 40,
-    getItemKey: useCallback((index: number) => `${rows[index]?.id}`, [rows]),
-    getScrollElement: () => tableContainerRef.current,
-    overscan: 10
-  })
+  const rowVirtualizer = useTableVirtualizer({ estimateSize: 48, ref: tableContainerRef, rows })
 
   const virtualRows = rowVirtualizer.getVirtualItems()
   const paddingTop = virtualRows.length > 0 ? Math.max(0, virtualRows[0]?.start ?? 0) : 0
@@ -92,29 +82,7 @@ export function ReportingsTable({
         <StyledTable $isSideWindowOpenInTab={pathname === paths.sidewindow} $withRowCheckbox>
           <TableWithSelectableRows.Head>
             {table.getHeaderGroups().map(headerGroup => (
-              <tr key={headerGroup.id}>
-                {headerGroup.headers.map(header => (
-                  <TableWithSelectableRows.Th key={header.id} $width={header.column.getSize()}>
-                    {header.id === 'select' && flexRender(header.column.columnDef.header, header.getContext())}
-                    {header.id !== 'select' && !header.isPlaceholder && (
-                      <TableWithSelectableRows.SortContainer
-                        className={header.column.getCanSort() ? 'cursor-pointer select-none' : ''}
-                        onClick={header.column.getToggleSortingHandler()}
-                      >
-                        {flexRender(header.column.columnDef.header, header.getContext())}
-
-                        {header.column.getCanSort() &&
-                          ({
-                            asc: <Icon.SortSelectedUp size={14} />,
-                            desc: <Icon.SortSelectedDown size={14} />
-                          }[header.column.getIsSorted() as string] ?? (
-                            <Icon.SortingChevrons color={THEME.color.lightGray} size={14} />
-                          ))}
-                      </TableWithSelectableRows.SortContainer>
-                    )}
-                  </TableWithSelectableRows.Th>
-                ))}
-              </tr>
+              <TableWithSelectableRowsHeader key={headerGroup.id} headerGroup={headerGroup} />
             ))}
           </TableWithSelectableRows.Head>
           <tbody>
@@ -135,8 +103,8 @@ export function ReportingsTable({
                   {row?.getVisibleCells().map(cell => (
                     <StyledTd
                       key={cell.id}
-                      $hasRightBorder={!!(cell.column.id === 'geom')}
-                      $isCenter={!!(cell.column.id === 'geom' || cell.column.id === 'edit')}
+                      $hasRightBorder={cell.column.id === 'geom'}
+                      $isCenter={cell.column.id === 'geom' || cell.column.id === 'edit'}
                       $isLegacyFirefox={!!legacyFirefoxOffset}
                       style={{
                         maxWidth: cell.column.getSize(),

frontend/src/features/VigilanceArea/components/VigilanceAreasList/VigilanceAreasTable.tsx

@@ -1,10 +1,12 @@
+import { TableWithSelectableRowsHeader } from '@components/TableWithSelectableRows/Header'
 import { StyledSkeletonRow } from '@features/commonComponents/Skeleton'
-import { Icon, pluralize, TableWithSelectableRows, THEME } from '@mtes-mct/monitor-ui'
-import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, type SortingState } from '@tanstack/react-table'
-import { useVirtualizer } from '@tanstack/react-virtual'
+import { useTable } from '@hooks/useTable'
+import { useTableVirtualizer } from '@hooks/useTableVirtualizer'
+import { pluralize, TableWithSelectableRows } from '@mtes-mct/monitor-ui'
+import { flexRender, type SortingState } from '@tanstack/react-table'
 import { isLegacyFirefox } from '@utils/isLegacyFirefox'
 import { paths } from 'paths'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { useLocation } from 'react-router'
 import styled from 'styled-components'
 
@@ -15,7 +17,6 @@ export function VigilanceAreasTable({ isLoading, vigilanceAreas }) {
 
   const legacyFirefoxOffset = pathname !== paths.sidewindow && isLegacyFirefox() ? -35 : 0
 
-  const [rowSelection, setRowSelection] = useState({})
   const [sorting, setSorting] = useState<SortingState>([{ desc: true, id: 'name' }])
 
   const tableData = useMemo(() => (isLoading ? Array(5).fill({}) : vigilanceAreas), [isLoading, vigilanceAreas])
@@ -28,34 +29,18 @@ export function VigilanceAreasTable({ isLoading, vigilanceAreas }) {
     [isLoading, legacyFirefoxOffset]
   )
 
-  const table = useReactTable({
+  const table = useTable({
     columns,
     data: tableData,
-    enableMultiRowSelection: true,
-    enableRowSelection: true,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    state: {
-      rowSelection,
-      sorting
-    }
+    setSorting,
+    sorting,
+    withRowSelection: false
   })
 
   const tableContainerRef = useRef<HTMLDivElement>(null)
 
   const { rows } = table.getRowModel()
-  const rowVirtualizer = useVirtualizer({
-    count: rows.length,
-    estimateSize: () => 40,
-    getItemKey: useCallback((index: number) => `${rows[index]?.id}`, [rows]),
-    getScrollElement: () => tableContainerRef.current,
-    overscan: 10,
-    paddingEnd: 40,
-    paddingStart: 40
-  })
+  const rowVirtualizer = useTableVirtualizer({ estimateSize: 42, ref: tableContainerRef, rows })
 
   const virtualRows = rowVirtualizer.getVirtualItems()
 
@@ -65,28 +50,7 @@ export function VigilanceAreasTable({ isLoading, vigilanceAreas }) {
       <TableWithSelectableRows.Table>
         <TableWithSelectableRows.Head>
           {table.getHeaderGroups().map(headerGroup => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => (
-                <TableWithSelectableRows.Th key={header.id} $width={header.column.getSize()}>
-                  {!header.isPlaceholder && (
-                    <TableWithSelectableRows.SortContainer
-                      className={header.column.getCanSort() ? 'cursor-pointer select-none' : ''}
-                      onClick={header.column.getToggleSortingHandler()}
-                    >
-                      {flexRender(header.column.columnDef.header, header.getContext())}
-
-                      {header.column.getCanSort() &&
-                        ({
-                          asc: <Icon.SortSelectedUp size={14} />,
-                          desc: <Icon.SortSelectedDown size={14} />
-                        }[header.column.getIsSorted() as string] ?? (
-                          <Icon.SortingChevrons color={THEME.color.lightGray} size={14} />
-                        ))}
-                    </TableWithSelectableRows.SortContainer>
-                  )}
-                </TableWithSelectableRows.Th>
-              ))}
-            </tr>
+            <TableWithSelectableRowsHeader key={headerGroup.id} headerGroup={headerGroup} />
           ))}
         </TableWithSelectableRows.Head>
         <tbody>
@@ -98,8 +62,8 @@ export function VigilanceAreasTable({ isLoading, vigilanceAreas }) {
                 {row?.getVisibleCells().map(cell => (
                   <TableWithSelectableRows.Td
                     key={cell.id}
-                    $hasRightBorder={!!(cell.column.id === 'geom')}
-                    $isCenter={!!(cell.column.id === 'geom' || cell.column.id === 'edit')}
+                    $hasRightBorder={cell.column.id === 'geom'}
+                    $isCenter={cell.column.id === 'geom' || cell.column.id === 'edit'}
                   >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableWithSelectableRows.Td>

frontend/src/features/VigilanceArea/components/VigilanceAreasList/index.tsx

@@ -12,8 +12,6 @@ export function VigilancesAreasList() {
       <StyledHeader>
         <Title data-cy="SideWindowHeader-title">Zones de vigilance</Title>
       </StyledHeader>
-      {/*       {isControlPlansLoading ? <div>Chargement</div> : <ReportingsFilters />}
-       */}
       {isError ? (
         <p data-cy="listReportingWrapper">Erreur au chargement des données</p>
       ) : (

frontend/src/features/missions/MissionsList/MissionsTable.tsx

@@ -1,9 +1,10 @@
 import { Table } from '@components/Table'
-import { getCoreRowModel, getSortedRowModel, useReactTable, type SortingState } from '@tanstack/react-table'
-import { useVirtualizer } from '@tanstack/react-virtual'
+import { useTable } from '@hooks/useTable'
+import { useTableVirtualizer } from '@hooks/useTableVirtualizer'
+import { type SortingState } from '@tanstack/react-table'
 import { isLegacyFirefox } from '@utils/isLegacyFirefox'
 import { paths } from 'paths'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { useLocation } from 'react-router'
 
 import { Columns } from './Columns'
@@ -29,28 +30,17 @@ export function MissionsTable({ isLoading, missions }: { isLoading: boolean; mis
 
   const tableData = useMemo(() => (isLoading ? Array(5).fill({}) : missions), [isLoading, missions])
 
-  const table = useReactTable({
+  const table = useTable({
     columns,
     data: tableData,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onSortingChange: setSorting,
-    state: {
-      sorting
-    }
+    setSorting,
+    sorting,
+    withRowSelection: false
   })
 
   const { rows } = table.getRowModel()
-  const rowVirtualizer = useVirtualizer({
-    count: rows.length,
-    estimateSize: () => 40,
-    getItemKey: useCallback((index: number) => `${rows[index]?.id}`, [rows]),
-    getScrollElement: () => tableContainerRef.current,
-    overscan: 10,
-    scrollPaddingEnd: 40,
-    scrollPaddingStart: 40
-  })
+
+  const rowVirtualizer = useTableVirtualizer({ estimateSize: 45, ref: tableContainerRef, rows })
 
   const virtualRows = rowVirtualizer.getVirtualItems()