Блог

Я использую таблицу react для своего проекта. Я пытаюсь добавить фильтр столбцов для своего проекта. пожалуйста, проверьте мой код заголовка таблицы

         <thead>
      {headerGroups.map((headerGroup) => (
        <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map((column) => (
            <th {...column.getHeaderProps(column.getSortByToggleProps())}>
              {column.render("Header")}
              <span>
                {column.isSorted
                  ? column.isSortedDesc
                    ? " 🔽"
                    : " 🔼"
                  : ""}
              </span>
              <div>{column.canFilter ? column.render("Filter") : null}</div>
            </th>
          ))}
          <th>Action</th>
        </tr>
      ))}
    </thead>
 

Это мой column.js файл

     import React from "react";

export const ColumnFilter = ({ column }) => {
  const { filterValue, setFilter } = column;
  return (
    <span>
      <input
        value={filterValue || ""}
        onChange={(e) => setFilter(e.target.value)}
      />
    </span>
  );
};
 

после того, как я добавил фильтры в свой столбец таблицы. это единственный заголовок, который я добавил.

   {
Header: "Type",
accessor: "INVOICE_LINE_ID",
Filter: ColumnFilter,
 

},

Я думаю, что я все правильно добавил. но произошла ошибка. Согласно ошибке, ошибка пришла из «{column.canFilter ? column.render(«Фильтр») : null}» эта строка.

Но я не смог найти ошибку.Предварительный просмотр ошибок Если я прокомментирую эту строку, проект работает хорошо, сортировка, разбиение на страницы и все работает. как я могу исправить эту проблему

У меня была такая же проблема.
В примере docs было указано, что

вам необходимо передать параметр столбца по умолчанию в useTable hook

Следовательно, в вашем компоненте заголовка таблицы, например FilteringTable.js

1. Определите компонент defaultColumn, который использует useMemo hook

FilteringTable.js

 import { ColumnFilter } from './ColumnFilter'

const FilteringTable = () => {

  const columns = useMemo(()=> GROUPED_COLUMNS, [])
  const data = useMemo(() => MOCK_DATA, [])
  
  const defaultColumn = useMemo(
    () => ({
      // Let's set up our default Filter UI
      Filter: ColumnFilter,
    }),
    []
  )  
} 

2. Передайте параметр defaultColumn в useTable hook

FilteringTable.js

 import { ColumnFilter } from './ColumnFilter'

const FilteringTable = () => {

  const columns = useMemo(()=> GROUPED_COLUMNS, [])
  const data = useMemo(() => MOCK_DATA, [])
  
  const defaultColumn = useMemo(
    () => ({
      // Let's set up our default Filter UI
      Filter: ColumnFilter,
    }),
    []
  )  
  
    const { 
    getTableProps, 
    getTableBodyProps, 
    headerGroups,
    footerGroups,
    rows,
    prepareRow,
    state,
    setGlobalFilter,
  } = useTable({
    columns: columns,
    data: data,
    defaultColumn // Be sure to pass the defaultColumn option
  },
  useFilters,
  useGlobalFilter)
}