Question 212713 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Comparing arrays to create table in react

I wanted to create a table with the data taken an API, where only some of the columns must be displayed as default. The following are the two arrays, one containing the default column headers for the table and the other containing the id and title of the data :

const defaultColumns = ["email", "rolename", "isActive"];

const headers = [
    {
      id: "username",
      title: "User Name",
    },
    {
      id: "name",
      title: "Name",
    },
    {
      id: "email",
      title: "Email",
      applySort: true,
    },
    {
      id: "siteName",
      title: "Site Name(s)",
    },
    {
      id: "roleName",
      title: "Role(s)",
    },
  ];

So I know how I can create the table with just headers array, I would like some guidance on what I will have to do.

This is what I’ve done so far:

            <table className="table table-md table-striped table-bordered table-hover">
              <thead>
                <tr>
                  {headers.map((header, i) => {
                    if (/* Condition to check if header.id is in defaultColumns */) {
                        return <th key={header.id}>{header.title}</th>;
                      }
                  })}
                </tr>
              </thead>
              <tbody>
                {props.data.map((row, index) => (
                  <tr key={index}>
                    {headers.map((header, i) => {
                      if (/* Condition to check if header.id is in defaultColumns */) {
                        return <td key={i}>{row[header.id]}</td>;
                      }
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
Tags:

2

Answers


  1. 0

    Use the include function to check the column id exists in the Try this default list

          <tr>
        {headers.map((header, i) => (
          <>
            {defaultColumns.includes(header.id) && (
              <th key={header.id}>{header.title}</th>
            )}
          </>
        ))}
      </tr>
    Login or Signup to reply.
  2. 0

    You can use the array.includes() method, as shown below.

    <table className="table table-md table-striped table-bordered table-hover">
  <thead>
    <tr>
      {headers.map((header, i) => {
        if (defaultColumns.includes(header.id)) { // Condition to check if header.id is in defaultColumns
          return <th key={header.id}>{header.title}</th>;
        }
      })}
    </tr>
  </thead>
  <tbody>
    {props.data.map((row, index) => (
      <tr key={index}>
        {headers.map((header, i) => {
          if (defaultColumns.includes(header.id)) { // Condition to check if header.id is in defaultColumns
            return <td key={i}>{row[header.id]}</td>;
          }
        })}
      </tr>
    ))}
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search