my React app features a table that displays a grid of input elements. The grid is displayed using a <table> HTML element. Inside of the table I've got a <tbody> element that contains a set of <tr> rows, which is a component called ResoureBookingRow. Each ResourceBookingRow contains a set of <td> elements, which is a component called ResourceBooking.

When I select an input element in my grid, I want to be able to press tab on my keyboard to focus on the next cell. Instead, it always focuses on the first cell of the first row. How do I fix this issue?

I've tried some tweaking with the key and tabIndex properties for the <td> elements, but no results so far. When I manually added some <td> cells to my ResourceBookingRow component, I did have the ability to tab from one cell to the next.

My HTML looks like this:

<table className="table-style">
    <thead>
      // some HTML
    </thead>
    <tbody>
      {dateData?.ProjectMembers.map((projectMember) => {
        const guid = GenerateRandomGUID();
        return (
          <ResourceBookingRow
            key={guid}
            uniquekey={guid}
            ProjectMember={projectMember}
            onHandleChange={onHandleChange}
          />
        );
      })}
    </tbody>
</table>

My components look like this: ResourceBookingRow

interface IProps {
  ProjectMember: IProjectMember;
  uniquekey: string;
  onHandleChange: (
    value: string | null,
    resourceId: string,
    bookingIndex: number,
    resourceBooking: IResourceBooking,
    projectMember: IProjectMember
  ) => void;
}

const ResourceBookingRow = ({
  ProjectMember,
  uniquekey,
  onHandleChange,
}: IProps) => {
  return (
    <tr key={uniquekey}>
      {ProjectMember?.ResourceBookings.map((booking, index) => {
        const bookingKey = `${booking.Key}-${index}`;
        return (
          <ResourceBooking
            key={bookingKey} // Use guid for the unique key for each ResourceBooking
            uniquekey={bookingKey} // Pass uniquekey down if needed for other use
            ResourceBooking={booking}
            onValueChange={(value) =>
              onHandleChange(
                value,
                ProjectMember.Id,
                index,
                booking,
                ProjectMember
              )
            }
            index={index}
          />
        );
      })}
    </tr>
  );
};

ResourceBooking:

interface IProps {
  ResourceBooking: IResourceBooking;
  uniquekey: string;
  onValueChange: (value: string | null) => void;
  index: number;
}

const ResourceBooking = ({
  ResourceBooking,
  uniquekey,
  onValueChange,
  index,
}: IProps) => {
  console.log(uniquekey);
  return (
    <td key={uniquekey}>
      <input
        type="number"
        defaultValue={ResourceBooking.Hours ?? ""}
        onBlur={(e) => onValueChange(e.target.value)}
      />
    </td>
  );
};

Thanks in advance!