Блог

Главная - Вопросы по программированию - Фильтровать данные таблицы в reactjs

Фильтровать данные таблицы в reactjs

#node.js #reactjs #mongodb #uitableview

#node.js #reactjs #mongodb #uitableview

Вопрос:

У меня есть таблица, которая содержит сведения об ученике. Когда я применяю метод filter, он запутывается. Я не понял, как я создаю пользовательский интерфейс для таблицы. Может кто-нибудь помочь мне разобраться в этом

 const studentList = (props) => {
    return (
      <div>
        <input
          type="text"
          placeholder="Search"
          onChange={(event) => {
            setSearchTerm(event.target.value);
          }}
        />
        {students amp;amp;
          students
            .filter((student) => {
              if (searchTerm === "") {
                return student;
              } else if (
                student.admissionNumber
                  .toLowerCase()
                  .includes(searchTerm.toLowerCase())
              ) {
                return student;
              }
            })
            .map((student, index) => {
              return (
                <div className="table-responsive table-scroll ">
                  <table className="table tbl table-bordered   .w-auto mb-0 ">
                    <thead className="thead">
                      <tr className="" key={index}>
                        <th>#</th>
                        {/some heading stuff/}
                    </thead>
                    <tbody className="tbody">
                      <tr>
                        <th key={index}>{index   1}</th>
                        <td scope="row">{student.admissionNumber}</td>

                        <td>{student.fullName}</td>
                        <td>{student.email}</td>
                        <td>{student.faculty.name}</td>
                        <td>
                          <span className="btn-group">
                            {/buttons/}
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              );
            })}
      </div>
    );
  };

когда я запускаю это, похоже, все перепутано
введите описание изображения здесь

Я хочу этот пользовательский интерфейс
введите описание изображения здесь

Ответ №1:

Вам нужно поместить таблицу за пределы вашей .map функции.

 // Previous code

<table className="table tbl table-bordered .w-auto mb-0">
  {students amp;amp;
    students
      .filter((student) => {
        if (searchTerm === "") {
          return student;
        } else if (
          student.admissionNumber
            .toLowerCase()
            .includes(searchTerm.toLowerCase())
        ) {
          return student;
        }
      })
      .map((student, index) => {
      // Rest of code

<table/>
Метки: