Проблема с горизонтальной и вертикальной прокруткой в ​​пользовательском компоненте таблицы данных реагирования ⇐ CSS

[Anonymous]

Я разработал собственный компонент таблицы данных реагирования, который динамически отображает в таблице headersData, rowData и footerData.
Когда дело доходит до прокрутки, я пытаюсь выполните следующие 2 пункта:

• Горизонтальная прокрутка -
  А) Первые два столбца должны быть зафиксированы и начиная с третьего столбца до последнего столбца должна быть включена горизонтальная прокрутка.
  Б) Горизонтальная прокрутка всегда должна быть видна в нижней части окна. Максимальная высота составляет 300 пикселей, и она должна
  всегда быть видна внизу.
• Вертикальная прокрутка –
  Строка заголовка должен быть зафиксирован вверху при вертикальной прокрутке.

Таблица данных пользовательской реакции и моя попытка находятся по ссылке CodeSandBox ниже. Я достиг первой точки, упомянутой в разделе «Горизонтальная прокрутка», но не смог достичь второй точки, упомянутой в разделе «Горизонтальная прокрутка» и «Вертикальная прокрутка с фиксированным заголовком вверху». Пытался много дней и не мог понять. По этой причине подумал обратиться за помощью и разместил вопрос здесь. Пожалуйста, дайте мне знать, что вы думаете о том, как мы можем реализовать эту функцию. Заранее спасибо.
Ссылка на CodeSandBox:
https://codesandbox.io/s/custom-react-d ... 970ed?file =/src/tableContainer/DataTableContainer.tsx
Примечание. Поддержка в IE не требуется.
Ожидается, что поведение прокрутки будет таким, как показано в ссылке ниже:
https://jsfiddle.net/6qxcaemu/5

Подробнее здесь: https://stackoverflow.com/questions/643 ... -component