0

existe la posibilidad de mover las celdas de una tabla HTML con el mouse ?

La intención es permitir a una tabla HTML cambiar el tamaño de las filas y columnas arrastrando y soltando con el mouse

Si es así, ¿Cómo podría hacerlo ?

Gracias

2
  • 1
    En esta respuesta del SO en inglés tienen una posible solución
    – masterguru
    Commented el 28 jun. 2022 a las 19:06
  • 1
    Por favor leer Cómo preguntar. Aquí no hacemos software a medida. ¿Qué has intentado o investigado? Sin JS, lo único que te queda es CSS mediante algún atributo como resize. ¿Cómo podrías hacerlo? Pues como todos, escribiendo y probando. Saludos Commented el 28 jun. 2022 a las 19:13

1 respuesta 1

2

Si, si es posible siempre y cuando utilices javascript, pues este va a encargarse de interactuar con el front-end una vez carguen los elementos del DOM

Te dejo un ejemplo de como estirar las columnas empleando JS

const min = 150;
// The max (fr) values for grid-template-columns
const columnTypeToRatioMap = {
  numeric: 1,
  'text-short': 1.67,
  'text-long': 3.33 };


const table = document.querySelector('table');

                                          
const columns = [];
let headerBeingResized;

// The next three functions are mouse event callbacks

// Where the magic happens. I.e. when they're actually resizing
const onMouseMove = e => requestAnimationFrame(() => {
  console.log('onMouseMove');

  // Calculate the desired width
  horizontalScrollOffset = document.documentElement.scrollLeft;
  const width = horizontalScrollOffset + e.clientX - headerBeingResized.offsetLeft;

  // Update the column object with the new size value
  const column = columns.find(({ header }) => header === headerBeingResized);
  column.size = Math.max(min, width) + 'px'; // Enforce our minimum

  // For the other headers which don't have a set width, fix it to their computed width
  columns.forEach(column => {
    if (column.size.startsWith('minmax')) {// isn't fixed yet (it would be a pixel value otherwise)
      column.size = parseInt(column.header.clientWidth, 10) + 'px';
    }
  });

  /* 
        Update the column sizes
        Reminder: grid-template-columns sets the width for all columns in one value
      */
  table.style.gridTemplateColumns = columns.
  map(({ header, size }) => size).
  join(' ');
});

// Clean up event listeners, classes, etc.
const onMouseUp = () => {
  console.log('onMouseUp');

  window.removeEventListener('mousemove', onMouseMove);
  window.removeEventListener('mouseup', onMouseUp);
  headerBeingResized.classList.remove('header--being-resized');
  headerBeingResized = null;
};

// Get ready, they're about to resize
const initResize = ({ target }) => {
  console.log('initResize');

  headerBeingResized = target.parentNode;
  window.addEventListener('mousemove', onMouseMove);
  window.addEventListener('mouseup', onMouseUp);
  headerBeingResized.classList.add('header--being-resized');
};

// Let's populate that columns array and add listeners to the resize handles
document.querySelectorAll('th').forEach(header => {
  const max = columnTypeToRatioMap[header.dataset.type] + 'fr';
  columns.push({
    header,
    // The initial size value for grid-template-columns:
    size: `minmax(${min}px, ${max})` });

  header.querySelector('.resize-handle').addEventListener('mousedown', initResize);
});
* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

table {
  min-width: 100vw;
  width: auto;
  -webkit-box-flex: 1;
          flex: 1;
  display: grid;
  border-collapse: collapse;
  grid-template-columns: 
    minmax(150px, 1fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr);
}

thead,
tbody,
tr {
  display: contents;
}

th,
td {
  padding: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #5cb85c;
  text-align: left;
  font-weight: normal;
  font-size: 1.1rem;
  color: white;
  position: relative;
}

th:last-child {
  border: 0;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background: black;
  opacity: 0;
  width: 3px;
  cursor: col-resize;
}

.resize-handle:hover,
.header--being-resized .resize-handle {
  opacity: 0.5;
}

th:hover .resize-handle {
  opacity: 0.3;
}

td {
  padding-top: 10px;
  padding-bottom: 10px;
  color: #808080;
}

tr:nth-child(even) td {
  background: #f8f6ff;
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Resizable Table Columns | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
<table>
  <thead>
    <tr>
      <th data-type="numeric">ID <span class="resize-handle"></span></th>
      <th data-type="text-short">First name <span class="resize-handle"></span></th>
      <th data-type="text-short">Last name <span class="resize-handle"></span></th>
      <th data-type="text-short">Email <span class="resize-handle"></span></th>
      <th data-type="text-long">Street <span class="resize-handle"></span></th>
      <th data-type="text-short">Country <span class="resize-handle"></span></th>
      <th data-type="text-long">Pincode <span class="resize-handle"></span></th>
      <th data-type="text-short">IBAN <span class="resize-handle"></span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>000001</td>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000002</td>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000003</td>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000004</td>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000005</td>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000006</td>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000007</td>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>



  </tbody>
</table>

<script  src="function.js"></script>

</body>
</html>

Quizá probando búsquedas en ingles te facilite un poco mas lo que buscas, prueba con "Resize table rows drag and drop javascript". Puedes ver este otro ejemplo: Ejemplo

4
  • Muchas gracias lo intentare
    – Lester
    Commented el 28 jun. 2022 a las 19:34
  • 1
    Por favor, evita responder este tipo de preguntas tan mal formuladas ya que terminan cerradas y tu aporte se pierde. Saludos Commented el 28 jun. 2022 a las 19:36
  • El título reza "sin javascript" pero ahora parece que le da igual :-)
    – masterguru
    Commented el 28 jun. 2022 a las 19:37
  • es que ya veo que no es posible hacerlo sin JavaScript, por lo que tengo pensado editar la pregunta. Gracias
    – Lester
    Commented el 28 jun. 2022 a las 22:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.