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

Javascript – How can I dynamically display data in a column based on its columns?

I have two arrays of objects. The first array has the column names, the second has the table data. I want to display the data respectively. One of the objects contains 3 key-values, they display in the first three TableRows and I want them to display dynamically in column number three and four.

I want to display the second object of the rows array in columns three and four.

const columns = [
{id: 1, one: "one", two: "two", three: "three", four: "four"}
]

const rows = [
{id: 1, title: "dog", age: "2", name: "Buzzy"}
{id: 2, item: "laptop", data: "something", year: "1980"}
]

   <table>
      <thead>
          {columns.map((data) => (
            <tr key={data.id}>
             {Object.entries(data).map(([key, value]) => (
               <th key={key}>{value}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((data) => (
          <tr key={data.id}>
              {Object.entries(data).map(([key, value]) => (
              <td key={key}>{value}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
Tags:

2

Answers


  1. 0

    Try this:

    
    const columns = [
    { id: 1, one: "one", two: "two", three: "three", four: "four" }
  ];

  const rows = [
    { id: 1, title: "dog", age: "2", name: "Buzzy" },
    { id: 2, item: "laptop", data: "something", year: "1980" }
  ];

  return (
    <table border="1">
      <thead>
        {columns.map((col) => (
          <tr key={col.id}>
            {Object.values(col).map((value, index) => (
              <th key={index}>{value}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {rows.map((row) => (
          <tr key={row.id}>
            {Object.values(row).map((value, index) => (
              <td key={index}>{value}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
    Login or Signup to reply.
  2. 0

    I’m not sure if you are able to change the columns data structure, or you are just receiving them like that.
    In any case, I’m assuming we are on the second case, so my first suggestion is to manipulate that data to make it easier to handle. when rendering.

    const columns = [
  { id: 1, one: 'one', two: 'two', three: 'three', four: 'four' },
];

const newColumns = Object.entries(columns[0]).map(([key, value]) => ({
  accesorKey: key.toString(),
  header: value.toString(),
}));

const rows = [
  { id: 1, title: 'dog', age: '2', name: 'Buzzy' },
  { id: 2, item: 'laptop', data: 'something', year: '1980' },
];

const newRows = rows.map((row) => ({
  id: row.id,
  one: row.title,
  two: row.name,
  three: row.age,
  four: row.year,
}));

function App() {
  return (
    <table>
      <thead>
        <tr>
          {newColumns.map((col) => (
            <th key={col.accesorKey}>{col.header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {newRows.map((row) => (
          <tr key={row.id}>
            {newColumns.map((col) => (
              <td key={col.accesorKey}>{row[col.accesorKey] || '-'}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

    newColumns is an array of objects that represent each column.

    accesorKey is the the key we will use to match a row field to a specific column.

    header is the header label of that column.

    newRows is an array of rows, where each field represent a column accesorKey.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search