Html table resizable columns

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Simple Javascript resizable table columns

License

validide/resizable-table-columns

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4. — [Release notes](https://github.com/jonschlinkert/word-wrap/releases) — [Commits](jonschlinkert/word-wrap@1.2.3. 1.2.4) — updated-dependencies: — dependency-name: word-wrap dependency-type: indirect . Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot]

Git stats

Files

Failed to load latest commit information.

README.md

Simple JavaScript resizable table columns

• Add the resizable-table-columns.css file to the page.
• Add the bundle/index.js file to the page.
• Optionally add a store library
• Add the HTML table markup
• Create a new instance of the resizable table like below

table class pl-s">data" data-rtc-resizable-table pl-s">table.one"> thead> tr> th>No.th> th data-rtc-resizable pl-s">name">Nameth> th data-rtc-resizable pl-s">country">Counrtyth> th data-rtc-resizable pl-s">region">Regionth> th>Cityth> th data-rtc-resizable pl-s">street">Streetth> th data-rtc-resizable pl-s">post-code">Post Codeth> th data-rtc-resizable pl-s">last-update">Last updatedth> th data-rtc-resizable pl-s">uuid">UUIDth> tr> thead> tbody> tr> td>1td> td>Eugeniatd> td>Serbiatd> td>MNtd> td>Minneapolistd> td>Ap #207-8285 Nibh Rd.td> td>41754td> td>2017-11-15T16:52:00-08:00td> td>E212DAC2-220E-9589-D96A-3B58242E9817td> tr> tbody> table>

//will use the default options new ResizableTableColumns(tableElement, null); //override the default options new ResizableTableColumns(tableElement,  resizeFromBody: false, store: store >); // The store needs to implement the following interface interface IStore  get(id: string): any; set(id: string, data: any): void >

Default configuration options

var options =  // boolean - The resize handle will span the entire height of the table resizeFromBody: true, // null or number - The minimum width any column in the table should have minWidth: 40, // null or number - The maximum width any column in the table should have maxWidth: null, // number - The maximum number off milliseconds between to pointer down events to consider the action a 'double click' doubleClickDelay: 500, // data store provider (ex: https://github.com/marcuswestin/store.js) store: null, // null or number - The suggestion for how wide (in pixels) a cell might be in case the content is really wide. maxInitialWidthHint: null >

All modern browsers are supported. IE and older browsers might require polyfills for the library to work.

Источник

Creating resizable table grid with JavaScript

In this tutorial we’ll learn how to make html table columns resizable using pure JavaScript.

Create a table and style it

 * table td,th table,th,td 
 
 
Size
 
File
 
  
 
 
10Mb
 
C:\Users\BrainBell\Desktop\Empty\abc.txt
 
 
 

JavaScript code to resize HTML table column

The following code will select all tables and pass them to resizableGrid function.

var tables = document.getElementsByTagName(‘table’); for (var i=0; i

You can change the code If you don’t want to select all tables. For example, to select a single table by id:

var table = document.getElementById('tableId'); resizableGrid(table);

Next, we’ll create the resizableGrid which retrieves the very first row of the table and store all td elements to cols variable using row.children .

function resizableGrid(table) < var row = table.getElementsByTagName('tr')[0], cols = row ? row.children : undefined; if (!cols) return;

We’ll make a div for each column as column selector using createDiv function and pass this div to setListeners function for adding some mouse events listeners.

The createDiv function makes a div with absolute position which sits right side on the column. We’ll use this div as column resizer handle.

The setListeners function adds mousedown event to provided div element, so, when someone press the mouse button on that div (to resize the column) the mousedown event will trigger, where we store the values of current mouse position, the target column width and the next column width. The mousemove event listener add the difference previous and current mouse position pageX to current and next columns to resize the column. On mouseup event we’ll clear all the stored values.

function setListeners(div)< var pageX,curCol,nxtCol,curColWidth,nxtColWidth; div.addEventListener('mousedown', function (e) < curCol = e.target.parentElement; nxtCol = curCol.nextElementSibling; pageX = e.pageX; curColWidth = curCol.offsetWidth if (nxtCol) nxtColWidth = nxtCol.offsetWidth >); document.addEventListener('mousemove', function (e) < if (curCol) < var diffX = e.pageX - pageX; if (nxtCol) nxtCol.style.width = (nxtColWidth - (diffX))+'px'; curCol.style.width = (curColWidth + diffX)+'px'; >>); document.addEventListener('mouseup', function (e) < curCol = undefined; nxtCol = undefined; pageX = undefined; nxtColWidth = undefined; curColWidth = undefined; >); >

Adding hover effect when mouse over the column selector

We'll add a class to column selector div by editing the createDiv function.

Now style the columnSelector class:

Re-sizeable Table demo 4, hover effect:

Make an HTML table resizable

//var tables = document.getElementsByClassName('flexiCol'); var tables = document.getElementsByTagName('table'); for (var i=0; i function resizableGrid(table) < var row = table.getElementsByTagName('tr')[0], cols = row ? row.children : undefined; if (!cols) return; table.style.overflow = 'hidden'; var tableHeight = table.offsetHeight; for (var i=0;ifunction setListeners(div)< var pageX,curCol,nxtCol,curColWidth,nxtColWidth; div.addEventListener('mousedown', function (e) < curCol = e.target.parentElement; nxtCol = curCol.nextElementSibling; pageX = e.pageX; var padding = paddingDiff(curCol); curColWidth = curCol.offsetWidth - padding; if (nxtCol) nxtColWidth = nxtCol.offsetWidth - padding; >); div.addEventListener('mouseover', function (e) < e.target.style.borderRight = '2px solid #0000ff'; >) div.addEventListener('mouseout', function (e) < e.target.style.borderRight = ''; >) document.addEventListener('mousemove', function (e) < if (curCol) < var diffX = e.pageX - pageX; if (nxtCol) nxtCol.style.width = (nxtColWidth - (diffX))+'px'; curCol.style.width = (curColWidth + diffX)+'px'; >>); document.addEventListener('mouseup', function (e) < curCol = undefined; nxtCol = undefined; pageX = undefined; nxtColWidth = undefined; curColWidth = undefined >); > function createDiv(height) < var div = document.createElement('div'); div.style.top = 0; div.style.right = 0; div.style.width = '5px'; div.style.position = 'absolute'; div.style.cursor = 'col-resize'; div.style.userSelect = 'none'; div.style.height = height + 'px'; return div; >function paddingDiff(col) < if (getStyleVal(col,'box-sizing') == 'border-box')< return 0; >var padLeft = getStyleVal(col,'padding-left'); var padRight = getStyleVal(col,'padding-right'); return (parseInt(padLeft) + parseInt(padRight)); > function getStyleVal(elm,css) < return (window.getComputedStyle(elm, null).getPropertyValue(css)) >>;

Visit HTML table resizer demo page to download the minified version of "Table Resizer" script.

Источник

Accessible, Resizable Table-Columns

I love using the . It's an interactive control with touch-support, and you get accessibility baked-in for free! After I finished the Accessible Image Compare a while ago, I thought about other use-cases. One obvious candidate is resizable table columns. You'll find plenty of examples and libraries out there — but they often lack accessibility. None of the ones I found supported resizing with arrow-keys (they must be out there, I just couldn't find any). This is a bit more complex than the Accessible Image Compare; you need an for all columns except the last. Without styling, it looks like this: Each will update two custom properties, holding the widths of the cells to the left and the right of the input. In CSS, we need to stack them all on top, using position: absolute , the range-height must be set to the lowest value possible ( 1px ), while the draggable thumb must be the full height of the table. This is to avoid "collisions" between the ranges. It now looks like this: The draggable thumb should be invisible, so we'll set that to transparent , and the cursor should change to ew-resize when hovering: Then, when using keyboard-navigation, :focus-visible is used to show the thumb, styled like this: And because it's , you can use arrow-keys to de/increase the column widths! The widths are stored as CSS Custom Properties on the table:

 style="width: calc(1% * var(--c0));">ID 

I've made a JavaScript, you can add to any table — but beware(!) : I haven't used it in production yet - it might need tweaks and fixes. You can grab both CSS and JS from this Pen.

NOTE: This is a proof-of-concept. It's to show how we get a lot "out-of-the-box" when using native HTML-controls vs. writing loads of JavaScript. If you refine the code / come up with ways to make it better, please fork the Pen, and paste the link in the comments below.

UPDATE 02/05/2021: I've added styling for Firefox, as well as a small JavaScript-hack to run an event, that'll position the sliders correctly (only an issue in Firefox).

Top comments (22)

There is a typo in the ARIA attributes on the inputs: "aria-hideen"

2 likes Like Comment button

Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.

Interesting concept and I like the principle, however from an accessibility standpoint this will cause issues with screen readers.

Your inputs will be read out as range sliders with no context. As you can't use aria-hidden on them (as it will both be ignored on an active element and also it appears to crash the browser when I was fiddling with your example) this means there are now 3 random tab stops for inputs that make no sense.

Giving the sliders a label is a minimum step to at least inform screen reader users what they are interacting with. It is still not ideal but at least that gives them an idea that they can ignore this control.

I would also say that if you implement this a "skip this table" link should be provided if there are more than 3 columns as otherwise the tab stops could be frustrating.

The other issue is that on a mobile if you stack the columns too close to each other it is impossible to release them again due to tap target size. As you should have a minimum tap target size of 44 by 44 CSS pixels I am sure this can be fixed by just making the minimum number on the slider larger and the tap target area larger. However at that point we then run into the issue of needing a minimum of 132px just for column stacking and this solution becomes less useful as we lose over a quarter of the effective screen width.

To be fair it doesn't work well for mobile anyway as to view the columns requires moving several columns at a time and would be much easier just scrolling the whole table left and right so perhaps this could be desktop only?

Anyway keep fiddling with the concept as you might be on to something, but I think you might run into issues accessibility wise trying to do this with inputs.

3 likes Like Comment button

Источник