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
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
resize
. ¿Cómo podrías hacerlo? Pues como todos, escribiendo y probando. Saludos