Как заменить элементы таблицы html на div для нового рендера

Question

Итак, у меня есть таблица с некоторыми столбцами и строками. Однако я пытаюсь изменить все элементы, связанные с таблицей HTML, с помощью div с классами на меньших экранах, для лучшего контроля, потому что это вызывает головную боль при получении пользовательского интерфейса. хочу, когда это все еще таблица.

или я должен создать новый макет вручную на стороне, а затем отрендерить это. Кроме того, предложите лучший подход, если один.

function App(children) {
  let [width, height] = WindowSize(); // to watch the window Resize
  console.log(width, height)
  return  (
    <div className="table-container">
      <div className="table-container-content">
        <table>
          <thead>
            <tr>
              <th data-type="text-short">
                From <span class="resize-handle"></span>
              </th>
              <th data-type="text-short">
                To<span class="resize-handle"></span>
              </th>
              <th data-type="text-short"></th>
              <th data-type="text-short">
                Subject <span class="resize-handle"></span>
              </th>
              <th></th>
              <th data-type="text-short">
                Date <span class="resize-handle"></span>
              </th>
            </tr>
          </thead>
          <tbody>
            {userData.map((row, index) => (
              <tr key={index}>
                <td>{row.from}</td>
                <td>{row.to}</td>
                <td>
                  <div className="bro-fg">+1</div>
                </td>
                <td>{row.subject}</td>
                <td>
                  <img className="icon_clip" src={Icon_clip} fill="#024873" />
                </td>
                <td>{rightDateFormat(row.date)}</td> //formating my dates
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );

}

ReactDOM.render(<App />, document.getElementById('root'));