在 reactjs 中过滤 table 数据

Question

我有一个 table，其中包含学生详细信息。当我在其上应用过滤方法时，它变得一团糟。我不明白我是如何为 table 创建 ui 的。谁能帮我解决这个问题

const studentList = (props) => {
    return (
      <div>
        <input
          type="text"
          placeholder="Search"
          onChange={(event) => {
            setSearchTerm(event.target.value);
          }}
        />
        {students &&
          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>
    );
  };

当我运行这看起来一团糟

我要这个ui

Answer 1

您需要将 table 放在 .map 函数之外。

// Previous code

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

<table/>

在 reactjs 中过滤 table 数据

Filter table data in reactjs

uitableview

mongodb

node.js

reactjs