How to animate row disappearance

[sorokinvj]

1. table gets the date with useQuery
2. each row has a status
3. some actions change the status of the row
4. queries are invalidated
5. row disappears

ProxyLink._.Actions.mp4

do you notice that its the content of the row being folder not the row itself? I wonder if it is possible, so the whole table is gradually resizing with the row disappaering instead?

Here is my current table and row components:

row:

import React from 'react';
import { Row, flexRender } from '@tanstack/react-table';
import { useForm, FormProvider } from 'react-hook-form';
import { CustomColumnMeta } from '@/components/ui/table/table';
import clsx from 'clsx';
import { useTableRowAnimation } from './animation-context';
import { Request } from '@/lib/db/schema';

interface RequestRowProps<T> {
  row: Row<T>;
  toggleDrawer: (data: T) => void;
}

const RequestRow = <T extends Request>({
  row,
  toggleDrawer,
}: RequestRowProps<T>) => {
  const methods = useForm();
  const { closingRowId } = useTableRowAnimation();
  const isClosing = closingRowId === row.original.id;

  const handleRowClick = () => {
    toggleDrawer(row.original);
  };

  return (
    <FormProvider {...methods}>
      <tr
        className={`border-b border-gray-200 cursor-pointer overflow-hidden transition-all duration-300 ease-out ${
          isClosing
            ? 'transform scale-y-0 h-0 bg-blue-200'
            : 'transform scale-y-100'
        }`}
        onClick={handleRowClick}
      >
        {row.getVisibleCells().map(cell => {
          const meta = cell.column.columnDef.meta as CustomColumnMeta;
          const width = cell.column.getSize();
          const cellClassName = clsx(
            `p-4 whitespace-nowrap`,
            {
              'bg-yellow-50': meta?.isHighlightable,
              'sticky right-0 z-10 bg-white': meta?.isSticky,
              'before:absolute before:content-[""] before:top-0 before:left-0 before:w-4 before:h-full before:shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.1)] before:z-[-1]':
                meta?.isSticky,
            },
            meta?.className ?? 'text-left',
          );
          return (
            <td
              key={cell.id}
              className={cellClassName}
              style={{
                minWidth: `${width}px`,
              }}
            >
              {flexRender(cell.column.columnDef.cell, cell.getContext())}
            </td>
          );
        })}
      </tr>
    </FormProvider>
  );
};

export default RequestRow;

table:

import React, { useState } from 'react';
import {
  useReactTable,
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  getPaginationRowModel,
  ColumnDef,
  VisibilityState,
  PaginationState,
} from '@tanstack/react-table';
import clsx from 'clsx';
import { TablePagination } from '../pagination';
import RequestRow from './table-row';
import { Request } from '@/lib/db/schema';
import { TableRowAnimationProvider } from './animation-context';

export type CustomColumnMeta = {
  isCustomerInfo?: boolean;
  isHighlightable?: boolean;
  className?: string;
  isSticky?: boolean;
};

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type CustomColumnDef<T> = ColumnDef<T, any> & {
  meta?: CustomColumnMeta;
};

interface GenericTableProps<T> {
  data: T[];
  columns: CustomColumnDef<T>[];
  defaultSort?: { id: string; desc: boolean }[];
  EmptyComponent?: React.ComponentType;
  onRowClick?: (row: T) => void;
  pageSize?: number;
  columnVisibility?: VisibilityState;
}

const GenericTable = <T extends Request>({
  data,
  columns,
  defaultSort = [],
  EmptyComponent,
  onRowClick,
  pageSize = 10,
  columnVisibility,
}: GenericTableProps<T>) => {
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize,
  });

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    state: {
      sorting: defaultSort,
      pagination,
      columnVisibility,
    },
    onPaginationChange: setPagination,
    getRowId: row => row.id, // without this animation will leak to the next row
  });

  if (data.length === 0 && EmptyComponent) {
    return <EmptyComponent />;
  }

  return (
    <TableRowAnimationProvider>
      <div className="grid gap-4 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="divide-y divide-gray-200">
            <thead className="border-b border-gray-200">
              {table.getHeaderGroups().map(headerGroup => (
                <tr key={headerGroup.id}>
                  {headerGroup.headers.map(header => {
                    const meta = header.column.columnDef
                      .meta as CustomColumnMeta;
                    const width = header.column.getSize();
                    const headerClassName = clsx(
                      'p-4 whitespace-nowrap',
                      {
                        'bg-yellow-50': meta?.isHighlightable,
                        'sticky right-0 z-10 bg-white': meta?.isSticky,
                        'before:absolute before:content-[""] before:top-0 before:left-0 before:w-4 before:h-full before:shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.1)] before:z-[-1]':
                          meta?.isSticky,
                      },
                      meta?.className ?? 'text-left',
                    );
                    return (
                      <th
                        key={header.id}
                        className={headerClassName}
                        style={{
                          minWidth: `${width}px`,
                        }}
                      >
                        {header.isPlaceholder
                          ? null
                          : flexRender(
                              header.column.columnDef.header,
                              header.getContext(),
                            )}
                      </th>
                    );
                  })}
                </tr>
              ))}
            </thead>
            <tbody>
              {table.getRowModel().rows.map(row => (
                <RequestRow
                  key={row.id}
                  row={row}
                  toggleDrawer={() => onRowClick && onRowClick(row.original)}
                />
              ))}
            </tbody>
          </table>
        </div>
        {data.length > pageSize && (
          <TablePagination
            currentPage={pagination.pageIndex + 1}
            totalPages={table.getPageCount()}
            onPageChange={page => table.setPageIndex(page - 1)}
          />
        )}
      </div>
    </TableRowAnimationProvider>
  );
};

export default GenericTable;

useTableRowAnimation is just holding the id of disappearing row and related fn