Untitled

<tbody>
  {data.map((item, index) => (
    <React.Fragment key={index}>
      <tr>
        {columns
          .filter(({ accessorKey }) => accessorKey !== "groupedInputs") // Exclude the grouped key
          .map(
            (
              {
                accessorKey,
                expandable,
                transform,
                className,
                header,
                hide = false,
                editable = false,
                percentage = false,
              },
              cIndex
            ) =>
              expandable ? (
                <td
                  key={cIndex}
                  className={className}
                  onClick={() => toggleCollapse(index)}
                >
                  <span className={`${styles["collapse-div"]}`}>
                    <span className={`${styles["option-div"]}`}>
                      <input
                        type={"checkbox"}
                        className={`${styles["option-input"]}`}
                        checked={isChecked}
                      />
                      {accessorKey === "index"
                        ? formatIndex(index)
                        : item[accessorKey]}
                    </span>
                    <span className={`${styles["cursor-pointer"]} m-1`}>
                      {collapseData?.includes(index) ? (
                        <FontAwesomeIcon icon={faChevronUp} />
                      ) : (
                        <FontAwesomeIcon icon={faChevronDown} />
                      )}
                    </span>
                  </span>
                </td>
              ) : accessorKey === "groupedInputs" ? (
                // Render grouped inputs in one <td>
                <td key={cIndex} className="combined-inputs">
                  <div className="editable-group">
                    {groupedFields.map((key) => (
                      <input
                        key={key}
                        className="editable-input"
                        type="text"
                        value={getTransformValue(
                          getAccessorValue(item, key),
                          transform
                        )}
                        onChange={(e) =>
                          handleChangeInput(e.target.value, index, key)
                        }
                      />
                    ))}
                  </div>
                </td>
              ) : (
                !hide && (
                  <td
                    key={cIndex}
                    className={
                      className === "text-color-green"
                        ? styles[className]
                        : className
                    }
                  >
                    {editable ? (
                      <span className={`${styles["editable-div"]}`}>
                        <input
                          className={`${styles["editable-input"]}`}
                          type={"text"}
                          value={getTransformValue(
                            getAccessorValue(item, accessorKey),
                            transform
                          )}
                          onChange={(e) =>
                            handleChangeInput(
                              e.target.value,
                              index,
                              accessorKey
                            )
                          }
                        />
                        {percentage && "%"}
                      </span>
                    ) : (
                      getTransformValue(
                        getAccessorValue(item, accessorKey),
                        transform
                      )
                    )}
                  </td>
                )
              )
          )}
      </tr>
    </React.Fragment>
  ))}
</tbody>