kaleon

jajabin, попробуйте использовать классический подход.
Есть много книг по алгоритмам, обзоры/отзывы/рецензии можно найти в интернете.
Что лучше/хуже для конкретного индивида может понять только сам индивид. Возможно вам конкретика нужна, "сколько вешать в граммах" или "ткните пальцем"

как правильно себе построить план?

В общем случае план одинаков +/- нюансы конкретного издания. (теория + практика)
Тут главное не распыляться, а начать.
Левитин А.В.
Алгоритмы: введение в разработку и анализ (написана доступным языком, много упражнений для закрепления)

и Алгоритмические головоломки (немного теории и практика, практика и еще раз практика) этого же автора.

Поллис Г., Хайнеман Дж., Селков С.
Алгоритмы. Справочник с примерами на C, C++, Java ... (поможет понять что где когда и как применять)

Какой атрибут? Key? Нет такого атрибута у элемента, key для другого нужен.

Хотите знать id в обработчике клика - сделайте какой-нибудь другой атрибут, не key. Например:

data-id={user.id}

const elemId = +e.currentTarget.dataset.id;

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

*Храните в state текущие данные таблицы и размер экрана.
*Создайте событие updateDimensions, в котором по событию изменения экрана (window.innerWidth) обновляете state с новыми данными.

Пример события изменения экрана

Прелоадер.