0

I have a very long table with lots of data with a horizontal overflow.

The problem is that the user needs to scroll to the end of the table on the desktop view to scroll in the horizontal overflow through the scrollbar.

I've seen that there are libraries with built-in custom hooks for draggable items, but I cannot add other dependencies to this project.

is there a simple way in react to implement the dragging and scrolling of an element?

Attached below is an example. I need to get the table body scroll to be draggable towards the tbody overflow so that the user is not forced to go to the bottom of the page to scroll horizontally to see the data.

I already tried a bunch of things I found on the internet but all the options were way too over-engineered for this simple feature.

Here is a simple snippet example:

.container{
  width: 500px;
  overflow-x: auto;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 1000px;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<div class="container">
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>
</div>

enter image description here

giosan
  • 291
  • 1
  • 4
  • 15
  • Can you explain your use-case? Moving table-elements around seems an odd use-case, given that a `` should be used for tabular data, which should typically reorder the rows (or columns) as a whole. Depending on what you're doing it may be that there are better, or easier, methods available.
     – David Thomas Apr 11 '22 at 12:30
  • Maybe I didn't explain myself clearly. I don't need to move table elements. I need the entire table body to be draggable horizontally for the user to be able to scroll horizontally without going at the bottom of the page forcing them to use the scrollbar. – giosan Apr 11 '22 at 12:35
  • Yeah, that makes more sense, so rather "drag and drop" you're looking for a "drag and scroll" effect? Can you post your (relevant) "*[mcve]*" so we can reproduce your problem? – David Thomas Apr 11 '22 at 12:37
  • https://codepen.io/giosue-santoro/pen/gOojpoE here it is. I need the table to be scrollable and draggable horizontally, right now it's only scrollable – giosan Apr 11 '22 at 12:52
  • I was found it, hopefully can help your problem [Add a horizontal scrollbar to an HTML table](https://stackoverflow.com/questions/5533636/add-a-horizontal-scrollbar-to-an-html-table) – Ferri Adi Prasetya Jul 14 '22 at 08:02
  • I found this, hopefully can help your problem https://stackoverflow.com/questions/5533636/add-a-horizontal-scrollbar-to-an-html-table – Ferri Adi Prasetya Jul 14 '22 at 08:03

0 Answers0