How to make table header display once in map function in React JS?

Question

I'm displaying data in a tabular format in UI using React and TailwindCSS. I am using a map function to display the data. I am able to display the data but the header is being displayed after each row as they are iterated in a loop.

Please let me know how can I display the output in tabular format with header being displayed only once?

React JS code:

{data && toggle ? (
            <div className="table-container">
              {data.map((project, idx) => {
                return (
                  <>
                    <div className="overflow-x-none flex items-center justify-center w-fit mx-auto border border-[#1B71E8]">
                      <table className="table-fixed max-w-screen-lg border-seperate border-spacing">
                        <thead>
                          <tr>
                            <th>name</th>
                            <th>country</th>
                            <th>carbon credits</th>
                            <th>type</th>
                            <th>vintage</th>
                            <th>serial number</th>
                          </tr>
                        </thead>

                        <tbody>
                          <tr>
                            <td className="w-52 h-8 text-center">
                              {project.project.name}
                            </td>
                            <td className="w-52 text-center">
                              {project.project.country}
                            </td>
                            <td className="w-32 max-h-2 text-center">
                              {project.number_of_credits}
                            </td>
                            <td className="w-52 text-center">
                              {project.project.type}
                            </td>
                            <td className="w-52 text-center">
                              {project.vintage}
                            </td>
                            <td className="w-52 text-center">
                              {project.serial_number}
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </>
                );
              })}
            </div>

table

Can you please help.

David Jentjens · Accepted Answer · 2023-01-05 23:15:24Z

1

Move the element outside of the {data.map(...)} loop. You can also move the element outside of the loop and use the map function to generate the rows inside of it:

{data && toggle ? (
  <div className="table-container">
    <div className="overflow-x-none flex items-center justify-center w-fit mx-auto border border-[#1B71E8]">
      <table className="table-fixed max-w-screen-lg border-seperate border-spacing">
        <thead>
          <tr>
            <th>name</th>
            <th>country</th>
            <th>carbon credits</th>
            <th>type</th>
            <th>vintage</th>
            <th>serial number</th>
          </tr>
        </thead>
        <tbody>
          {data.map((project, idx) => {
            return (
              <tr>
                <td className="w-52 h-8 text-center">
                  {project.project.name}
                </td>
                <td className="w-52 text-center">
                  {project.project.country}
                </td>
                <td className="w-32 max-h-2 text-center">
                  {project.number_of_credits}
                </td>
                <td className="w-52 text-center">
                  {project.project.type}
                </td>
                <td className="w-52 text-center">
                  {project.vintage}
                </td>
                <td className="w-52 text-center">
                  {project.serial_number}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  </div>
)}

answered Jan 5, 2023 at 23:15

David Jentjens

67611 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ali Ourag Over a year ago

As @David to display the table header only once, you can move the <thead> element outside of the {data.map((project, idx) => { ... })} loop. You can also create a separate component for the table header and use that component in your code.

Collectives™ on Stack Overflow

How to make table header display once in map function in React JS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related