Untitled

   <tbody>
          {data.map((item, index) => (
            <React.Fragment key={index}>
              <tr>
                {columns.map(
                  (
                    {
                      accessorKey,
                      expandable,
                      transform,
                      className,
                      header,
                      hide = false,
                      isChecked = 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>
                    ) : (
                      !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>

              {collapseData?.includes(index) && (
                <>
                  {showAvgCost && (
                    <tr className="span-margin-tr">
                      <td
                        className={`text-start ${styles["text-bold-green"]}`}
                        colSpan={2}
                      >
                        <span>IQUW Share</span>
                      </td>
                      <td colSpan={2}>
                        <span>
                          {putThousandSeparator(item?.details?.limit)}
                        </span>
                      </td>
                      <td colSpan={5}>
                        <span>
                          {putThousandSeparator(item?.details?.premiumQuoted)}
                        </span>
                      </td>
                      <td colSpan={2}>
                        <span></span>
                      </td>
                    </tr>
                  )}

                  <tr>
                    <td colSpan={13}>
                      <table className="collapseble-row">
                        <tr>
                          <td
                            className={item?.details ? "" : "text-center"}
                            colSpan={columns.length}
                          >
                            <QuoteDetailsAccordion
                              qouteBuilderData={item.details}
                              initialOpenState={true}
                              accordionId={`accordion-${item.id}`}
                              toggleCollapse={toggleCollapse}
                              viewType={viewType}
                              showAvgCost={showAvgCost}
                            />
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </>
              )}
            </React.Fragment>
          ))}
        </tbody>


///

tbody .text-color-green:not(:first-child) {
  color: var(--fg-brand-primary);
}

.text-bold-green {
  color: var(--primary-brand-green-alt) !important;
  font-weight: var(--font-weight-600);
}

.cursor-pointer {
  cursor: pointer;
}
.custom-tbody-border tbody{
  border-left: 1px solid #ccc;
}

.collapse-div{
  display: flex;
}

.option-div{
  display: flex;
  align-items: center;
}

.option-input {
  margin-right: 4px;
}

.editable-div{
  display: flex;
  align-items: center;
}