Vue 3 Element-plus Virtualized Table fill with real data

I am a newbee in frontend, I am trying to implement Element-plus Virtualized Table with real data. The basic example structure is:

const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
    Array.from({ length }).map((_, columnIndex) => ({
        ...props,
        key: `${prefix}${columnIndex}`,
        dataKey: `${prefix}${columnIndex}`,
        title: `Column ${columnIndex}`,
        width: 150,
  }))

const generateData = (
    columns: ReturnType<typeof generateColumns>,
    length = 200,
    prefix = 'row-'
) =>
    Array.from({ length }).map((_, rowIndex) => {
        return columns.reduce(
            (rowData, column, columnIndex) => {
            rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
            return rowData
      },
      {
          id: `${prefix}${rowIndex}`,
          parentId: null,
      }
    )
  })

const columns = generateColumns(10)
const data = generateData(columns, 1000)

I have real data something like

const fetchedData = [
    { adress: "...", protocol: ["..."], email: ["..."] },
    { adress: "...", protocol: ["...", "..."], email: ["..."] },
    { adress: "...", protocol: ["..."], email: ["...", "..."] },
];

The question is how to implement my real data to functions in example?