reactjs - Bagaimana react-table v7.7.9 bekerja di typescript dengan penyaringan global


Saya memiliki react-table yang bekerja dengan baik di TypeScript.

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
    { columns, data }
  );

Saya ingin menambahkan penyaringan global. Jika saya hanya menambahkan hook plugin, itu akan dikompilasi:

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
    { columns, data },
    useGlobalFilter
  );

Tetapi jika saya mencoba menambahkan opsi setGlobalFilter, saya mendapatkan kesalahan kompilator:

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, setGlobalFilter } = useTable(
    { columns, data },
    useGlobalFilter
  );
ERROR in src/components/SubmissionTable.tsx:144:77
TS2339: Property 'setGlobalFilter' does not exist on type 'TableInstance<TableModel>'.

Saya memiliki "@types/react-table": "^7.7.9" di dev-dependencies saya dan dapat memastikan bahwa itu bisa menemukan tipe-tipe tersebut. Tidak jelas bagi saya mengapa itu tidak mengizinkan saya untuk menggunakan setGlobalFilter setelah saya memasukkan plugin/hook useGlobalFilter.

Jawaban #1

Saya tidak mengerti mengapa saya tidak diperbolehkan menggunakan setGlobalFilter setelah saya memasukkan plugin/hook useGlobalFilter.

Para penulis pustaka react-table tidak menyediakan dukungan @types/react-table, itu adalah proyek pihak ketiga yang dibuat oleh orang lain.

Anda bisa menggunakan trik ini: github: DefinitelyTyped Itu membuat semua ekstensi plugin tersedia, tapi kurang ketat.

Edit: Contoh sandbox yang berfungsi dibuat oleh orang ini Richard Beattie