Блог

Как я могу установить функцию onClick в заголовок таблицы, не удаляя функцию сортировки (useSortBy), которая будет выполняться щелчком по заголовку. Вот мой код:

 function renderTableHeader() {
  const headers = headerGroups.map(headerGroup => {
    return (
      <tr {...headerGroup.getHeaderGroupProps()}>
        {headerGroup.headers.map(column => (
          <th
            {...column.getHeaderProps(
              column.sortable amp;amp; column.getSortByToggleProps()
            )}
          >
            {(column.render("Header")}
            <span>
              <i className={determineSortState(column)} />
            </span>
          </th>
        ))}
      </tr>
    );
  });
 

react-table устанавливает onClick обработчик для <th> элемента с помощью этого выражения: {...column.getHeaderProps(column.getSortByToggleProps())}

Если вы поставите onClick перед ним свой собственный обработчик, он будет переопределен. Если вы оставите его позади, он переопределит обработчик from react-table , что нарушит сортировку.

Поэтому вам нужно запустить react-table обработчик вручную в вашем переопределении, как это:

             <th
              {...column.getHeaderProps(column.getSortByToggleProps())}
              onClick={(e) => {
                //trigger the react-table header onClick manually
                  column
                  .getHeaderProps(column.getSortByToggleProps())
                  .onClick(e);

                //your onclick functionallity goes in here
                console.log("my on click");
              }}
            >