Nested Reactable Example in R

reactable.R

# This is just the reactable function; you might have to include this somewhere in a larger R file.
# `::` is used a splitting separator because the data uses a paste() statement to collapse several columns into one.
# This is a _hack_ to have multiple values in one cell of reactable.

reactable(
  data = student_data,
  searchable = TRUE,
  pagination = FALSE,
  borderless = TRUE,
  details = function(index) {
    div(
      reactable(
        data = student_data[index, "student_details"] |>
          data.frame(),
        class = "student-details-table figtree-500",
        columns = list(
          student_details = colDef(
            cell = function(student_string) {
              student <- strsplit(student_string, "::")[[1]]
              div(
                class = "student-details",
                div(
                  class = "student-email student-details-info",
                  icon(
                    "envelope",
                    class = "fa-solid"
                  ),
                  student[5]
                ),
                div(
                  class = "college-name student-details-info",
                  icon(
                    "building-columns",
                    class = "fa-solid"
                  ),
                  str_to_title(
                    student[4]
                  )
                ),
                div(
                  class = "course-name student-details-info",
                  icon(
                    "graduation-cap",
                    class = "fa-solid"
                  ),
                  glue(
                    "{student[3]} / {student[1]}"
                  )
                ),
                div(
                  class = "batch-name student-details-info",
                  icon(
                    "user-group",
                    class = "fa-solid"
                  ),
                  student[2]
                )
              )
            }
          )
        )
      )
    )
  },
  onClick = "expand",
  rowStyle = list(
    cursor = "pointer"
  ),
  language = reactableLang(
    noData = "No students found"
  ),
  defaultColDef = colDef(
    align = "center"
  ),
  class = "student-table figtree-500",
  columns = list(
    details = colDef(
      show = FALSE
    ),
    college_id = colDef(
      show = FALSE
    ),
    batch_id = colDef(
      show = FALSE
    ),
    course_id = colDef(
      show = FALSE
    ),
    loggedin = colDef(
      show = FALSE
    ),
    student_details = colDef(
      show = FALSE
    ),
    name = colDef(
      name = "Student",
      align = "left",
      width = 250,
      cell = function(name) {
        div(
          class = "student-name",
          str_to_title(name)
        )
      }
    ),
    student_points = colDef(
      name = "Points",
      cell = function(point_string) {
        points <- strsplit(point_string, "::")[[1]]
        div(
          class = "student-points",
          div(
            class = "accured-points",
            points[1]
          ),
          div(
            class = "total-points",
            glue(
              "/ {points[2]}"
            )
          )
        )
      }
    ),
    course_progress = colDef(
      width = 150,
      name = "Progress",
      cell = data_bars(
        student_data(),
        max_value = 1,
        fill_color_ref = "color",
        background = "#f1f3f4",
        force_outside = c(0, 0.30),
        round_edges = TRUE,
        bar_height = 20,
        number_fmt = label_percent(),
        text_position = "center"
      )
    ),
    color = colDef(
      show = FALSE
    )
  )
) 

student.scss

.student-table {
  background: 0;

  .rt-table {
    background: none !important;
    border-radius: 0.75rem;
    padding: 1rem;
  }

  .rt-search {
    padding: 1rem;
    width: 100%;
    background: none !important;
    border-radius: 0.75rem;
    border: 2px solid black;
  }

  .rt-search:active,
  .rt-search:hover {
    background: none !important;
    border: 2px solid black;
  }

  .rt-thead {
    display: none;
  }

  .rt-tbody {
    gap: 1rem;

    .rt-tr-group {
      background: #fff;
      margin: 0 -0.75rem;
      padding: 1rem;
      border-radius: 1rem;
      box-shadow: 0.25rem 0.25rem var(--primary);
      border: #000 2px solid;

      .rt-tr {
        align-items: center;
      }

      .rt-td-expandable {
        display: none;
      }

      .student-name {
        font-size: 1.2rem;
        font-weight: 700;
      }

      .student-points {
        display: flex;
        gap: 0.25rem;
        align-items: baseline;
        justify-items: center;

        .accured-points {
          font-size: 1.2rem;
          font-weight: 700;
        }

        .total-points {
          filter: contrast(0.01);
          font-weight: 100;
          font-size: 1rem;
        }
      }
    }

    .rt-tr-group:hover {
      border: #000 2px solid;
      box-shadow: 0.25rem 0.25rem var(--primary);
    }
  }
}

.student-table .rt-tr-group > .rt-tr-details .student-details-table {
  .rt-thead {
    display: none;
    }

    .rt-tbody {
    gap: 1rem;

    .rt-tr-group {
      background: #fff;
      border: unset;
      box-shadow: unset;
      padding: 0;

      .rt-tr {
        align-items: center;
      }

      .student-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        text-align: left;
        gap: 0.5rem;

        .student-details-info {
          filter: contrast(0.1);
          font-variant-caps: all-small-caps;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
      }
    }

    .rt-tr-group:hover {
      border: unset;
      box-shadow: unset;
    }
  } 
}