t function from i18next breaks dnd when given as a dependency to columns' useMemo about table HOT 10 CLOSED

{
  accessorKey: 'someProp',
  // eslint-disable-next-line react/no-unstable-nested-components
  header: () => <Translate translation={{key: `i18nextKeyGoesHere`}} />,
  cell: (c) => c.getValue()
}

import React, {useCallback, useMemo} from 'react';
import {
  useReactTable,
  getCoreRowModel,
  getSortedRowModel,
  type RowData,
  type ColumnDef,
  type Row
} from '@tanstack/react-table';
import classNames from 'classnames';
import {
  DndContext,
  useSensors,
  type DndContextProps,
  useSensor,
  MouseSensor,
  TouchSensor,
  KeyboardSensor,
  type DragEndEvent,
  closestCenter
} from '@dnd-kit/core';
import {SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable';
import {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';
import '../../style/components/ReactTable.scss';
import DraggableRow from './DraggableRow';
import ReactTableHeader from './ReactTableHeader';
import ReactTableFooter from './ReactTableFooter';

export type ReactTableProps<T> = {
  data: T[];
  columns: ColumnDef<T>[];
  enableSorting?: boolean;
  enableDragging?: boolean;
  getRowCanExpand?: (row: Row<T>) => boolean;
  renderSubComponent?: (props: {id: string; toggleSubComponent: () => void}) => React.ReactElement;
  isSubComponentUnderRow?: boolean;
  onRowPositionChanged?: (oldIndex: number, newIndex: number) => void;
  getRowId?: (originalRow: T, index: number, parent?: Row<T> | undefined) => string;
};

declare module '@tanstack/react-table' {
  // eslint-disable-next-line unused-imports/no-unused-vars
  interface ColumnMeta<TData extends RowData, TValue> {
    className?: string;
    footerOptions?: {
      isHeader?: boolean;
    };
  }
}

declare module '@tanstack/react-table' {
  // eslint-disable-next-line unused-imports/no-unused-vars
  interface CellContext<TData extends RowData, TValue> {
    dragHandleProps?: Record<string, unknown>;
  }
}

const ReactTable = <T,>({
  data,
  columns,
  enableSorting = false,
  enableDragging = false,
  getRowCanExpand = () => true,
  renderSubComponent,
  isSubComponentUnderRow = true,
  onRowPositionChanged,
  getRowId
}: ReactTableProps<T>) => {
  const table = useReactTable({
    data,
    columns,
    enableSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getRowCanExpand,
    getRowId
  });

  if (enableDragging && !getRowId) {
    // Since react-table uses indexes by default as row identities, this will not anymore work
    // with dnd since the indexes will change. In this case, we need a unique non-index Id.
    throw new Error('Custom getRowId is required when drag n drop is enabled');
  }

  const headerGroups = table.getHeaderGroups();
  const rowModel = table.getRowModel();
  const footerGroups = table.getFooterGroups();

  const anyFooter = footerGroups
    .flatMap((fg) => fg.headers)
    .some((h) => h.column.columnDef.footer !== undefined);

  // by default returns indexes unless custom getRowId is provided
  const identifiers = rowModel.rows.map((r) => r.id);

  // #region dnd

  const sensors = useSensors(
    useSensor(MouseSensor, {}),
    useSensor(TouchSensor, {}),
    useSensor(KeyboardSensor, {})
  );

  const handleDragEnd = useCallback(
    (event: DragEndEvent) => {
      const {active, over} = event;

      if (!over) {
        return;
      }

      if (active.id !== over.id) {
        const oldIndex = identifiers.indexOf(active.id as string);
        const newIndex = identifiers.indexOf(over.id as string);
        onRowPositionChanged?.(oldIndex, newIndex);
      }
    },
    [identifiers, onRowPositionChanged]
  );

  const dndContextProps = useMemo<DndContextProps>(() => {
    return {
      collisionDetection: closestCenter,
      modifiers: [restrictToVerticalAxis, restrictToParentElement],
      onDragEnd: handleDragEnd,
      sensors
    };
  }, [handleDragEnd, sensors]);

  // #endregion dnd

  return (
    <DndContext {...dndContextProps}>
      <div className="table-container">
        <table
          className={classNames('table table-hover react-table', {'table-sortable': enableSorting})}
        >
          <ReactTableHeader headerGroups={headerGroups} />
          <SortableContext items={identifiers} strategy={verticalListSortingStrategy}>
            {rowModel.rows.map((row) => {
              const skiptBody = renderSubComponent && isSubComponentUnderRow;
              if (!skiptBody) {
                return (
                  <tbody key={row.id}>
                    <DraggableRow
                      row={row}
                      renderSubComponent={renderSubComponent}
                      isSubComponentUnderRow={isSubComponentUnderRow}
                    />
                  </tbody>
                );
              }
              return (
                <DraggableRow
                  key={row.id}
                  row={row}
                  renderSubComponent={renderSubComponent}
                  isSubComponentUnderRow={isSubComponentUnderRow}
                />
              );
            })}
          </SortableContext>
          {anyFooter && <ReactTableFooter footerGroups={footerGroups} />}
        </table>
      </div>
    </DndContext>
  );
};

export default ReactTable;

import React, {useCallback, useMemo} from 'react';
import type {CSSProperties} from 'react';
import {useSortable} from '@dnd-kit/sortable';
import {CSS} from '@dnd-kit/utilities';
import {flexRender, type Row} from '@tanstack/react-table';
import classNames from 'classnames';

export type DraggableRowProps<T> = {
  row: Row<T>;
  renderSubComponent?: (props: {id: string; toggleSubComponent: () => void}) => React.ReactElement;
  isSubComponentUnderRow?: boolean;
  rowDraggable?: boolean;
  draggingEnabled?: boolean;
  hideSubComponentWhileDragging?: boolean;
};

const DraggableRow = <T,>({
  row,
  renderSubComponent,
  isSubComponentUnderRow = true,
  rowDraggable = false,
  draggingEnabled = true,
  hideSubComponentWhileDragging = true
}: DraggableRowProps<T>) => {
  const rowId = row.id;

  const {attributes, listeners, transform, transition, setNodeRef, isDragging} = useSortable({
    id: rowId,
    disabled: !draggingEnabled
  });

  const toggleSubComponent = useCallback(() => {
    row.toggleExpanded();
  }, [row]);

  const style: CSSProperties = {
    transform: CSS.Translate.toString(transform),
    transition,
    opacity: isDragging ? 0.8 : 1,
    zIndex: isDragging ? 1 : 0,
    position: 'relative'
  };

  const visibleCells = row.getVisibleCells();
  const rowExpanded = row.getIsExpanded();

  const showSubComponentUnderRow = renderSubComponent && isSubComponentUnderRow;
  const showSubComponentInPlaceOfRow =
    !showSubComponentUnderRow && rowExpanded && renderSubComponent;

  const hideSubComponent = hideSubComponentWhileDragging && isDragging && showSubComponentUnderRow;

  // Memoize content since "style" prop will cause many rerenders during drag n drop that should not affect node content
  const RowContent = useMemo(() => {
    if (showSubComponentUnderRow) {
      return (
        <>
          <tr id={rowId}>
            {visibleCells.map((cell) => {
              return (
                <td key={cell.id} id={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              );
            })}
          </tr>
          {rowExpanded && (
            <tr id={`${rowId}-subcomponent`} className={classNames({'d-none': hideSubComponent})}>
              <td colSpan={visibleCells.length}>
                {renderSubComponent({id: rowId, toggleSubComponent})}
              </td>
            </tr>
          )}
        </>
      );
    }

    if (showSubComponentInPlaceOfRow) {
      return (
        <td colSpan={visibleCells.length}>{renderSubComponent({id: rowId, toggleSubComponent})}</td>
      );
    }

    return visibleCells.map((cell) => {
      return (
        <td key={cell.id} id={cell.id}>
          {flexRender(cell.column.columnDef.cell, cell.getContext())}
        </td>
      );
    });
  }, [
    showSubComponentUnderRow,
    showSubComponentInPlaceOfRow,
    renderSubComponent,
    visibleCells,
    rowId,
    rowExpanded,
    hideSubComponent,
    toggleSubComponent
  ]);

  // If we want to make the row draggable, place attributes and listeners on the node itself
  const nodeProps = rowDraggable ? {...attributes, ...listeners} : undefined;

  if (showSubComponentUnderRow) {
    return (
      <tbody ref={setNodeRef} style={style} {...nodeProps}>
        {RowContent}
      </tbody>
    );
  }

  if (showSubComponentInPlaceOfRow) {
    return (
      <tr id={`${rowId}-subcomponent`} ref={setNodeRef} style={style} {...nodeProps}>
        {RowContent}
      </tr>
    );
  }

  return (
    <tr id={rowId} ref={setNodeRef} style={style} {...nodeProps}>
      {RowContent}
    </tr>
  );
};

export default DraggableRow;

<SortableContext
  items={identifiers}
  strategy={verticalListSortingStrategy}
  disabled={!enableDragging}
  key={`${Date.now()}`} // <-- add this
>
  // rows
</SortableContext>

const renderDragHandle = useCallback((c: CellContext<T, unknown>) => {
  const {isDraggingEnabled} = c.cell.getContext();
  return <DragHandle id={c.row.id} draggingEnabled={isDraggingEnabled} />;
}, []);

// Incrementing this value forces remount of SortableContext.
// See comment for remountSortableContext above.
const [sortableContextKey, setSortableContextKey] = useState(0);

// Expose table ref and other functions to parent. useImperativeHandle works only with forwardRef.
useImperativeHandle(
  ref,
  () => {
    return {
      remountSortableContext() {
        setSortableContextKey(sortableContextKey + 1);
      },
      table
    };
  },
  [sortableContextKey, table]
);

// .....

<SortableContext
  items={identifiers}
  strategy={verticalListSortingStrategy}
  disabled={!enableDragging}
  key={sortableContextKey}
>
 // stuff
</SortableContext>

export type ReactTableProps<T> = {
  data: T[];
  columns: ColumnDef<T>[];
};

export type TableRef<T> = {
  table: Table<T>;
  remountSortableContext: () => void;
};

const ReactTableInternal = <T,>(
  {
    data,
    columns
  }: ReactTableProps<T>,
  ref: ForwardedRef<TableRef<T>>
) => {
  // useReactTable etc...
};

// ReactTable is exposed this way so that generics would work with forwardRef
const ReactTable = forwardRef(ReactTableInternal) as <T>(
  props: ReactTableProps<T> & {ref?: ForwardedRef<TableRef<T>>}
) => ReturnType<typeof ReactTableInternal>;

export default ReactTable;

const tableRef = useRef<TableRef<Person>>(null);

// onclick..
tableRef.current.remountSortableContext();

const tableSelectModeToggledHandler = useCallback((isInSelectMode: boolean) => {
  if (!tableRef.current) {
    return;
  }

  const {table} = tableRef.current;

  const selCol = table.getColumn(BuiltInColumnsIds.rowSelectColumnId);
  const dndCol = table.getColumn(BuiltInColumnsIds.dragHandleColumnId);

  selCol?.toggleVisibility(isInSelectMode);
  dndCol?.toggleVisibility(!isInSelectMode);

  if (!isInSelectMode) {
    table.toggleAllRowsSelected(false);
    tableRef.current.remountSortableContext();
  }

  setIsTableInSelectMode(isInSelectMode);
}, []);