Virtualization works very slowly

[AndreiTka4iov]

Hello, I am developing a version of production software, there is a great need to use tables for product cards, with a lot of information inside the table. There is a big problem with table virtualization, it works very slowly.

2024-02-28.13.25.49.mov

On the site with official documentation it works a little better, but these problems appear too

Data Interface

  id: string;
  images: string[];
  name: string;
  article?: string;
  type?: string;
  archived: boolean;
  group?: ProductGroup;
  createdAt: Date;
  updatedAt: Date;
  prices: {
      type: PriceType;
      product: Product;
      value: number;
      multiplier: number;
      relative: boolean;
      targetProduct?: Product;
      targetModification?: Modification;
      targetType?: PriceType;
      relationType?: PriceRelationType;
      relationChangeValue?: number;
      targetTypeId?: string;
      targetProductId?: string;
      targetModificationId?: string;
      priceTypeId: string;
      productId: string;
      createdAt: Date;
      updatedAt: Date;
}[]

Column code

const columns = useMemo<MRT_ColumnDef<ProductListItem>[]>(() => {
    const result: MRT_ColumnDef<ProductListItem>[] = [
      {
        accessorKey: 'images',
        header: '',
        enableSorting: false,
        enableResizing: false,
        Cell: ({ cell }) => (
          <Image src={cell.getValue<string[]>()[0]} h={38} w={38} radius={'xs'} />
        ),
        minSize: 60,
        maxSize: 60,
      },
      {
        accessorKey: 'name',
        header: 'Название',
        size: 300,
        Cell: ({ cell, row }) => (
          <Link to={`?article=${row.original.article}`} className={styles.productLink}>
            <Text lineClamp={1} size="sm">
              {cell.getValue<string>()}
            </Text>
          </Link>
        ),
      },
      {
        accessorKey: 'article',
        header: 'Артикул',
        size: 300,
        enableClickToCopy: true,
      },
    ];

    if (!dataProductPriceType) return result;

    dataProductPriceType.map(priceType => {
      result.push({
        accessorKey: priceType.id,
        header: '',
        Header: () => <Text lineClamp={1}>{priceType.name}</Text>,
        size: 200,
        minSize: 60,
        maxSize: 400,
        Cell: ({ row }) => (
          <Text lineClamp={1} size="sm">
            {row.original?.prices.find(({ targetTypeId }) => targetTypeId === priceType.id)
              ?.value || 0}
          </Text>
        ),
        footer: finalPriceByPriceTypesId.find(({ id }) => id === priceType.id)?.value || '0',
      });
    });

    return result;
  }, [dataFiltered, dataProductPriceType]);

useMantineReactTable

const table = useMantineReactTable({
    columns,
    data: dataFiltered,

    enableRowSelection: true,
    mantineTableBodyRowProps: ({ row }) => ({
      onClick: row.getToggleSelectedHandler(),
      sx: { cursor: 'pointer' },
    }),

    enableColumnResizing: true,
    columnResizeMode: 'onEnd',
    defaultColumn: {
      maxSize: 400,
      minSize: 60,
    },

    enableFilters: false,
    enableTopToolbar: false,
    enableBottomToolbar: false,
    enableGlobalFilter: false,
    mantinePaperProps: {
      style: {
        border: 0,
      },
    },

    state: { isLoading: isLoadingProducts || isLoadingPriceTypes, sorting },

    enableColumnActions: true,
    enableColumnOrdering: true,
    enableColumnPinning: true,

    enableStickyHeader: true,
    enableStickyFooter: true,

    enablePagination: false,
    onSortingChange: setSorting,
    rowVirtualizerInstanceRef,

    enableRowVirtualization: true,
    rowVirtualizerOptions: { overscan: 10 },

    enableColumnVirtualization: true,
    columnVirtualizerOptions: { overscan: 5 },

    mantineTableContainerProps: {
      style: {
        maxHeight: `${minHeight}px`,
        minHeight: `${minHeight}px`,
        maxWidth: `${size.width}px`,
        minWidth: `${size.width}px`,
      },
    },
  });

Maybe I did something wrong? How can I solve this problem? Please help me

[adventureengr]

@AndreiTka4iov were you able to find an fix for this slowness, we are running into the same issue here :(