1. Конечно, лучше если fid будет первым.
2. Спасибо, сейчас перейду.
3. Тогда можно ограничить до 8 столбцов.

Не важно сколько. Главное, что не известно заранее, сколько их, соответственно не известны их имена. Поэтому объектами строки таблицы представлять проблематично.

А можно тогда для такого массива из трех столбцов

const data = [
{id:"2", name: "2", fid:"1"},
{id:"6", name: "2", fid:"1"},
{id:"2", name: "2", fid:"1"},
{id:"7", name: "7", fid:"1"},
{id:"10", name: "10", fid:"1"},
{id:"11", name: "11", fid:"2"},
{id:"12", name: "11", fid:"2"},
{id:"1", name: "1", fid:"2"},
{id:"10", name: "10", fid:"2"},
{id:"5", name: "5", fid:""},
{id:"3", name: "5", fid:""},
];

Мне бы только понять сам принцип.

Так вы себе или нам задания придумываете?

У вас уже есть 2 примера готовых скриптов для разбора, изучайте оба и пробуйте написать то, что вам нужно. По ходу дела, если необходимо, задавайте вопросы.

Как правильно сюда добавить объединение по 'name'

container.innerHTML = '';
        container.appendChild(
            makeTableNode(
                groupBy(data, 'fid'),
                'fid'
            )

чтобы объединились 'name' в уже объединенных 'fid'?

А его нужно не сюда добавлять, это просто идет очищение контейнера и добавление в него построенной таблицы.
Объединение происходит в функции groupBy.

Я уже посмотрел примеры по этой функции, но везде идет группировка только по одному столбцу.

groupBy(data, ['fid'], ['name']) не работает

Anat37, начните с изучения основ js. Узнайте как работают функции, какие типы данных бывают и т.п.
От того, что вы в функцию, которая принимает 2 аргумента и вторым должна быть строка передадите 3 аргумента, где последние два - массивы, ничего не изменится.
Программирование так не работает, это не волшебство.