Mui DataGrid — расширяемый контент в строке

Question

Мне нужно создать сетку данных, в которой один столбец (подробности) может содержать много контента. Идея состоит в том, чтобы показать максимум 8 строк. В случае, если контент не умещается в 8 строк, я должен показать кнопку «показать больше», которая расширит строку и отобразит все остальное. Дело в том, что я действительно не знаю, как к этому подойти. Я создал столбец, в котором установил максимальное количество строк 8, но не знаю, как рассчитать общее количество строк, и в случае, если его должно быть больше 8, покажите кнопку «Добавить», которая увеличит высоту.

      const columns: GridColDef[] = [
    {
      field: 'title',
      headerName: t`Title`,
      flex: 1,
    },
    {
      field: 'details',
      headerName: t`Details`,
      flex: 2,
      renderCell: ({ row }) => (
        <Box sx={{
          padding: 1,
        }}
        >
          <Typography
            variant="body2"
            sx={{
              display: '-webkit-box',
              overflow: 'hidden',
              WebkitBoxOrient: 'vertical',
              WebkitLineClamp: 8,
            }}
          >
            {row.details}
          </Typography>
          <Button
            sx={{
              color: 'primary',
              padding: 0,
              margin: 0,
            }}
          >
            Show more
          </Button>
        </Box>
      ),
    },
  ];

return (
 <DataGrid
          sx={{
            border: 0,
            '& .MuiDataGrid-columnHeaders': {
              backgroundColor: '#F5F6F8',
            },
          }}
          isRowSelectable={() => false}
          autoHeight
          getRowHeight={() => 'auto'}
          loading={false}
          columns={columns}
          rows={mockData || []}
          rowCount={5}
          page={currentPage}
          onPageChange={() => {
          }}
          onPageSizeChange={setPageSize}
          pageSize={pageSize}
          rowsPerPageOptions={[25, 50, 100]}
        />
)

РЕДАКТИРОВАТЬ: у меня есть идея, как увеличивать и уменьшать количество отображаемых строк, я просто при нажатии устанавливаю состояние с идентификатором выбранной строки и просто расширяю или уменьшаю его, сравнивая идентификатор и устанавливая для WebkitLineClamp значение «авто» или 8. Дело в том, что я все еще не знаю, как рассчитать количество строк в каждой строке, так как нет смысла показывать кнопку «показать больше», если количество строк меньше 8