Как сделать таблицу React сортируемой по каждому столбцу? - PullRequest
Новая
       38

Как сделать таблицу React сортируемой по каждому столбцу?

0 голосов
/ 28 октября 2019

У меня есть таблица, и я хочу, чтобы пользователь мог отсортировать ее по любому столбцу. Вот мой код: - 

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";
import { BootstrapTable } from "react-bootstrap-table-next";

function Results(props) {
  var results = props.results;
  console.log(results);
  const [sresults, setSResults] = useState(results);
  const sorter = key =>
    sresults.sort((a, b) => {
      console.log("I am In THE SORTER");
      if (a[key] < b[key]) {
        console.log("RETURNING -1");
        return -1;
      }
      if (a[key] > b[key]) {
        console.log("RETURNING 1");
        return 1;
      }
      console.log("RETURNING 0");
      return 0;
    });
  if (!props.results) return "no data";
  if (!Array.isArray(props.results)) return "results are not array";
  function rows() {
    let result = sresults.map((result, index) => {
      return (
        <tr key={result.Book_Name}>
          <th scope="row">{index}</th>
          <td>{result.Book_Name}</td>
          <td>{result.Author}</td>
          <td>{result.S_no}</td>
          <td>{result.Series_Name}</td>
          <td>{result.Fiction_Non_fiction_Companion_Prequel}</td>
          <td>{result.Genre}</td>
          <td>{result.Kindle_Real}</td>
        </tr>
      );
    });
    return result;
  }
  function ssorter(key) {
    setSResults(sorter(key));
    console.log(sresults);
  }
  return (
    <Table hover bordered responsive>
      <thead>
        <tr>
          <th>{"S.no of the Books Found"}</th>
          <th>{"Book Name"}</th>
          <th>{"Author"}</th>
          <th>
            {"S.no"}
            <button onClick={() => ssorter("S_no")} />
          </th>
          <th>{"Series Name"}</th>
          <th>{"Fiction/Non fiction/Companion/Prequel"}</th>
          <th>{"Genre"}</th>
          <th>{"Kindle or Real"}</th>
        </tr>
      </thead>
      <tbody>{rows()}</tbody>
    </Table>
  );
}

export default Results;

Я попытался response-bootstrap-table-next , но я получаю фатальную ошибку, говоря, что она ожидает строку. Учебное пособие, которым я следовал для response-bootstrap-table-next, это здесь .

Заранее спасибо, и, пожалуйста, дайте знать, если вам нужна дополнительная информация.

Редактировать: Состояние меняется. Я это подтвердил. Но страница не перерисовывается.

1 Ответ

0 голосов
/ 28 октября 2019

присоединяется к каждой функции TH onClick. Используйте useState. Поместите свой results в это состояние. Затем по onClick запускается сортировка по столбцу таблицы. то есть 

const sorter = key => results.sort((a, b) => {
  if(a[key] < b[key]) { return -1; }
  if(a[key] > b[key]) { return 1; }
  return 0;
})

с onClick={() => setResults(sorter('Book_Name'))} это просто неочищенный код, его можно улучшить, но он должен дать вам представление. Теперь, конечно, вам нужно как-то отобразить это в заголовках строк таблицы (то есть стрелках) и реализовать направление сортировки (ASC, DESC).

...