resizable table columns

How we can create a flexible table in which columns are resizable? Solution: See this Resizable Table columns With Drag and Slide Feature, Drag to Resize.

Previously I have shared a sorting datatable program,  but this is a table with column resize feature. Basically, a table column resizes program you will see popular tables software like excel, google sheet, etc. Where we can adjust the column’s width by hold and dragging the sides. This is also important in websites UI design, where user can resize the columns and can see full contents easily.

Today you will learn to create a table with Drag to Resize column feature. Basically, there is a table with 8 columns and multiple rows. There are header items and thin separator lines in every column. You can resize the columns by just hold click and drag left or right. The table is fully flexible you can drag and slide for resizing, then a horizontal scroll bar will automatically appear.

So, Today I am sharing Resizable Table Columns With Drag and Slide Feature. There have used HTML to create the layout, CSS for styling, and JavaScript for functioning. This table is perfect for backend integration where admin can see user’s data or sales data, or anything else. You can use this program on your website for better users experience.

If you are thinking now how this resizable table program actually is, then the preview given below.

Preview Of Drag to Resize Columns

See this video preview to getting an idea of how this program looks like.

Live Demo

Now you can see this program visually, also you can see it live by pressing the button given above. If you like this program, then get the source code of its.

You May Also Like:

 

Resizable Table Columns With Drag and Slide Source Code

Before sharing source sharing, let’s talk about it. First I have created a table using HTML <table> tag, and created <thead> & <tbody> sections inside it. Inside the <thead> tag I have put all the headings which are in the top nav section. There I have used HTML Data-* attribute to store and pass custom data. Inside every heading I have placed a span for drag and slide item.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. There I have used grid display command display: grid; to create the flexible layout, and used other grid CSS commands. There I have sticky position for table heading, it will fix and stick the table head on scroll down. I have used fr values in the grid commands.

JavaScript handling here the drag and resize column feature. There I have fetched the table using JS document.querySelector command and stored in conts. After that, I used Math.max command to resize and gave new width values to the column. And used many more commands like .addEventListener  and if{} else{} statements etc.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third file for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created Resizable Table Columns With Drag and Slide Feature, Drag to Resize Width Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

8 COMMENTS

  1. Hi,
    nice website and the contents you uploads are awesome.
    permission to copy your codes,edit them and use as it suites me.

    also do you teach coding?
    if yes i will really love to learn.

  2. Hi, I found a bug. If you expand a column, scroll down and return to top and narrow down the column move cursor will be replaced to forbitten anf you won’t be able to move column.

LEAVE A REPLY

Please enter your comment!
Please enter your name here