I want to render only 10 records at a time but, It's rendering all the records.

[AutoWhat]

I want to render only 10 records at a time but, It's rendering all the records.
Here is my code for same

const [searchValue, setSearchValue] = React.useState('');
  const [filteredData, setFilteredData] = React.useState(data);
  const [isLoading, setIsLoading] = React.useState(false);

  const [{ pageIndex, pageSize }, setPagination] =
    React.useState<PaginationState>({
      pageIndex: pageNo - 1,
      pageSize: 10
    });

  React.useEffect(() => {
    setIsLoading(true);
    setTimeout(() => {
      const newFilteredData = data.filter(
        (item: { [x: string]: { toString: () => string } }) =>
          item[searchKey]
            ?.toString()
            .toLowerCase()
            .includes(searchValue.toLowerCase())
      );
      setFilteredData(newFilteredData);
      setPagination((prev) => ({ ...prev, pageIndex: 0 }));
      setIsLoading(false);
    }, 500);
  }, [searchValue, data, searchKey]);

  const table = useReactTable({
    data: filteredData,
    columns,
    pageCount: pageCount ?? -1,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      pagination: { pageIndex, pageSize }
    },
    onPaginationChange: setPagination,
    getPaginationRowModel: getPaginationRowModel(),
    manualPagination: true
  });

[krishnagkmit]

if manualPagination is true then tanstack/table does not paginate data internally rather it shifts pagination functionality to the user as the prop name suggests.
so just make manualPagination : false to get pagination working again

[KevinVandy]

Yep, @AutoWhat , why do you have manualPagination set as true? That turns off the internal pagination logic so that you can implement your own.