Issue with downloading more than 5000 icons from mantine-react-table

[yngpiu]

I noticed an issue when using mantine-react-table, where more than 5000 icons are being downloaded, which seems excessive and could be impacting performance and loading time.
I use react, vite, rtk query/

Image:

My code:

import { useGetBooksQuery } from '@/redux/apis/bookApi';
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
import { useMemo, useState } from 'react';

const CategoryPage = () => {
  const columns = useMemo(
    () => [
      {
        accessorKey: 'author',
        header: 'Tác giả'
      },
      {
        accessorKey: 'country',
        header: 'Quốc tịch'
      },
      {
        accessorKey: 'language',
        header: 'Ngôn ngữ'
      },
      {
        accessorKey: 'pages',
        header: 'Số trang'
      },
      {
        accessorKey: 'title',
        header: 'Tiêu đề'
      },

      {
        accessorKey: 'year',
        header: 'Năm xuất bản'
      }
    ],
    []
  );
  const [columnFilters, setColumnFilters] = useState([]);
  const [columnFilterFns, setColumnFilterFns] = useState(
    Object.fromEntries(
      columns.map(({ accessorKey }) => [accessorKey, 'contains'])
    )
  );
  const [globalFilter, setGlobalFilter] = useState('');
  const [sorting, setSorting] = useState([]);
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: 10
  });

  const { data, isLoading, isFetching, isError, refetch } = useGetBooksQuery({
    columnFilterFns,
    columnFilters,
    globalFilter,
    pagination,
    sorting
  });
  console.log(data, isLoading, isFetching, isError, refetch);
  const fetchedUsers = data?.data ?? [];
  const totalRowCount = data?.meta?.totalRowCount ?? 0;

  const table = useMantineReactTable({
    columns,
    data: fetchedUsers,
    enableColumnFilterModes: true,
    columnFilterModeOptions: ['contains', 'startsWith', 'endsWith'],
    initialState: { showColumnFilters: true },
    manualFiltering: true,
    manualPagination: true,
    manualSorting: true,
    mantineToolbarAlertBannerProps: isError
      ? {
          color: 'red',
          children: 'Error loading data'
        }
      : undefined,
    onColumnFilterFnsChange: setColumnFilterFns,
    onColumnFiltersChange: setColumnFilters,
    onGlobalFilterChange: setGlobalFilter,
    onPaginationChange: setPagination,
    onSortingChange: setSorting,
    rowCount: totalRowCount,
    state: {
      columnFilterFns,
      columnFilters,
      globalFilter,
      isLoading,
      pagination,
      showAlertBanner: isError,
      showProgressBars: isFetching,
      sorting
    }
  });

  return <MantineReactTable table={table} />;
};
export default CategoryPage;

[alessandrojcm]

This is an issue with Tabler Icons, see here for workaround: tabler/tabler-icons#1233

[yngpiu]

thank you so much