求助：react-table分页属性不存在于TableInstance类型如何解决

Ah, I've run into this exact issue before! The problem here is that react-table's core useTable hook doesn't include pagination functionality out of the box—those pagination-related properties you're trying to destructure come from the usePagination plugin, which you need to explicitly add to your hook setup.

Solution 1: Fix the IDE Errors by Adding the usePagination Plugin #

This is the standard, recommended approach since it leverages react-table's built-in pagination utilities:

1. Import the plugin alongside useTable:

import { useTable, usePagination } from 'react-table';

2. Pass the plugin to useTable as the second argument (use an array if you're using multiple plugins):

const { 
  getTableProps, 
  getTableBodyProps, 
  headerGroups, 
  page, 
  prepareRow, 
  visibleColumns, 
  canPreviousPage, 
  canNextPage, 
  pageOptions, 
  pageCount, 
  gotoPage, 
  nextPage, 
  previousPage, 
  setPageSize, 
  state: { pageIndex, pageSize }, 
} = useTable(
  { 
    columns, 
    data, 
    defaultColumn: { Filter: DefaultColumnFilter }, 
    initialState: { pageIndex: 0, pageSize: 10 }, 
  },
  usePagination // Add this line to enable pagination utilities!
);

3. For TypeScript users: Ensure you're typing your table instance correctly to include pagination types. Pass your custom data type as a generic:

interface YourDataType {
  id: number;
  name: string;
  // Add your data structure fields here
}

const tableInstance = useTable<YourDataType>(
  { columns, data, initialState: { pageIndex: 0, pageSize: 10 } },
  usePagination
);

Once you add the usePagination plugin, your IDE should stop throwing those "property does not exist" errors.

Solution 2: Implement Pagination Manually (Without Plugin Properties) #

If you want to avoid using the usePagination plugin entirely, you can handle pagination logic yourself with React state:

1. Add pagination state to your component:

import { useState, useMemo } from 'react';

// ...

const [pageIndex, setPageIndex] = useState(0);
const [pageSize, setPageSize] = useState(10);

2. Calculate paginated data manually with useMemo to avoid unnecessary recalculations:

const paginatedData = useMemo(() => {
  const startIdx = pageIndex * pageSize;
  const endIdx = startIdx + pageSize;
  return data.slice(startIdx, endIdx);
}, [data, pageIndex, pageSize]);

3. Calculate pagination metadata for your control UI:

const totalItems = data.length;
const totalPages = Math.ceil(totalItems / pageSize);
const canPreviousPage = pageIndex > 0;
const canNextPage = pageIndex < totalPages - 1;

4. Replace page with paginatedData in your table rendering:

<table {...getTableProps()}>
  {/* Render your header groups as usual */}
  <thead>
    {headerGroups.map(headerGroup => (
      <tr {...headerGroup.getHeaderGroupProps()}>
        {headerGroup.headers.map(column => (
          <th {...column.getHeaderProps()}>{column.render('Header')}</th>
        ))}
      </tr>
    ))}
  </thead>
  <tbody {...getTableBodyProps()}>
    {paginatedData.map(row => {
      prepareRow(row);
      return (
        <tr {...row.getRowProps()}>
          {row.cells.map(cell => (
            <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
          ))}
        </tr>
      );
    })}
  </tbody>
</table>

5. Implement pagination control handlers:

const handleNextPage = () => {
  if (canNextPage) setPageIndex(prev => prev + 1);
};

const handlePreviousPage = () => {
  if (canPreviousPage) setPageIndex(prev => prev - 1);
};

const handleGotoPage = (pageNumber: number) => {
  if (pageNumber >= 0 && pageNumber < totalPages) {
    setPageIndex(pageNumber);
  }
};

const handleSetPageSize = (newSize: number) => {
  setPageSize(newSize);
  setPageIndex(0); // Reset to first page when changing page size
};

You can then use these handlers to build your own pagination control UI (next/previous buttons, page number input, page size dropdown, etc.).

内容的提问来源于stack exchange，提问作者Tobi