React Matrix with InputFields

Question

I currently try to create a React Component, taking as Input the number of rows and columns. This should return a (math) Matrix with rows*cols input fields inside.

<div className={`flex flex-row items-center`}>
  <table>
    <tbody>
    {Array.from({length: parsedVectorObject.cols}).map((_, i) => (
      <tr key={i}>
        {Array.from({length: parsedVectorObject.rows}).map((_, j) => (
          <td key={j}>
            <Input id={`x_${i}_${j}`} className={`w-12 mx-0.5`}/>
          </td>
        ))}
        </tr>
    ))}
    </tbody>
  </table>
</div>

This is my current stand, but I am stilling missing parentheses around the table, such that it gets the look of a matrix.

Any one knows how do it?

I tried to create a svg, but both a file and creating a path seem quite complicated.

thanks in advance

Answer 1

Firstly, you should set the height of div by getting height of table. And then properly change width in below code w-[0.85em]

    <div className={`flex justify-center items-center h-32`}>
      <div className='w-[0.85em] h-full'>
        <svg width="100%" height="100%" preserveAspectRatio="none" viewBox="3 0 106 186" ><path d="M85 0 A61 101 0 0 0 85 186 L75 186 A75 101 0 0 1 75 0"></path></svg>
      </div>
      <table>
        <tbody>
          {Array.from({ length: 5 }).map((_, i) => (
            <tr key={i}>
              {Array.from({ length: 3 }).map((_, j) => (
                <td key={j}>
                  <input id={`x_${i}_${j}`} className={`w-12 mx-0.5`} />
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <div className='w-[0.85em] h-full'>
        <svg width="100%" height="100%" preserveAspectRatio="none" viewBox="3 0 106 186" ><path d="M24 0 A61 101 0 0 1 24 186 L34 186 A75 101 0 0 0 34 0" ></path></svg>
      </div>
    </div>

Attatched image below.

I think there's another solution, let's think about it.