score:0

it seems like the tablehead has 5 tablecell, but each tablerow has 7 tablecell.

so you need to make sure if the tablehead and tablerow has the same number of tablecell each.

...
          <tablehead>
            <tablerow>
              <tableheader name="name" />
              <tableheader name="type" />
              <tableheader name="size" />
              <tableheader name="hp" />
              <tableheader name="cr" />
              // try to use 2 empty tablecell
              <tablecell />
              <tablecell />
            </tablerow>
          </tablehead>
          <tablebody>
            ...

and also since each tablecell is aligned left, so you need to add align="left" to the tablecell inside tableheader component.

function tableheader(params) {
  return (
    <tablecell align="left" classname="table-headers">
      <strong>{params.name}</strong>
      <div classname="sorting-buttons">
        <button>up</button>
        <button>down</button>
      </div>
    </tablecell>
  );
}

please make sure if you removed the table-headers class name from tablerow in tablehead. it should not be flex.


Related Query

More Query from same tag